An Introduction to How Responsive Web Design Works: Part 2
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 stylisation or rendering, and could be conceptualised 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 a…?’ to 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.
So why aren’t all websites responsive?
The majority of websites globally are now responsive- Only 11% of the top websites on Alexa don’t have responsive design. And although responsive website design is a fantastic solution for mobile browsing, it does have its own set of challenges.
These should be considered, as sometimes responsive web design may not be a good fit for various reasons.
- Testing (Time and Costs)
When you get a new website, you will need to test all of the pages display correctly and the links work. Previously web design companies factored time into the budget for one website, on a desktop computer perhaps with 2 or 3 browsers.
Testing a responsive website however involves a lot more variables, and as such is a lot more time consuming and therefore costly. While this will depend on the complexity of your website, this is something to consider, particularly if you will be doing the testing yourself or have a limited budget.
- Limitations with complex functionality
Many websites rely on core functionality within their website for their business operations and revenue production. Although responsive website design is flexible in its application, it is worth discussing the compatibility of your requirements in greater detail with your web designer. For example, banner advertisements are not usually fluid, so depending on what web serving platform your website uses- responsive design may not be suited.
- Cost
As discussed previously, although fast becoming industry best practice- responsive design is not the cheapest way to optimise a website for mobile. Although an added cost, websites are a core element to a business both for branding and lead generation. Most business owners are appreciating this value and are more open to investing in their website design early on.
As your industry becomes more and more competitive with online best practices, added functionality such as this is not really an added extra, but a requirement moving forward. Over 20% of Google searches are performed on a mobile device and local searches on a mobile device are increasing so it is imperative for you search strategy to have a mobile friendly website.
What this means for web design moving forward.
The changes in conventions for web design have already become apparent. This is mainly due to the adoption of ‘mobile first’ approaches to web design. Vertically scrolling is the natural action for a mobile browser, and now a lot of websites now orientate themselves around vertical scrolling, rather and side to side navigation. The rise in ‘single scrolling’ or long continuous sites is due to their adaptability to responsive and mobile friendly design.
The other change which has become apparent in web design trends is the prevalence of touch screen friendly components. Buttons are now larger, tables are less common, navigations are less complex and videos and forms are embedded, rather than on pop overs or light boxes.
This is just a basic outline of what responsive web design is, but there are many more complicated things developers are able to do with responsive web design principles. If you’re interested in some of the more complicated elements of responsive web design and what is possible – please see: Hongkiat.