It’s in the stats. More and more people are using mobile devices to browse the web. This means throwing out old ideas of fixed width designs and adopting something with a little more flexibility so everyone can enjoy the web. Responsive design delivers a solution to most of the challenges mobile represents.
How did we do the RWD?
There are a few principles which stand out when I think about how I approached RWD for the first time.
Mobile first is the first one. Starting out with the smallest viewpoint means that you can consider the user with the biggest disadvantages; screen size, bandwidth, processing power etc. With these disadvantages in mind, you are optimising from the get go.
Content breakpoints are the second principle which stood out. Rather than focusing on fixed screen sizes; 1024×768, 320×480 etc, letting the content determine the breakpoints is the only way in which a site is truly responsive.
The most obvious example of this is probably the main navigation. As the screen gets smaller, there is less and less space for a horizontal navigation and once there is no room for menu items to sit beside each other on a single line, the layout changes.
What’s left to figure out?
While we learnt a lot during the build of the first few RWD sites, there is still a great deal to figure out.
Responsive Images – While we always do the best we can in terms of optimising images for web use, when you have a RWD, you don’t want your mobile users downloading a banner image which is five times wider than the screen.
Conditional loading – is a process of adding additional html and content to the web page when the screen size has the needed amount of space.
Currently we are using a simplified version of conditional loading which is achieved with CSS and simply ‘hiding’ content from view. Using conditional loading is just another means of optimisation so that a user with a small screen and low bandwidth isn’t downloading content they’ll never see.
RWD is definitely the way of the future, it improves the usability of a website for the end user and it also forces the developer to think about optimisation and accessibility first and foremost which generally gets more conversions. Have a look for yourself at one of our first truly responsive designs.
At hairylemon we always recommend considering your mobile audience and a RWD is a powerful step in the right direction.
If you are keen to see your site updated to responsive, or feel it is time to build a new site and want to ensure responsive is part of the mix, just talk to our account managers about what’s involved.