developing the een website€¦ · the een knew it was time to join the online world. it has been...

Developing the EEN Website: What can we make it do for you?

The Evaluators’ Café: A Networking and Capacity Building Session #6

The George Washington University

June 24, 2011

Presented by

CHRISMETZNER

About the Presenter

Hello! My name is Chris Metzner. I have been in the graphic design industry for over 14 years and developing websites for 7 of them. I studied art through college, both in Maryland and Australia, learning to combine my passion with the computer world.

Seeing print and web projects as works of art has been the key to my success. Based out of Jacksonville, Florida, I help organizations near and far achieve their unique marketing and advertising goals.

Would you like more information about me? Visit my website! Th ere you will fi nd numerous portfolio pieces and articles about graphic design and data visualization.

[email protected](904) 885-0489

Facebook.com/ChristopherMetznerTwitter.com/ChrisMetznerLinkedin.com/in/ChrisMetzner

Enjoy the forum!

CHRISMETZNER

Background EEN InformationSince 2006, the Environmental Evaluators Network has produced an annual forum that brings together individuals in the fi elds of natural resource conservation and environmental management.

Each year, more people participate and as the forum’s popularity has grown, so have the demands to get the information out faster. As a result, the idea of a brand new website for the EEN was born.

Many questions were raised. How would it best serve multiple groups within the network? How could it be visually appealing? How could it help grow the forum and connect its participants?

Th ey knew the website needed to be fresh, contemporary, useful and interactive.

With these goals and questions in mind, the website development began.

Introducing...

www.EnvironmentalEvaluators.net

How would it best serve multiple

to be fresh, contemporary, useful

Developing the EEN Website: What can we make it do for you?

Table of Contents

Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

Visual Appeal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

Interactivity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

Search Engine Optimization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .12

IntroductionCommunication is the key to many aspects of life, and that holds true in a personal, parental or even a business relationship. So why does the EEN need a website? Well, what better way can anyone communicate information and visuals in one place, instantly?

Websites allow people and organizations share their goals and information through many forms of interaction. From written articles, to interactive logic models, to data visualization and pictures, anyone can get a quick and clear idea of what that person or organization is all about.

The EEN knew it was time to join the online world. It has been an exciting time of expansion, and like all growing organizations, so were the demands on the EEN to meet their participants’ needs.

This presentation will give an overview of the goals sought out by the EEN to bring multiple, unique and complex environmental organizations together online and show how the core elements of website development were successfully implemented. First, EnvironmentalEvaluators.net displays many features found in today’s popular website design styles. Next, it uses simple graphic design principles to achieve visual appeal. Third, the website encourages interaction from its participants through blogs and social networks to share ideas and comments. Finally, search engine optimization, both on and off page, increases website traffic in order to continue to grow the EEN.

Developing the EEN Website: What can we make it do for you?1

Features

Animated sliders

Using this simple snippet of code, the website can simply and stylishly display extra content in an attention grabbing way. It can display images, video, audio and more text.

Multi-column portfolio displays

Th is feature combines posts and allows visitors to see their related pictures and videos in an organized and less cluttered fashion.

EnvironmentalEvaluators.net 2CHRISMETZNER .COM

Blog

Having a blog allows visitors to leave comments and share their ideas about the posts they read.

Image and video effects

Adding pictures and videos to your article or post adds visual appeal to your content. The EEN website can quickly add shadows and reflections below either of those.

Video support

This website can support a variety of video file formats, like FLV, MP4, MP3, HTML5, YouTube and Vimeo.

Custom sidebars

Different sections in the EEN website need different sidebars for extra information.

Blogs help people interact and freely contribute to someone else’s post.

No effects Added effects

YouTube

HTML5Vimeo

FLV Video

MP3


Tabs

Tabs allow the EEN to display large amounts of text on one web page.

Toggle and accordion boxes

Toggle and accordion boxes are similar to tabs because they help organize large amounts of text, but they off er unique visual ways of doing it.

Toggle boxes create information storage areas. Accordions add visual appeal to text.

Variety of list displays

In addition to using standard bullets for displaying lists, the EEN website can show arrows, ticks, squares and carrots. As an added bonus, they can be colored teal, orange, brown or blue.

Dropcaps

Dropcaps bring extra attention to the beginning of your content.


Lightbox

When a visitor clicks on an image on the website, this script will allow the picture to appear in a new pop-up window.

PrettyPhoto

PrettyPhoto is a jQuery lightbox clone. The EEN website uses both scripts to give the visitor a better experience. PrettyPhoto displays the EEN posts, pages, videos, iframes, etc in a neat and orderly grid format for quick visual reference.

Footer

The footer on the EEN website is currently displaying RSS feeds from other environmental organizations and the EEN Twitter feed. With a few simple changes in the backend, the website could display Recent Comments, Recent Posts, gallery images, a contact form, or more text.

