Responsive Web Design – Adaptive Layouts with Media Queries

Responsive Web design is an approach to design and devlopment aimed at creating designs that respond to the behaviour and environment of a user based on platform, screen size and orientation. This typically involves using a combination of flexible layouts, images and grid as well as a bit of clever use of CSS media queries to adapt the design depending on screen resolution.

Keeping up with the Mobile Revolution

Over the last few years the Internet has rapidly moved beyond the realm of PCs and laptops into a plethora of mobile devices with a wide range of screen sizes and capabilities. The huge popularity of all the new mobile devices, tablets and touch screen devices has forced a paradigm shift in web and UX design. This is both an exciting and challenging time to be a designer.

Mobile can extend the cababilities of your application and forces you to shift your focus on what’s really important

  • GPS (location aware),
  • Camera (augmented reality or image input),
  • touch-screens and multi-touch controls

Mobile Limitations

Compared to laptop or desktop computers mobile devices typically “suffer” from the following limitations.

  1. Smaller screen size
  2. Lower bandwidth
  3. Less powerful processing power

These limitations are however slowly but surely eroding as tablets and newer mobile devices are getting increasingly more powerful.

Responsive Web Design Techiques

  • Fluid Layouts: Responsive design relies on Fluid Layouts or Non-Fixed Layouts. Whilst these can be harder to work with if you consider the alternative of either completely separate layouts for different resolutions or having layouts that don’t work all on some resolutions it’s a relatively small price to pay.
  • Media Queries: Repsonsive design uses CSS Media Queries to load overriding CSS rules depending on resolution. This allows you to add additional styling to compensate for chokeholds at lower resolutions that the fluid designs aren’t fully capable of dealing with.
  • Scalable Images: Rather than using fixed sizes for images repsonsive design uses percentage widths for images and allows the browser to resize the images based on the fluid width of the container elements. Note: browser scaling of images does not change the file size of the image so you are stuck with the size of the full image.
  • Showing or Hiding Content: Sometimes it’s better to just get rid of some content for lower resolutions. Consider whether all that supplemental meta data or fancy icons are really vital for the users, if not it might be better just hide that content at lower resolutions.
  • Hiding and Revealing Portions of Images & Using Sliding Composite Images: Anothre popular technique in responsive design is to dynamically crop or hide parts of images depending on the size of the container. This is usually achieved by setting a width or min-width on the container containing the image and hiding the overflow so that parts of the image is cropped when the browser window is smaller. Another way of doing this is to divide images into different regions, one part with the core visual information and the rest with supplemental information, this ensures that only the supplemental information is hidden.

Why use Responsive Web Design?

The prospect of being able to create adaptive layouts that look awesome on pretty much any device is very attractive to designers. CSS Media Queries allows you to do cool things like change from a 3 column layout to a 2 column layout depending on screen resolution, or even to a single column layout for even lower resolutions. Scaling down images or even removing some content completely allows your designs to not only look good but remain functional on multiple devices with a relatively small amount of extra effort.

When it comes to development this can greatly speed things up compared to building multiple completely different designs aimed at different devices. You can (potentially) streamline your development for a faster and easier deployment and reduced time to market.

Additional Reading

Limitations of Responsive Web Design

Repsonsive Web Design is very good at addressing design considerations and adapting for different screen sizes, however it does not always address bandwidth and performance limitations of mobile devices.

Speed and Size

Speed and file size is paramount on mobile devices. This isn’t true in all cases but it’s still a key consideration when specifically targeting mobile devices. If you’re using an iPad over Wi-Fi you’re probably less concerned about shaving a few KBs off your download.

  • CSS media queries do not optimise or remove unnecessary HTML or JavaScript that can slow down mobile browsers
  • Letting the browser scale down large images does not reduce the bandwidth.
  • Performance issues with heavy JavaScript usage and animations

Risk of Ignoring the mobile context

Mobile specific websites have a purpose (usually anyway) typically involving a quick and efficient way of conveying a subset of information. If all you do is scale down your full website to fit a lower resolution you’re probably not meeting all of the expectations of your target audience.

Overcoming the limitations

Some if not most of these issues can be overcome with the correct approach though. One way is to design for mobile frist, keeping it lean and minimal, then scale it up for higher resoluitions. This allows you to ensure that your mobile experience ticks the right boxes.

Responsive design does not have to be the only tool in your toolbox when it comes to moile development. There are JavaScript libraries aimed specifically at mobile app development like jQTouch and Sencha Touch that help bridge the gap.

Additional Reading

Final Words

Responsive web design is still new and exciting and still finding it’s place. Responsive design is particular attractive for for tablets and newer mobile devices where bandwidth and speed is starting to equal or even surpass that of older laptops, especially for the substantianl amount of users that use tablets over Wi-Fi. Being able to adapt your layouts for landscape or portait on touch devices is a nice little feature. Whilst most websites, that are fairly well coded, will work well on tablets without the use of responsive techniques however it’s those small extra touches that makes a site a joy to use on a mobile or touch screen device.

Context is vital though, and every project is different. Consider the whether responsive design and media queries is suitable for the aim of the project, the target audience and intended use. There’s still a need for the dedicated mobile websites, they are fast and very low bandwidth and usually serve specific purposes and have clear benefits for that purpose. Personally I don’t think it’s something that’s mutually exclusive either, you could use responsive and fluid techniques to cater for the desktop and tablet market as well as most modern phones then offer a mobile specific site aimed at older devices with the option for users to engage with the “full” site you can get the best of both worlds.

Leave a Reply

Your email address will not be published. Required fields are marked *