A peek at the newly upgraded Washington CAN! website

In 2014, four years after initially building it, I gave Washington Community Action Network’s (Washington CAN!) website a series of design and back-end upgrades.

Progressively enhanced and responsive

My emphasis was on delivering the site’s content. I kept style elements and interactions separated. Not only did this make the site easier to maintain and upgrade, but it helped make sure that all visitors were able to access the information they needed whether they were using a desktop, cellphone, tablet, or a different device altogether.

I kept wide screens in mind for the design, but the website also responded to a multitude of screen sizes. Below are some examples of what happened as screen sizes got smaller.

Navigation

Navigation is one of the most important aspects to any website. It reflects how information is organized and displayed for visitors to find what they are looking for.

I like to help users get their bearings by providing a visual cue in the menu to indicate the page they are currently visiting.

Pages on Washington CAN’s website performed a check to see if they have sub-pages. If so, they were automatically listed in a red box titled “In this Section.”

When visitors hovered over most links, they received strong visual feedback.

Navigation between blog posts was made easier with over-sized button-style links.

hover-text

Slider

The home page contained a slider with featured blog posts. Adding a blog post to the slider was as simple as checking it off as being in the “Featured” category. The thumbnail images were automatically centered and adjusted to fit.

I made the slider using the Cycle2 plugin for jquery.

Apply for a job online

Because Washington CAN! always has job openings for certain positions, I created a page where job seekers could apply online. After an applicant submitted their information, an email with this information was automatically sent to the appropriate staff member.

employment-app

I used the versatile Secure Form Mailer Plugin For WordPress to create the online application.