What is 'Responsive Website Design'?
Posted 27-10-17
'Responsive Website Design' has only been possible since tablet and smartphones became powerful enough to display more or less the same content as a Desktop PC. Previously developers would have the arduous task of implementing a mobile counterpart that catered for the low resolution and poor processing power of a hand-held device.
'Responsive Website Design' (RWD) was a term coined by web designer Ethan Marcotte back in 2011 when he launched his ground breaking publication titled 'Responsive Website Design'. In the book, Marcotte concludes that a 'Responsive' website should be built using fluid grids, flexible images and CSS media queries to deliver a quality experience, no matter how large or small the display.
Lets take a look at each of those terms and try and establish what is meant.
'Responsive' website
The website will be programmed to respond automatically to the available screen-size and display content in an optimised format that makes best use of the available area.
Fluid grids
This refers to the architecture of the web page itself (composed of HTML/CSS). Essentially the content sits inside a container that is stretched for example 80% of the screen width. If you resize the browser window the container will expand or contract accordingly but always be 80% width. If the browser window was fully open the content would spread across the screen but as the container contracts the page objects 'cascade' one after the other resulting in a longer, narrower format.
Think of it like a blank wall with pictures hanging from it. On a nice wide wall you could hang several large paintings side-to-side. However on a narrower wall you might arrange much smaller versions of the paintings one above the other.
A 'fluid grid' is the same principle as above but you would have multiple containers grouped together each housing different elements of the web page.
Flexible images
This is similar to above. If an image is placed on the page with width 80%, it will scale-up and scale-down relative to its outer-container but still be 80% width. On the larger desktop the image would look huge filling 80% of the screen, on the mobile the image may look too small and is condensed further by the 20% margin. Using 'CSS media queries' which we will discuss next, we may elect to make the image 100% wide on smaller sized screens making it more legible.
CSS media queries
These are special instructions placed inside the web page's CSS (Cascading Style Sheet) file which plot the co-ordinates of objects placed in the web page. The 'CSS media queries' are 'bench-mark' widths set in pixels. For example, if the available screen-width is between 900px - 1200px you might position 2 images next to each over. However if there was less room say 500px – 900px (on a tablet screen) you might instead place the same images one-on-top-of-the-other saving space. Basically the 'CSS media queries' measure the available screen width and organise how particular elements correspond with each other as the page widens or narrows.
CSS media queries also play a key role in the way the main navigation is programmed. Typically on a desktop, the website's main navigation will be spread across the top horizontally. This is far too wide for a tablet or smartphone. But using CSS media queries the 'Responsive' website can first measure the available screen width and if needed hide the original navigation instead displaying the familiar 'Burger' icon, top-right corner. Which of course indicates there is a drop-down menu available. The same navigation options then cascade vertically as opposed to horizontally when activated.
Putting these 4 basic points together, we are basically saying the web page's content will be contained in a flexible container that will be able to measure its own width and reposition elements down the page as opposed to adjacently to deliver a longer, narrower version when needed on the smaller sized screen.