Blog  Subscribe to our RSS feed RSS

Responsive Web Design: Flexible Sites for a Mobile World

We’ve mentioned responsive web design in a few of our blog entries in the past, and with 2013 being the year of responsive web design, we’d like to take a closer look into the concept and what’s behind it.

Why is it so important?

In the past, we only needed to be concerned with one layout and design – for desktop displays. Sites just needed to look good for monitors with large resolutions and be easily navigable by mouse.

With the progression and proliferation of smartphone technology, a website design that can accommodate all screen sizes and resolutions (in addition to being more touch-friendly) is crucial. The term “mobile” now also encompasses all types of devices with varying screen sizes, not just mobile phones. Netbooks, tablets, mini-tablets and even “phablets” (phone/tablets) all add to this gradient.


RWD aims to deliver usable layouts on desktops, laptops, tablets and mobile screensizes and everything in between.

Brand identity and general user experience are also valuable things that a company wants to cultivate. If a user visits a site on a desktop and then on a mobile, the experiences on both should be consistent. A site that looks beautiful on a desktop, yet doesn’t deliver the same aesthetic or functionality on a mobile device, fails to connect with that growing market.

Up until recently, developers were left with a few choices to ensure users had good mobile experiences:

  • Create a separate template for mobile users (typically m.domain.com or .mobi)
  • Create an Android/iPhone app


IKEA has 3 separate ways to present content to their users – A desktop website, a mobile version of the site, and an actual downloadable app

Each of these solutions requires developers to code entirely separate eco-systems, and managing them all is no easy task. A change in one template requires the same change to be made on the other template. App development makes things even more complicated, with different platforms, versions and updates to consider.

Responsive Web Design works to provide one, unified template to handle layout and design for all devices and screen-sizes.

So how does it work?

Simply put, the CSS3 attribute  media queries  allows developers to apply styles based on certain resolutions.


Time Magazine’s website design accommodates all screen sizes and dimensions.

If a  max-device-width  of 480px is reached, for example (that is, if a device only has a screen size of 480px), certain elements, modules, and blocks of contents and be shifted around, adjusted in size or even hidden to accommodate the new screen size.

All of this is done solely through CSS, so there is no extra library or code necessary.

Examples

Media queries shows some very good examples of how responsive design can appear:

We also designed and developed a responsive website ourselves!

Keeping up with your visitors

If you want to make sure your site’s visitors are able to get the full web experience you’re offering them, no matter where they are or how they’re accessing your site, it might be time to look into responsive design. Get in touch and find out how GT can help.