Developing the EEN Website: - Environmental Evaluators Network

Developing the EEN Website: - Environmental Evaluators Network

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


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.

(904) 885-0489

Enjoy the forum!


Background EEN Information

Since 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


Th ey knew the website needed

to be be fresh, contemporary, useful useful

and interactive.

With these goals and

questions in mind, the website

development began.


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


Communication 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, 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?


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.



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.

No effects Added effects

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






Blogs help people interact and freely

contribute to someone else’s post.


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

FLV Video


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 bring extra attention to the beginning of your content.



When a visitor clicks on an image

on the website, this script will allow

the picture to appear in a new popup



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.


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 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.

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

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.

Notifi cation boxes

Block quotes

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.

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


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.


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

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,’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.



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.



Catch the latest tweets for quick links to interesting topics and

articles related to the Environmental Evaluators Network.

Facebook Fan Page

Join the EEN Facebook Fan Page to read recent discussions and get

more information about upcoming forums and events.



Build your professional network by subscribing to the EEN Group,

comment on or start a new discussion.!/EnviroEvalNet


Browse through pictures posted by EEN participants, upload and

share your own.


Watch the latest videos posted by the EEN participants.

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

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


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 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.

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 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


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

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 are words or phrases that tell the search engines what your website is

all about. When a person goes to, 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


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

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, targetspecifi

c ads can be created on pages that match your organization’s service or


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


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! • by Socialnomics09

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?


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

Your feedback is welcome.

Share your thoughts with us!

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!

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.

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

June 24, 2011 • The George Washington University

More magazines by this user
Similar magazines