We predict that this year will be the year that some of our clients will see the MAJORITY of their users visit via a mobile device. For these clients the user experience on mobile will become more important than that on a desktop PC. It’s a real challenge to adapt your thinking to this after years and years of purely focusing on your website as it appears on a typical PC monitor.
When mobile appeared on the agenda a few years ago clients were concerned. It all sounded pretty complicated (and expensive). The general understanding was that they were going to need a desktop site and a mobile site and maybe other sites for other devices that were launching all the time! Surely this was going to be a nightmare!
Responsive Web Design
Technology is amazing and in this situation along came a solution that fixed many of the issues. In very simple terms Responsive Web Design is the practice of using fluid grids, flexible images and media queries to progressively enhance a web page for different viewing contexts.
What are Media Queries?
In its essence a media query consists of a media type and an expression to check for certain conditions of a particular media feature. The most commonly used media feature is width.
By restricting CSS rules to a certain width of the device displaying a web page, one can tailor the page’s representation to devices (i.e. smartphones, tablets, netbooks, and desktops) with varying screen resolution.
This means that you do not necessarily need to have several websites for different screen sizes. You have one rather clever responsive presentation layer that adapts in a fluid way to the size of your screen. After we initially determine the users screen size we can adjust the layout, font sizes, navigation style etc.
Yes it now takes longer to create a responsive presentation layer and this can increase costs however adopting this technique solves a lot of problems. It is certainly much cheaper than creating and maintaining several different sites for different devices.