What is mobile-first responsive web design?
Responsive web design is an approach that enables a website to automatically ‘respond’ to the device it is being viewed in – smartphone, tablet, laptop, desktop PC and so on.
By respond, we basically mean reconfigure or resize itself for the best possible viewing experience for the user. With an ‘unresponsive’ or ‘fixed’ (or plain old-fashioned) website, if you are viewing with a smartphone or tablet, you usually have to zoom in and out to be able to view the part you are interested in. Or a website that is image-heavy will take an age to load compared to the load-time on a desktop PC.
Take a common three-column design, used by millions of websites around the world. On a PC monitor they work fine – all three columns perfectly visible and readable. But on a tablet or smartphone, you either have all three columns showing, but so small you can’t read them, or you have to scroll between columns or zoom around the page to actually read what the text says – not something users appreciate. There’s also the risk that, through scrolling or zooming, some small elements, functions or messages are missed altogether. Other elements, like drop down menus for example, although fine on a large desktop PC, can be a nightmare if you try to use them on tablets or smartphones.
These days, with the phenomenal growth in the numbers of people browsing the web through smartphones and tablets, that just isn’t acceptable. The problem is complicated by the fact that most smartphone and tablets can be viewed both horizontally (landscape) and vertically (portrait), so even a single device has two different viewing options.
The simple fact is, more people are using smaller-screen devices to view web pages. And they expect the same fluid, fully functional web experience no matter what kind of device they are using. So a website that isn’t responsive risks becoming a website that is ignored by web users and left behind by competitors
With responsive design, the tablet version might automatically adjust to display just two columns, while the smartphone version might switch to three stackable columns for portrait view and two columns for landscape. For both devices, images are automatically re-sized to avoid distortions or slow down load times.
Whatever device you’re using, with responsive design the website automatically adjusts itself to give you the best possible viewing experience. There’s no need to maintain two separate sites – mobile and normal – and you can manage all your content in one place, with the reassurance that it will display effectively on all devices.
Why do you need responsive web design?
More and more people are using mobile devices to access the internet. According to research from Ofcom in August 2013, over 70% of mobile users regularly access the internet through their smartphone and one-third use a tablet. In the months since the research was published, those figures will have increased even further. In the United States, Microsoft predicts that mobile internet use will overtake desktop use in 2014, and where the US leads, the UK usually follows. While a Google research study found that web users are 67% more likely to buy from a mobile-friendly site. That means more people using small screens to browse, research and buy online – and more people getting frustrated if they can’t view your website properly on their device.
If you already have a website, use Google Analytics or something similar to check where your web traffic is coming from – you might be surprised at how many visitors are already getting to your website through mobile devices.
As well as making for a much more satisfying user experience, responsive web sites are also Google’s preferred type of website. There are two main reasons for this: 1) as outlined above, users prefer them and Google likes sites that give users a great browsing experience, and 2) they are easier to Google to index. So a responsive website not only wins you points with web users, it wins you points with Google too, and that can only be a good thing when it comes to your search engine rankings.
Our experience with mobile-friendly responsive web design
Blueprint has been at the forefront of responsive web design since the emergence of the technology in 2010. We’re not a design agency that also does some digital development. We are digital first. 90% of the websites we create today are responsive, and the 10% that aren’t usually have a very strong commercial reason for not being.
We offer big agency talent without the big agency price tag. We know how to produce amazing creative designs that work effectively, consistently and powerfully across all types of device, with our mobile-first responsive web design approach. We use the industry standard responsive web design framework known as “Bootstrap”, developed by the people behind Twitter. Today, the Bootstrap framework is trusted to power several million sites on the world wide web.