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. The huge popularity and rise of the iPhone since January 2007 with internet (browser) enabled capabilities allowed for websites to be designed and built for mobile devices including phones and tablets along with desktop screens. 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.
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 for may years now do not need to do this as a website built responsively can flex from a mobile device and re-adjust it’s layout on larger screens. 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 screens including different screen resolutions.
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 along with being the appropriate size for the screen or device. A small image will be used on a mobile phone while a much larger image is displayed on desktop computer when developing with responsive images. Developers do this so a website is quick to load on smaller devices (mobiles & tablets) with weaker internet connections and because an 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.
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 will be much slower to load with weaker internet connections. 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 done right..
Responsive web design or RWD for short, has been brought 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 people 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 predefined 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 and is a fully responsive website. 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, lazy loading images, 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.
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 Principles – Ethan Marcotte
Atomic Design – Brad Frost
Responsive Web Design – Wikipedia