Breadcrumbs

Breadcrumbs is a mini navigational aide that leaves a trail for the visitor, showing how they got to the page they are on.

When hovering over an image, the graphic performs this rollover.

When clicked, the image pops up in a new window, adding the ability to see more pics.


Contact form

Th e built-in ajax/php contact form, with javascript turned off fallback, guarantees the delivery of the message being sent.

Extra features

Th e EEN website has many more stylish options and features. As the website continues to be developed, there may be uses for some of these.

Block quotes

Fancy headers for dramatic attention Up to 4 columns of text can be implemented

Notifi cation boxes

Registration and login fi elds for private information.

At the bottom of all postings, there is a special author box. This allows readers to get info about the author and if they want, they can quickly connect to their website or read more postings by them.

At the end of every post there is a special grid structure displaying related postings and articles.


Visual Appeal

Smooth navigation

The EEN website uses smooth and stylish drop down bars and rollover colors to display sub page navigation. It has the capability to add deeper levels if needed. This gives the feeling that the website is well organized.

Simple fonts

The use of simple fonts makes the content easy to read. There is no special attention being given to the text, just simple black copy on a white background, plus blue colored links. Also, the headers are easily distinguished from the body copy with the use of varying font sizes and weights.


Website color scheme

Considering the EEN’s target audience, the website’s color scheme refl ects an organic, natural and soft palette related to environmental evaluation. Blues, greens, grays...it’s nature, yet business.

Page Speed

Created on the Wordpress platform, the EEN website uses PHP coding which helps a visitor’s browser load pages of the website much faster. Minimal imagery and clean coding allow new pages to be seen quicker, keeping the visitors attention and interest focused on the content.

Image effects

As mentioned earlier in the Features section, the EEN website displays its pictures and videos in an attractive way with the use of shadows and refl ections.


Interactivity

Social networking

The purpose of the EEN is to bring individuals and companies in the environmental evaluation field together. One of the many ways is the use of social networking. The EEN website makes this very simple for the visitor to connect with others.

At the top of every page on the EEN website is a group of social networking icons, linking directly to those websites, and ready for the visitor to join.

TwitterCatch the latest tweets for quick links to interesting topics and articles related to the Environmental Evaluators Network.http://www.linkedin.com/groups?mostPopular=&gid=1773788

LinkedInBuild your professional network by subscribing to the EEN Group, comment on or start a new discussion.http://twitter.com/#!/EnviroEvalNet

FlickrBrowse through pictures posted by EEN participants, upload and share your own.http://www.flickr.com/photos/environmentalevaluators/

YouTubeWatch the latest videos posted by the EEN participants.http://www.youtube.com/enviroevalnet

Facebook Fan PageJoin the EEN Facebook Fan Page to read recent discussions and get more information about upcoming forums and events.http://www.facebook.com/pages/Environmental-Evaluators-Network/191273460892647


Search bar

In the header, above the main navigation lies the search bar. Th e visitor always has quick access to search the entire website for any keyword or phrase.

“Share This”

Th is plugin allows the visitor to take the entire article that they just read and share it on their social networking websites. With one click, the EEN article is now broadcasted to a new network of friends.

Twitter feed

Th e footer on the EEN website allows multiple types of feeds, including the EnviroEvalNet tweets. As soon as a tweet is posted, it instantly appears on the EEN website. Th is helps keep content fresh and exciting, constantly off ering new links and valuable information.

RSS feeds

Th e EEN website off ers access to related websites and posts their content instantly in the footer for quick access to EEN visitors.


Google Sitemap Generator

In the near future, the EEN website will be indexed with Google and an XML sitemap will get generated. This will allow all the major search engines crawl the website faster. As an extra tool for quicker navigation, a new sitemap page will be created for visitors who like to see links to every page in one location.

Other plugins to consider in the future

• KeyCAPTCHA • iCopyright(R) Article Tools • Facebook Like Box• SurveyMe • Facebook Recommendations • Geolocator• Live Chat • Picasa Album Uploader • WP Google Suggest

Language Translation

The EEN website has the ability to be viewed by a visitor in a non-English speaking country and be translated to the local language. It boasts the support of almost 100 languages, but if a new one is needed, a simple translation plugin for the new language can be quickly added.

Report Site Problems

Below the footer, in the bottom right corner of every page, there is a link to directly contact the website administrator, Chris Metzner. Use this link to report any questions, comments or concerns about the website.

Google Earth Tours

The EEN website can embed unique apps like Google Earth inside any page or post. Load your own data to display particular information or allow the visitor to zoom down on their house. This plugin offers easy navigation and exploration of geographic data on a 3D globe inside any web browser.

http://www.environmentalevaluators.net/resources/architecture-of-environmental-evaluation/


Search Engine Optimization

WordPress website

