Responsive Design Techniques

With the proliferation of smartphones and tablets, the number of devices and platforms available for web browsing has increased at an exponential rate. Mobile browsing is now overtaking traditional desktop based browsing and is expected to surpass desktop based browsing by 2014. Companies and businesses too have noticed these changes and are now demanding more flexible websites that display perfectly on all these different screens without requiring a different website version tailored for each.

Responsive Design techniques fulfill this need perfectly. A relatively new concept, Responsive Web Design is a development technique that allows developers to create dynamic websites that can adapt themselves to the screen size they are being viewed on, while maintaining their design aesthetic and usability.

What is Responsive Web Design?

The concept of ‘Responsive Web Design’ was introduced by by Ethan Marcotte, a web designer and developer who suggested that web content should be developed in such a way that it adapts itself to different devices instead of being device specific. Responsive Design techniques maintain that website design and development should be based on the users’ browsing environment – i.e. the screen size of their device, their device platform and screen orientation. As such, a website developed using Responsive Design techniques shows the same page to every viewer, with the site’s design and layout altering automatically on the screen size of the device being used by the viewer, be it a desktop PC, a tablet or a smartphone.

Responsive Design Techniques

Responsive Web Design consists of three different approaches:

Adaptive Design: This is a website design that changes to fit a predetermined set of screen and device sizes. This approach uses a predefined set of layout sizes based on device screen size along with CSS and JavaScript coding, to adapt the website to the detected device. The adaptive approach consists of the following 3 layers:

• Content layer = rich semantic HTML markup
• Presentation layer = CSS and styling
• Client-side scripting layer = JavaScript or jQuery behaviors

Responsive Design: This technique is a subset of Adaptive Design and focuses on the layout of the website such as fluid grids, flexible images and media queries to adapt the website to the screen it is being viewed on.

Adaptive Layout: This Responsive Design technique is a different form of Responsive Design, in which a dynamic website layout is developed by combining multiple fixed widths in order to cater to multiple screen sizes.

Regardless of the Responsive Design technique/techniques used, the key technical features that drive Responsive Web Design include: media queries and media query listeners (via which developers can target specific devices and examine the physical characteristics of the device which will render the work), a fluid grid-based layout which makes use of relative sizing to adapt the site’s layout to the screen in question, and flexible images and media (enabled via dynamic resizing or CSS) which can alter their size and position according to the layout adopted for the screen in question.

Responsive Design Techniques vs. Regular Web Design

When you visit a regular website on your smartphone or tablet , you will notice that it shows up really small, so much so that the content is hard to make out and text impossible to read. This is because a regular website does not support the smaller screen size and resolution of your mobile device. Thus what you see is the regular desktop sized website shrunk down to fit the smaller screen. So although the website is accessible, it’s not really usable as you need to really zoom in to be able to read any of the content or access any links, thus making navigation cumbersome and providing a poor user experience overall.

This approach is defined as the “Do Nothing” approach since in this case the developer of the site has not really done anything to make their regular website accessible on mobile devices but hopes that the audience will use it anyway.

On the other hand, if the same site is designed using one of the above Responsive Design techniques, it will have a dynamic and flexible layout that will automatically reflow according to the different screen sizes it is viewed on. Thus no matter what device is used to view the site, its layout will have an optimized navigation structure and content which will be proportional to the screen size being viewed on, making the site much more easier to use.

Why Should You Use Responsive Design Techniques

The single biggest benefit provided by using Response Design techniques is that they make your website flexible enough to adapt to different screen sizes on the fly. This greatly enhances its usability since the content of the website is easily viewable and navigable on any screen, and the media and fonts are automatically resized according to the screen size being viewed on, making the user experience much more pleasant. The other key benefit offered by Responsive Design techniques is the fact that you only need to develop the website’s code once and it is instantly deployable for all platforms (desktops, notebooks, tablets and smartphones). It is also easier to maintain, since any update required also needs to be deployed just once and will work perfectly on all platforms and screen sizes. The time and cost savings provided by these features are HUGE and are the driving force behind the technique’s popularity.

Using Responsive Design techniques also aids in Search Engine Optimization and is in fact the “recommended mobile configuration” suggested by Google for websites. Google even goes so far as to list Responsive Web Design as an “industry best practice” for SEO. This is because Responsive Web Design enables your website to have just one URL and the same HTML for all devices and platforms, which makes it easier and more efficient for Google to crawl, index, and organize the site’s content. Furthermore, the content that lives on this one website and one URL is much easier for users to share, interact with and link to, than content that would otherwise live on separate mobile/desktop versions, which is another reason why Google prefers Responsive Web Design for SEO.

Folio3’s Experience with Responsive Websites and Responsive Design Techniques

Over the years we’ve worked on several Responsive Design websites for our clients. Below is an example from our Responsive Web Design portfolio.

BiblioNasium

Biblionasium is a website which encourages young children to read books. The site provides parents and kids with the ability to organize book recommendations from teachers and friends, keep track of their favorite books and connects children to each other. Part kids’ social network, part parent’s guide, part teacher’s tool, BiblioNasium blends technology with personal connection to create a supportive and engaging space for reading success.

We helped Biblionasium develop their website using Responsive Web Design, so that it could be viewed on both mobile devices (tablets, smartphones) as well as desktop/laptop browsers. For this purpose, we used the FlexSlider (a responsive image slider) plug-in in order to make all of the images on the website responsive, and Modernizr.js (a JavaScript library that detects HTML5 & CSS3 features in the browser and allows you to write conditional JavaScript and CSS to handle each situation, regardless of whether the browser supports a feature or not), for the backward compatibility support. So the site would be viewable on both current and older versions of the most common browsers such Internet Explorer, Firefox, Chrome & Safari.

If you’d like to learn more about Responsive Design techniques and want to get started right away, then check out this excellent tutorial on Responsive Design techniques by Treehouse.com.

Final Words

In our experience Responsive Web Design is the way forward when developing in the era of the mobile web, as it makes life easier for both developers and users. From the users’ perspective, a website designed using Responsive Design techniques provides a superior user experience, as it can be viewed on any device without sacrificing its design aesthetic, navigability, legibility of content and ease of use, thus boosting user satisfaction and loyalty and in the case of e-commerce websites – sales. From the developer’s perspective, designing a website using Responsive Design techniques saves a great deal of time, effort and cost as you only have to write the code once and it is instantly usable on all devices and platforms. Subsequent website updates and maintenance activities can also be executed in the same manner. These time and cost savings also keep the client happy as they allow the client to bring their website to market far more quickly and reach a much bigger audience (mobile & desktop users) without incurring additional development costs. Given these advantages, we believe that responsive web design is the future of the mobile web and the recommended web design technique for all website designers and developers.

If you would like to have your website developed in Responsive Web Design, or would like to know more about our web design and development services, please contact us.

Blog Post