Date: 18th February, 2013
So we already eased you in to responsive design by explaining why we think it’s the way forward, but now it’s time for us to talk technical. There are key ideas that form responsive design, and we aim to make them make a little bit more sense to you!
Responsive web design is becoming more prevalent, and as it becomes standard practice it can be easy to forget that it is not a technology, but a set of techniques and ideas that work together to form a whole.
Responsive design seeks to tailor disconnected designs to create the same experience when accessed from the ever-increasing number of different web devices, which in turn have a varying spectrum of screen sizes and resolutions. The responsive design technique addresses this problem immediately as the core principle is that the HTML served to each accessing device stays the same.
But how can this be? Well, two key features work together to ensure that everything stays the same, as explained below:
A flexible grid is necessary to ensure that the web layout adapts according to screen resolution, with images and text that move with the grid.
Since the original fixed page layouts, we have also seen liquid layouts, which expand with the page. However, the fluid grid layout takes the prize as they are carefully designed not just to shrink and expand, but to stay in proportion. This ensures that whether the screen is a large monitor, or a tiny mobile phone, all elements on the page realign and stay in relation to each other.
Proportions for each element are technically calculated by dividing the target value, i.e the pixels on the page space, by the context i.e the pixels included in the page content. This result then needs to be multiplied by 100 to create a percentage, which then must be applied to all details on the stylesheet (a hidden aspect which provides instructions for all layout and media on the page). Some people when creating a responsive design page may be tempted to round this percentage up or down: don’t! Responsive web design is all dependent on precision.
Fluid grids are incredibly disciplined and precise, which may come as a surprise as they seem so fluid and moveable. However, when the width of the device becomes too narrow to view your webpage and content, the page may breakdown, for example if there are too many columns for a mobile device. This is where the other key element of responsive design comes in…
CSS media queries are supported by most modern browsers, and can find out the capability of the device which you are using to access the site from, such as width/height of browser window; device width and height; orientation of the screen mode and resolution. The media queries can then use this information conditionally to apply the CSS style.
Media queries come into their own for example when you want to apply a style to kick-in if the browser window drops below a particular width specified, such as a small mobile screen.
There are no rules when it comes to setting extra media queries settings, but as long as you ensure that you make an accurate judgment based upon the common devices that access your site i.e no smaller than 320px and no larger than 1200px.
These two techniques then work together to create a movable, fluid and responsive website that can be viewed by all accessing devices!
If you want to responsive design in action, just resize the window of this page in your browser, and watch the pretty pictures and writing realign. If you're convinced that responsive design is the way forward, send us a message now!