Web Design Marquette, MI | Middle Ear Media

Save The Wild UP

December 13th, 2011

Save The Wild UP is a non profit orga­ni­za­tion that oper­ates in the Mar­quette area. Through pub­lic aware­ness and edu­ca­tion they strive to pro­tect the Upper Penin­sula of Michi­gan from unsus­tain­able devel­op­ment, degra­da­tion and dan­ger­ous con­t­a­m­i­na­tion. Their orig­i­nal web site was designed in 2007 and had been mod­i­fied numer­ous times since. It was in need of a major over­haul both in terms of user expe­ri­ence as well as con­tent man­age­ment. I redesigned their site to solve both of these issues.

Con­tent Management

When the site first began, it was made of sta­tic HTML pages. Over the years, mod­i­fi­ca­tions were made. Con­tent was added. Struc­tural changes took place. A blog was added. Sev­eral data­bases were being used for var­i­ous pur­poses. A lot more con­tent was added. The orig­i­nal site wasn’t flex­i­ble enough to scale up with the orga­ni­za­tion as it grew.

The dis­jointed struc­ture of the site made edit­ing it very time con­sum­ing. Adding con­tent was sim­i­larly time con­sum­ing and con­fus­ing. Blog posts could be made in the Con­tent Man­age­ment Sys­tem, but all other con­tent had to be added as HTML pages and uploaded via FTP. Also, spe­cial scripts had to be included so the home page would dis­play recent blog posts.

In order to make things sim­pler, I redesigned the site to func­tion entirely within a Con­tent Man­age­ment Sys­tem. Now every­thing is con­nected and can be con­trolled from the Admin­is­tra­tion panel. Con­tent is added there and con­tent is edited there. The site is now com­pletely scalable.

I also helped Save The Wild UP for­mu­late con­tent man­age­ment strate­gies. Because the site con­tains so much con­tent, it is imper­a­tive that the con­tent be orga­nized prop­erly. Tax­onomies includ­ing “Cat­e­gories” and “Tags” can now be used to their full potential.

Orga­ni­za­tion and Navigation

The new site has improved orga­ni­za­tion of con­tent and a log­i­cal lay­out. With roughly 20 pages and over 600 posts, proper re-organization of the main nav­i­ga­tion menu was key to the redesign. To reduce the visual clut­ter, many of the items have drop-down options. Now a user can find almost every­thing in one place. The same place on every page.

If a user doesn’t know what sec­tion the infor­ma­tion they are look­ing for is located, they can use one of the fea­tured search boxes to find it. There is a search box in the upper right-hand cor­ner of the site as well as in the side­bar of the homepage.

Also, blog posts can be viewed by the cat­e­gory, tag, or date pub­lished. This makes sift­ing through moun­tains of infor­ma­tion and find­ing spe­cific posts extremely easy.

The home­page (and sev­eral other pages) use spe­cial page-templates to dynam­i­cally com­bine ele­ments in a user-friendly way. Just below the nav­i­ga­tion menu is the Fea­tured Post sec­tion. This area links to the most recent fea­tured (sticky) post with a title, excerpt, and image if applic­a­ble. It also includes small links that bring up all other fea­tured posts in a sim­i­lar manner.

Below the Fea­tured Post sec­tion is the Recent Posts sec­tion. This shows the ten most recent posts, exclud­ing fea­tured posts. The most recent post is shown in its entirety. Below it, the titles of the nine next most recent posts are listed as well as the num­ber of com­ments for each.

To the side of the Recent Posts sec­tion is what is com­monly referred to as a side­bar. The side­bar on the home­page con­tains social net­work­ing icons, another search box, a list of cat­e­gories (each show­ing the num­ber of posts within), and a tag cloud. The tag cloud was restyled as a list to be more read­able. Also shown in the side­bar when applic­a­ble is a list of upcom­ing events based on the event calendar.

The news page (as well as all the cat­e­gory, tag, and archive pages) fol­lows a stan­dard blog lay­out. The side­bar on these blog-related pages con­tain social net­work­ing icons, cat­e­gories, five most recent posts, five most recent com­ments, monthly archives, other links of inter­est, and the tag list. How­ever, when view­ing a blog post on its own page, the post is cen­tered with­out a side­bar to enhance readability.

Near the bot­tom of each page is an area com­monly called the footer. The footer con­tains sev­eral lists of var­i­ous links to help retain the read­ers atten­tion after reach­ing the end of an arti­cle or the bot­tom of a page.

Respon­sive Lay­out Design

Last but cer­tainly not least is the respon­sive lay­out design. What’s that, you say? Respon­sive lay­out design means that cer­tain page ele­ments are mod­i­fied to behave a cer­tain way when viewed at a cer­tain screen size. For instance, the width of the site gets smaller as the screen size is reduced. When the screen size gets small enough, there isn’t enough hor­i­zon­tal room for the side­bar so it moves down below instead of forc­ing a hor­i­zon­tal scroll. Many other ele­ments are shrunk, altered, or moved at var­i­ous screen sizes. This helps cre­ate a much bet­ter user expe­ri­ence for all poten­tial users, espe­cially for those in the rapidly expand­ing mar­ket of mobile devices.

TIP: If you don’t have a smart phone or mobile device capa­ble of brows­ing the web, you can see the effects of the respon­sive lay­out design sim­ply by resiz­ing your browser.

Check out savethewildup.org to see the web site for yourself.

Tags: Content Management System, Marquette, Michigan, Responsive Layout Design, Save The Wild UP, User Experience, UX, Web Design

This entry was posted in the Web Design category.