How your website looks on different devices has become a high priority topic of any organization especially now that Google has made the “mobile-friendliness” of a site part of a sites ranking and has used traditional desktop size elements such as Adobe Flash content or horizontal scrolling actually hurt ranking.
Five years ago, organizations would be looking at mobile versions of sites to solve this problem, but more recently Responsive Design has answered many of these issues by having flexible layouts that can resize to the width of viewing screens. The best part of using Responsive Design is that it will accommodate many different devices and new devices yet to be produced– not just the standard three of desktop, tablet and phone. It can also account for very large screens like presentation screens and large monitors.
When we at Balance Interactive are looking to make a site responsive, especially if we did not build the original site or the CMS used is new to us, our general approach has us addressing three key parts: a flexible grid, image optimizing and media queries.
A flexible grid allows a site builder to have a lot of control over the layout. It can expand, stack, resize with different screens widths. We have used frameworks such as Bootstrap to help in this effort since they have a responsive grid already set. This does increase some efficiencies in our process, but the tradeoff is high in the additional css markup and the limitation of working with set elements: column count, width of gutters, etc. We just didn’t need all of the extra features that come with Bootstrap so we looked for alternatives and found Susy. Using Susy answered all of our needs, and we now use it to manage our grids since we build any design we need in a lightweight and efficient manner. In addition, Susy uses SASS, not LESS so it was an easy fit to our already SASS based theming.
Once we have the grid layout set, we can look at other elements such as the menu or items that should be removed from smaller screens for better usability.
Stay Tuned: In the next installment of this series, we will discuss using Gulp for Image Optimization.