How Responsive Web Design Works
This is a follow-up blog to an Introduction to Responsive Web Design: The Future of Websites which was published on the Huffington Post by our CEO Ian Mills.
In this article, we described responsive web design as a culmination of different techniques, the two main techniques which make up responsive web design are Fluid Layouts and Media Queries. In this blog, we will aim to explain how these two elements interact to form what is now referred to as responsive web design.
In short, fluid layouts affect the structural CSS of a website, this controls its layout and therefore how it displays on different devices. Media queries on the other hand relate to the CSS related to stylization or rendering and could be conceptualized as a series of questions or conditional logic related to the device it is being viewed on.
Fluid and Fixed Width Layouts.
Previously, websites were based on fixed widths and a layouts proportion. This is a hangover from the print and newspaper industry, when an advertisement or article would be a certain size of real estate. Websites however, are not as limited for real estate and can grow in length. Secondly, unlike newspapers- how a page is read or displayed depends on the device or browser it is being viewed on.
For this reason, a pixel based approach is redundant and not really suited to websites. When multiple device sizes started to come about, the fixed width approach was clunky and didn’t render well. So instead of pixels being used to describe sizes of objects, developers started using a percentage to indicate proportions. For example instead of a box or container being 300 pixels wide, it is now 50% of the total width of the window.
This explains why when you resize the window for this website elements shrink and expand accordingly. However, there will be a stage where the elements of the page shrink to when they are no longer legible on the screen they are being viewed on.
This is when we will have to introduce another level of techniques to optimise for smaller devices with different interfaces such as touch screens. This is when the second element of responsive web design comes in- Media Queries.
Media Queries
Media Queries are a set of questions that the website asks of the device or browser it is being viewed in, so that it can adjust to a pre-set design to optimise itself. Think of it as a dress code for a website, so for example, when desktop might be better suited to smart casual, a mobile might be better suited to formal versions.
So all media queries are doing is asking what are you, how big are you, do you have the browser or device, and adjusting the display and functionality of the website accordingly.
Going back to the relationship to fluid design, this comes in handy when a proportion has become too small to be ideal for the device it is being viewed on. The layout will have to adjust or stack, so that its elements can expand on contract their proportions accordingly. For example, Media queries can say if device screen is less than 600px wide= display this version, so a 4 column layout adjusts to become a 2 column website and vice versa.
Often these are also called breakpoints , as they are points where the layout breaks or snaps to a new format. For example, a desktop might have 4—1 images next to each other on the homepage, but may adjust to be 2—2 for a mobile.
As you can imagine, there are infinite things you can achieve or customise for different media queries and for this reason- responsive web design is a scalable approach for the future and allows for quite a bit of creativity.