This is a follow up blog to “An Introduction to Responsive Web Design in Houston”
In this blog post, 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 layout proportions. 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 optimize 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 optimize 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 and 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 or 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 customize 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 in Houston 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 optimize 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 your 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 orient 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 popovers 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.
