Today’s world is filled with a multitude of devices with a great range of viewport sizes. The internet of today should be built in a manner that takes such viewport variations into account and provides an optimum user experience no matter what device it is viewed on. It is with that goal in mind, the goal of a unified web, that we began to implement responsive design in the websites built here at North Studio.
Responsive design is based on the idea of using multiple stylesheets and running media queries to determine which stylesheets will be used with any given viewport size. This eliminates the need for dedicated “mobile” websites, and allows for a unified display of content across all devices and platforms.
To achieve this goal we use a Drupal theme called Omega. Omega breaks the website up into zones, then breaks those zones up further into customisable regions. These regions are rendered using percentage measurements in order to allow them to dynamically resize based on the viewport size. We build a subtheme based on Omega, and place the webpage’s content in the desired regions of the site.
The actual CSS for the website is put into 5 cascading stylesheets:
- Global – applies to all versions of the website, including mobile
- Default – applies to all full-size (desktop) versions of the site
- Narrow – applies to all viewports with a minimum width of 740px
- Normal – applies to all viewports with a minimum width of 980px
- Wide – applies to all viewports with a minimum width of 1220px
Due to inheritance brought on by media queries, all styles declared in Global apply to all other viewport sizes, while styles declared in Narrow also apply to Normal and Wide.
When building websites using responsive design, it is of utmost importance to consider the requirements and capabilities of the various devices that will be used to display the site, and build it accordingly. This is often referred to as “mobile first” design, a practice that, while fairly new to the web, has caught on quickly due to adoption by major web presences such as Google. “Mobile first” design forgoes the standard method of building a full-size website first and using a method of graceful degradation to attempt to cut incompatible features out of devices that don’t support them, and instead focuses on delivering the best possible mobile experience first, and using progressive enhancement to add features and change the layout on larger, more powerful devices.
Responsive design allows for an internet without boundaries and restrictions, an internet without horizontal scrolling on mobile devices. It is the single best way to ensure that a website can be viewed as intended by the greatest number of visitors.
See the infographic.