Case Study 2:

A Responsive Site Without a Responsive Design

Posted on February 20th, 2017

Our website became "responsive" in 2014 but during implementation there was no design considerations. I know this may sound odd, but outside of the menu all elements were treated like a static site from 2008. That means:

  • unresponsive images
  • no clear visual hierarchy
  • text sizes run amuck
  • jpeg buttons shrinking and misaligning
  • images being cropped
  • a static footer
  • The list goes on...

All these problems rendered our website unusable on devices and led to high mobile bounce rates. You're probably wondering, with all these issues where do you start?

Misaligned Buttons Look at the above buttons. Their sizes are off and bases don't align, leading to an unbalanced page on mobile.

Start by creating a hierarchy of importance. Our main usability issues were the text and images shrinking on mobile. As screens become smaller, it is important to make text larger or at least the same size as desktop, otherwise users will have trouble reading your content. Also, if you have a jpeg used as a call to action button and it shrinks, the message becomes unreadable and there goes a possible sale. Another main issue was the visual hierarchy. Our old site had a cornucopia of colors. One of which looked like the world's ugliest color. We had to start over with a new comforting pallet where we could use contrast to bring out clear call to actions to guide our users where they want to be.

Modules Not Resizing The modules did not resize based on screensize. As you can see on the right side of the image.

Our solution to fix all the various problems was to buy a very robust bootstrap template and then pull the design patterns that worked for us. We modified our buttons to become CSS based, changed our images to contain little to no text, altered content to fit within the new modules, and implemented icons based off font awesome. This led to a friendlier experience on mobile with a clear visual hierarchy and a symmetrical form.

Modules Resize Our new design is set to always resize modules to the current screen size

Points to Consider

The key takeaways from the project are:

  • Whenever you implement anything, I repeat ANYTHING, always take into consideration the design
  • Look to see what works and what doesn't on your site. If you don't know what to look for, hire a UX consultant or conduct some usability testing
  • Assess what's wrong and set up a hierarchy of importance. Sometimes your budget won't cover everything so it's important to pull out the necessary items