Responsive design for your website

09/24/2012 - 17:57

drupal
planet drupal
design
theming
responsive

Alberto

Have you recently checked out your website on a cellphone, or a tablet, or another mobile device? You may have found yourself scrolling and zooming in and out in order to be able to read its content. All this headache can be avoided by adding a responsive design to your site, but what exactly is a responsive design?

What exactly is a responsive design?

Wikipedia defines responsive design as

...an approach to web design in which a site is crafted to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).

A nice technical definition, but what exactly does this mean? Well, imagine that we have the following set of devices: a nice big monitor with big resolution, a tablet, and a cellphone.

The ability to present the content in an elegant manner within the available screen space is what makes your design responsive. To do this you may have to resize the page layout, re-organize the content, and/or remove some content on your website. The image below shows an example of a generic website layout that looks different depending on the device or screen size.

Challenges

Browser support

Responsive design is achieved by using CSS3 media queries, a technique that is not supported for all the browsers. However, this is not something to worry about as all the modern browsers work perfectly fine with it. Only Internet Explorers 8 and below fall short and display the default layout of your site.

Content resize

With resizing your layout comes the need to resize your content, and images and videos need special treatment. For the images there are 2 possible solutions:

• Solution 1: Always display the image size that looks best in the widest layout and then resize it for the other layouts by CSS. If your image is contained in the grid you can easily achieve this with some code similar to this:

  .image-container img { width: 100%; }

• Solution 2: Display the correct image size on each layout. This can be done with the help of Client-side adaptive image module.

For videos the only solution that I know is the FitVids library that can be easily integrated into Drupal with the FitVids module.

Layout adaptability

Here is where the Omega theme comes in very handy. Omega use the 960 CSS framework to control the layout of your site and adjusts the grid size to 3 different layouts:

• Narrow: For screen with a resolution between 740px to 800px wide.
• Normal: For screen with a resolution between 980px to 1024px wide.
• Wide: For screen with a min-width resolution of 1220px.

So what happens with the devices with a screen that is narrower than 740px? On these scenarios the grid is not used anymore and most likely your content will display in a single column.

Educating clients

It is important that our clients understand the value of a responsive design and that building this needs to be incorporated into the website design budget. In the past few years we considered building with a responsive layout to be "future-proofing" websites; today we consider this baseline functionality. The vast majority of our clients' websites will be viewed on many different mobile devices; that being said, there are a handful of our clients' projects that do not require a responsive design because the web application is meant for larger screens only. 

In order to have an adaptive design we put mobile first, this means that the first design and content layout to be created is the one that is going to be seen on the narrowest screen. From there you design the layout to fit the widest screen. At the end you will have a design with 4 different ways to display the content of your site.

Our Solution

As you might have guessed for us Drupal, Omega, Client-side adaptive image, and FitVids are the pillars of responsive website design. Obviously these are not the only tools that we use however so far these are the best combination that we have worked with. We are also experimenting with Bootstrap framework but don't have enough experience for a conclusion yet.

Another neat ingredient that we use for the content re-sizing and layout is Display Suite. By creating a template for our nodes and attaching it to the grid, we can control how to display the different fields. An image is worth a thousand words

Allow us to put all this information into a visual example by way of a case study of a non-responsive site and one that it is responsive.

City of Vancouver

The non-responsive design means that on the various screen sizes the layout is simply scaled. On the mobile version of this design your website visitor needs to zoom in and pan in order to read any content. The mobile experience is cumbersome and can be frustrating to your vistors. 

Open Media Now

In contrast, the responsive design layout adapts to the screen size of your visitor. This design always displays the content in a readable and easily navigatable format. Even on the smallest screen of a mobile device the experience is simple and intuitive. The user on an iPhone is presented with a readable font size and simply needs to scroll down to read all the content.

You can appreciate the differences between both sites on the cellphone better in a magnified version comparing the two websites. 

What the Future Holds

Mobile Internet is here to stay. According to Canadian statistics there are 8 millions mobile Internet subscriptions in Canada and it is expected that this number will reach 15 millions by 2015.

Proactively developing our websites to be mobile-ready means that our clients are prepared for the continually evolving Internet landscape, and we always like to hear from them "my daughter loaded the site on her iPhone and it looked fantastic!" This always warms our hearts and fuels our passion for what the future holds.