Responsive Web Design


Website designs on iMac Screens with deep blue background Mobile Web Site of Ben Graham- with Responsive Web Design - mobile interface

 

Responsive web design is a design approach in which websites are built with flexible & fluid grids and css media queries so they are viewable and optimised for various types of devices and screen sizes but definitely not for all devices & browsers. Modern browsers and a large portion of modern devices should and can be supported.

 

Responsive web design is essentially a form of front-end web development using HTML5 markup and CSS3 styling often with JavaScript poly-fills (and work arounds) to create responsive, cross browser experiences that are backwardly compatible. It can also be a form of UI design whereby websites and applications are designed for multiple devices including mobiles, desktops and larger screens, like smart T.V’s.

 

When developing a responsive website the developer will have different css styles applied at different minimum and maximum widths so that at different screen sizes and on different devices the website will display and be optimised for the specific device. People use to have a desktop website and then buy a mobile website in addition to the desktop version. You do not need to do this any more. Responsive websites can be designed to be viewable and optimised for most modern devices and screen sizes including iPad, tablets, smart phones, iPhones, desktop screens and extra-large devices or screens.

 

The use of percentages & fixed widths (which change) on website grids is used commonly in responsive design. When using fixed widths on website grids at different break points the widths will change and become wider or narrower based on the media query targeting the screen size, the width of the grid in pixels, rem’s, em’s or percentage is changed at each break point in the style sheet.

 

Typefaces are optimised in responsive design. Type on larger displays will scale up and become large while also scaling down for smaller devices. This scaling of type is to aid in the reading of the content. A smaller image will be used on a mobile phone while a much larger image is displayed on desktop computer when developing responsive images with CSS. Developers do this so a website is quick to load on smaller devices (mobiles & tablets) with weaker internet connections and because a image only needs to be as large as the screen it is being used on. If developers didn’t do this a website on a mobile phone could take a long amount of time to download images and this possibly would result in the user leaving the website &/or having a poor user experience.

 

If no CSS option is available then 100% width images can be styled to scale to any screen size but this can either limit the size of the image being used or the image can take time on weaker internet connections to load, hence the problem with images and responsive design. Picturefill polyfill can be used as a responsive image polyfill to offer a solution of the responsive image dilemma & for more reading on this topic (responsive images) see here.

 

Responsive web design or RWD for short, has been bought about since the update of CSS2 style sheet language to css3 (cascading style sheet 3) and the support for media queries on all modern web browsers. The main reason for it’s development and implementation was the growing number of internet enabled mobile devices and their variance in designs, namely different screen sizes, widths, lengths and resolutions. Responsive web design is used in the web development of web applications (web apps) & more common websites.

 

The main point and function of RWD is for the end user to be able to use a website while interacting with it on a mobile phone or tablet just as they would on a desktop screen or extra large screen. When having a responsive website built aim for mobile support, tablet support, desktop support & cross browser support before requesting all browser and device support. If you require specific support for older browsers you should always specify this to your developer, particularly IE 7 and any other web browsers not widely used that you require support for. All modern browsers should be supported.

 

Graceful Degradation & Progressive Enhancement (PE) are two different ways to have a website display on older web browsers. PE argues that a website should be built on a base user experience for earlier versions of web browsers delivering all content and progressively add more functionality to the website for newer browsers that support more modern technologies. Graceful Degradation is essentially the other side of the same coin whereby a website is built for full functionality for modern web browsers and on older web browsers the website should degrade gracefully although not look quite as well but still deliver all content to the user and have a good level of functionality. Progressive enhancement is the more modern and preferred approach.

 

Adaptive Web Design (AWD):

Adaptive web design (AWD) is essentially a website designed with progressive enhancement methodologies and a approach which has a set of pre defined layouts based on a detected device screen size in which a website is being used on. This method focuses on the user, not the browser and detects the type of device, displaying the appropriate layout, content and design based on that particular device. Scripting is used to detect the type of device and deliver a specific layout & content for that device.

Mobile First Design is a philosophy created by Luke Wroblewski that prioritises the mobile when creating responsive websites and user experiences. Basically code & design starts with a mobile first & progressive enhancement approach.

Here is a great read further on these topics: Mobile first responsive web design.

 

This website you are viewing is built using responsive design techniques. If you would like to know how to tell if a website is responsive a handy way to check is to click and hold down the bottom right corner of the browser, dragging it from the right side of the page all the way to the left. If the website is responsive, the website will move with it and you then can see what it will look like on different devices and screens sizes, you might also want to check it in different web browsers too!

You can also look at the website from different devices, like a smart phone or tablet to see if it has been designed responsively. If it has been designed responsively it will fit perfectly to the screen size with optimised, easily view-able text, navigation and images optimised specifically for the particular device or screen size.

 

Technologies and techniques such as HTML5 Shim/Shiv, Modernizr, Respond.JS, the way a website is coded, Google Page Speed, Browser Stack, modern.ie, image optimisation, testing in VM’s and many others have become popular ways to design/develop responsive websites. The use of these technologies enables cross browser support & backward compatibility so that a modern responsive website can be used on a large portion of modern devices and the majority of modern web browsers including some older versions of web browsers.




This article was written by

Ben Graham

on Saturday, 5th July, 2014.

I'm a designer and developer from Brisbane, Australia. I have a degree in Interactive and Visual Design from Queensland University of Technology. In my spare time I enjoy travelling and practicing photography. I have a keen interest in learning, regularly researching and developing skills in the latest technologies & techniques. I have been a UI/UX Designer & Front End Developer working with both single page applications (SPA) and .Net apps in enterprise as well as starting out my career within agencies. Currently I work as a consultant @ Avanade, an Accenture and Microsoft consultancy.