Th e EEN website is built on the WordPress platform, a powerful content management system. It is an open source blog tool powered by PHP and MySQL, and it off ers a search engine friendly and clean permalink structure. Th e EEN website is easy to edit, update, delete and add content as needed. As an added bonus, everyone visiting the EEN website can be an author. WordPress off ers administrative controls that allow visitors to post their own content and links.

WordPress plugins

Plugins off er the EEN website the ability to quickly add new features and enhance the visitor’s experience. Twitter feeds, RSS feeds, contact forms in a footer, Google Earth, Share Th is, etc., are all examples of plugins. Can you think of any feature that would benefi t your organization if it was displayed on the EEN website? If so, chances are there’s a plugin for that!


Keywords

Keywords are words or phrases that tell the search engines what your website is all about. When a person goes to Google.com, for example, and does a search for your keyword, your website pops up in the search results. Getting to the top of those listings takes a lot of work by the website developer, but if done correctly, your website is always rewarded.

Here are a list of keywords that the EEN website uses:environmental evaluators network, evaluation, environmental evaluation, conservation, logic models, data visualization

On-page optimizing

One or a variety of the EEN website’s chosen keywords appear on almost every page or post. They are strategically used to make sure the search engines give the website a high quality score, so that in turn, the EEN is rewarded with higher search results.

Some examples of where keywords are placed are: the first image at the top has them in the ALT tag, sometimes in the image’s filename, every header (H1 tag), once in the first 30 words of first paragraph, 3 or 4 times in the body of the article or post and at least one of those linking back to the mainpage, once in the last paragraph, and a few related keywords used in the H2 tags.

Other forms of optimization integrated in the EEN website is the use of internal links. This is basically where keywords are hyperlinked to different pages or posts within the EEN website.

Finally, a simple plugin called the All-In-One-SEO package helps ensure all posts and pages have the correct meta data and description text in the Head tags.

Inbound links

Aside from visitors finding the EEN website via Google’s search results, there are other ways the EEN is considering to develop inbound links (backlinks):

• Newsgroups • Blog commenting • Forum participation • Posting videos • Pay-per-click • Article writing • Paid or trading banner/link advertising


Google Analytics

Using a short snippet of code, Google’s incredible website traffi c monitoring solution, Google Analytics, gives the EEN website developer access to rich insights of the website’s performance.

With this information, the EEN can determine what pages its visitors frequent the most, how long they stay on the website, how they found the website, etc. From there, the possibilities are endless.

Should the EEN open the door for advertising by it’s participants? If so, target-specifi c ads can be created on pages that match your organization’s service or product.

Knowing which pages are mostly visited, the EEN can better serve its participants by posting more related content. New tweets, pictures and videos can be created, posted on other websites, and most importantly, link back to the EEN website to read more about that popular topic.


Traffic generated from social networking

Social networking is critical for a company. Here’s a fun fact. If the number of people who have Facebook accounts was thought of as a population, Facebook would be the 3rd largest country in the world!

That’s a lot of people chatting online and sharing stories with their friends. When post a comment about something bad that happened to you by Company XYZ, pretty much everyone in your network is going to take your side and not use that company from now on. The future of advertising is word of mouth.

The EEN hopes to provide a website that everyone going online will be excited about visiting. If one person finds something interesting on the website and shares it with his network, via Facebook, Twitter, LinkedIn, etc., chances are other people are going to see that posting. His/her friend could be interested and check it out for themselves and the cycle begins.

Off-page marketing of the EEN

Outside of all the free and paid ways to generate traffic to the EEN website, there are still the old-fashioned methods.

• Postcards • Direct Mail • Newspaper Ads• Flyers • Brochures • Car Wraps • Billboards • Posters • Radio/Television Ads• Forums • Booklets • Much More!

Even though Internet usage is growing leaps and bounds, these methods of company advertising is still the standard. People are familiar with holding a brochure, reading the newspaper, watching television, etc.

All of these help increase the EEN exposure. It’s about branding. Whenever someone sees the EEN logo, they will see the EEN website address beside it!

How is your company advertising its website, gaining new visitors and keeping your existing ones coming back?

http://youtu.be/lFZ0z5Fm-Ng • by Socialnomics09


Not around a computer?

Use your cell phone’s barcode scanner app and scan this QR code. It will take you directly to the webpage which has a list of the features covered during this presentation and an area for you to post your comments.

www.EnvironmentalEvaluators.net/Website-Features

As you explore the amazing features of the EEN website, think about your organization’s message and what would be the most effective way to show it. Can you think of other contemporary styles of information presentation? If so, please share with us as we continue to develop and improve the EEN website for you!

Your feedback is welcome. Share your thoughts with us!

The Evaluators’ Café: A Networking and Capacity Building Session #6June 24, 2011 • The George Washington University

developing the een website€¦ · the een knew it was time to join the online world. it has been...

Documents