inTandem Mobile MenuinTandem Home




Friday, October 18, 2013

What is Responsive Web Design (RWD)?

Categories: Web Design, RWD

Responsive web design, mobile apps, mobile websites ... for a lay person it can get quite intimidating to find your way around the maze that is the new mobile Internet world! If your head is spinning with all the new terminology but you want to make sure that you're not just betting on the newest fad, read this article and be prepared for the new expectations of your web users.

early pinch and zoomIf you are a smart phone user you can probably remember the day when you first got to play with your new toy. Suddenly, you could easily access the Internet on your device without having to restrict yourself to viewing minimalist content with pixelated images that bore no resemblance to the web content you were used to getting on your "normal" computer. "Pinch & Zoom" was the coolest thing and you were delighted that you now had access to the full, original web pages on the go.

But alas, how fickle are we? Where once we thought it super high-tech to be able to pinch & zoom around any website, we were soon complaining about too small screen sizes which made it actually a bit tedious to move around large webpages, having to scroll not only up and down but also left and right to get to our content. One solution of course are larger screens. But at the end of the day there is no getting around the pinch & zoom for proper content legibility.

Mobile Websites

As an initial solution, many of the larger website owners started to develop separate "mobile" versions of their websites, perfectly laid out to fit in your average smartphone screen. The browser would detect whether it is being used on a mobile device or a standard computer and would serve the relevant version of the website accordingly. That is fine of course as long as we don't have a whole load of different screen sizes to code for. And with the introduction of the iPad, iPad Mini, Samsung Galaxy Note and various other tablets and phone/tablet hybrids this solution became no longer feasible.

Responsive Web Design

Introduce Responsive Web Design. The RWD approach is built on the premise that a website's code should adjust automatically to the device, screen resolution and orientation with which it is being viewed. No need for multiple versions of code for the same website. Just one set of code that responds to its environment, offering the user an optimised visual experience and kissing good-bye to the once oh-so-funky pinch & zoom! Built around a grid-based layout, blocks of content resize and move around the screen depending to the available space. Particularly on the smaller smartphone screens, this usually means scrolling is only a comfortable up or down and font sizes are immediately readable.

Of course, responsive web design is not the ultimate solution to all mobile computing needs and as always it is a matter of making a decision on a case-by-case basis. Extremely large websites with long pages of content might benefit from a reduced content version for mobile devices, simply to help readers "filter" through to content that might be most important to them. However, even in that case, this reduced content version can be coded responsively so that it then adjusts its layout to the various mobile devices.

Responsive Design for The Yeats Society

Mobile Apps

An finally, there are mobile apps. I have regularly been asked by clients to produce a website as well as mobile app for a new project where in their minds the mobile app is the key to mobile access of their content. In most cases, a simple responsive version of their site code is the actual answer and can be built into any new website development project.

example of an airline's mobile app screens

But I am not saying that this is always the best solution. If you are developing a new brochure website or product/services catalogue, the RWD option is generally right. However, if there is a particular task that your users complete regularly on your website, such as logging in to member content (e.g. subscription services) or carrying out detailed searches (e.g. airport arrivals & departure times, event or property listings) then a mobile app that focuses on these specific tasks might be the preferred solution, often offering faster content delivery and optimised layouts and functionality.

Finally, mobile apps are also very useful if you would like to make use of smart phone functionality such as scanning, GPS, the camera etc. and build these into the user experience, something that you cannot achieve with a normal website, whether responsive or not.

Want to learn more?

If you fancy learning more about RWD, here is a great article from Smashing Magazine that gets a little more into the technicalities without getting over complicated.

And here is an amazing info graphic that explains the questions you should ask yourself to determine whether your online project is better suited to responsive web design or a mobile app. It's well worth a look!

Or simply contact us to talk through your requirements and let us help you find the best solution to your online needs.

Share this article:

Comments (0)

Add a Comment

Allowed tags: <b><i><br>Add a new comment:

Web Analytics