Does Your Site Look Good on Small Screens?

With roughly half of internet visitors now using tablets or phones, it is time to take a hard look at your website on these devices: Is it readable and easy to use still on these small screens? If not, it might be time for some maintenance.

Welcome to the world of “responsive design.” This approach is about a year old now, and it involves swapping out stylesheets depending on the size of the screen detected. The different stylesheets (usually three) allow your website to gracefully adapt to whatever screen size is being used. Large images are shrunk down. Flyout menus dissappear. Navigation simplifies. Logos swap out for simpler ones.

ADVANTAGES OF RESPONSIVE DESIGN

  • Compared to two-site solutions, Responsive Design uses one codebase, so there is only one website to update.
  • If done well, all visitors to the website (whatever screen size)  will be able to read and use the website.

DISADVANTAGES OF RESPONSIVE DESIGN

  • Slower internet connections on mobile devices will make the website load slowly, especially if there are large images.
  • Added expense of creating (3 or more) custom stylesheets.
  • Custom stylesheets will have to be re-done every time the visual design or page layout of the website changes.
  • Internet Explorer 7 & 8 do not support this technology. Roughly 17% of  visits stil use these two browsers. It is unknown how the responsive website will behave in these unsupported old browsers.
  • Web forms may still not work well on small screens. Special redesign of web forms may be called for.
  • 3rd party websites (For example, if you use a PayPal cart) will not be improved by making the your website responsive.
  • Does not alter or improve the viewing of PDFs on small screens.
  • The useful life of this technical solution is unknown in this fast-moving field.

MORE INFORMATION

Article on Responsive Design

Webinar on Responsive Design (Must fill out form to view)

Whitewater Excitement (Responsive website example)

Desktop Mockup of smaller screen sizes (does not show all websites accurately)