Responsive Design Case Study: Online Job Application

Back in the good old days of 2010 when our client Prosum had us first build their online job search tool, there was no such thing as a tablet, and smartphones were so slow that people did the majority of their online job hunting from a desktop computer instead. A lot has changed in only four years, and we have seen the percentage of tablet and smartphone visitors to their website increase dramatically over the last two years.

So in early 2014 we discussed…

  • Is it time to overhaul the site?
  • What alternatives do we have to make the site friendlier for mobile device users even if now is not the time for a complete site redesign?
  • Just how bad is the experience for our mobile users, anyway?

Here are common pitfalls of websites that don’t adjust to meet the needs of mobile users. We looked at each of these for our client:

  • Must pinch to zoom and scroll left/right. To accommodate the whole site width, the first view you see on mobile has tiny text. Zooming in helps, but then the site’s logo alone fills much of the mobile screen.
  • Once you zoom in, you miss out on half of the site. Whatever is to the left or right side is no longer visible once you’ve zoomed enough to make any part of the  page legible.
  • Nimble fingers to tap tiny links. Text links that are small or close together cause aggravation as the visitor tries to hit the intended link. Buttons aren’t any easier when they are excessively small.
  • The loading of images can slow using of the website dramatically.
  • Flash animations won’t work on Apple tablets or phones.
  • Forms may fill two columns and require all sorts of scrolling around to reach all fields.
  • Form fields don’t distinguish between number or letter characters, so even if the field is for a zip code or phone number, your device pulls up the default alphabet keyboard, not the number keyboard.

The good news?  ALL of these pitfalls could be addressed with some intelligent decisions and some programming decisions that do not require a business to start from scratch with their website.

5 Simple Things you can do to Retrofit a Website with Responsive Design

 

1. Make the width of the site liquid so that tables reduce in width but not font size

Prosum Responsive

 

2. As the device gets smaller, reorganize modules into fewer columns

Prosum Responsive

 

3. Make decisions about what information is highest priority on the page, and reorganize the areas of the page accordingly.

Prosum Responsive

 

4. Make form fields big and tappable, and trigger the contextual keyboard that makes most sense.

Prosum Responsive

 

5. Use a mobile menu design pattern

Prosum Responsive

The Results

Web analytics data shows that over a four month period every major metric is up 10-20% for mobile phone visitors when compared with the non-responsive version…an easy win if there ever was one.

Responsive analytics improvements

Conclusion

Desktop sites can be effectively retrofit to adapt to a variety of screen sizes without doing a full redesign while maintaining all functionality. Contact us if we can you with a responsive design retrofit.

Hannah talking on the phone