Responsive Web Design

Responsive Web Design

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. Ethan Marcotte coined the term responsive web design as advancements in HTML markup and particularly CSS styling language enabled and supported Responsive Web Design.

 

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.

 

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 cater for the specific device. People used 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 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 scaled 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 visit (Responsive Images) 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 commonly 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 similarly as they would on a desktop screen or extra large screen. When having a responsive website built aim for mobile phone 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 the particular device. Scripting is used to detect the type of device.

Mobile First Design is a philosophy created by Luke Wroblewski that prioritises the mobile when creating responsive websites and user experiences. Basically, code 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 easily view-able text, navigation and images specifically loaded for the particular screen size.

 

Technologies and techniques such as HTML5 Shim/Shiv, Modernizr, Respond.JS, media queries, fluid and flexible grids, the way a website is coded, Google PageSpeed Tools, BrowserStack, Modern.ie, responsive image loading, 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 devices and the majority of modern web browsers including some older versions of web browsers.

 

The reason I highlight that not all devices and browsers should be supported is that versions if IE and older web browsers from different companies are no longer supported. IE or Internet Explorer versions below IE11 have not been supported by Microsoft since 2016. I ask the question, if Microsoft doesn’t support IE11 below, should we? While many government environments still run older versions of IE there is a necessity for supporting and building on older bowsers. We currently do build and support theses browsers, however as many front-end developers know supporting and building for older versions of IE can lead to hacky (not best practice) and vendor specific code with also the use of JavaScript to accommodate such support.  There is a large cost to supporting all browsers and devices, a huge amount of testing and impracticality due to the innumerable number of devices and browsers. While it could potentially be done, for the sake of the majority of applications and builds, it is not necessary, impractical and expensive, with little value added. The majority of users browsers and devices in use, through analytics insights, would show much more modern browsers and devices being used, particularly within Australia and other countries.

 

Recommended Responsive Web Design Reads:

Responsive Web Design – Ethan Marcotte

Implementing Responsive Web Design – Tim Kadlec

Mobile First – Luke Wroblewski (RWD & Mobile First Justification and Insights)

Responsive Design: Patterns and Principals – Ethan Marcotte

Atomic Design – Brad Frost

Responsive Web Design – Wikipedia