Almost everybody wants a responsive website these days, but what makes a website ‘mobile-friendly’, and is there a right way to build mobile websites? Well, a responsive website is just that: responsive. It responds to the user’s browsing behaviour and environment based on screen size, platform and orientation. The practice of building a responsive website involves a mix of flexible grids and page layouts, images and CSS media queries. Whether the user browses the website on their laptop or iPad, the site should automatically change to allow for screen resolution, image size, scripting abilities and whether the mobile device is in portrait or landscape mode. In other words, the website should be able to automatically respond to the user’s browsing preferences.
There’s no getting away from it, in the digital world, small is the new big with more people now browsing the web on their mobile devices than ever before. In 2015 Google factored this upwards trend of mobile usage into its ranking algorithm (for smartphones, not tablets) with the introduction of its mobile-friendly update. Google has taken this even further recently with the testing of a mobile first index. This means that desktop sites will also be ranked according to the quality of their mobile site...bad news for those who haven't yet go their mobile or responsive site up to scratch.
Effectively, what this means for businesses is that they are likely to see a decrease in Google rankings on mobile and desktop if they do not have a responsive website. And given the growing percentage of mobile internet users, this is simply not an option for the vast majority of companies. Mobile design is now so important, that it can no longer be considered as an afterthought; something to add to a website once the desktop version has been designed and built. Rather, mobile content should be at the heart of a website build, with the user experience enhanced through a ‘mobile-first’ approach to web design and development; that is the right way to build mobile websites.
The term ‘mobile first’ does not mean to have a good fallback option for mobile devices, or to build the desktop version of a website first and then implement a mobile version afterwards. It means, literally, design and build the mobile version of the website first, before consideration is given to the desktop version of the website. Traditionally, the process of building a responsive website was to design and develop the desktop version first and then make it adapt to smaller devices afterwards. Unfortunately, this approach often results in a watered-down version of the desktop version, with many of the cutting-edge features and technology employed in the full version simply omitted.
The right way to build mobile websites is to put the mobile user at the heart of the experience by designing and building the mobile version before anything else, starting with the smallest screen resolution and working up. This approach ensures that the designer/developer is aware of the technical constraints of the platform and can add features later exclusively for the desktop version – if it enriches the user experience. Start designing with only the most vital elements of your content or story, and then build on that.
When building mobile-friendly websites, it’s important to accept that a website won’t look exactly the same on every device and every browser. Responsive web design is all about designing a fluid framework for content, not obsessively trying to maintain meticulous control over every element on the site. It’s also about understanding that not every device will render the site exactly as your pixel-perfect design. Web design is not like print design; there are no rules that govern how text should be laid out and elements positioned. The variables at play are too great to achieve pixel-perfect precision across all platforms.
Some web designers and developers will obsessively optimise a website for every possible combination of screen resolution and orientation. This approach, however, is not only impractical; it’s virtually impossible given the sheer number of variations in mobile devices. We’re now at the point where attempting to keep pace with endless new resolutions and devices is a futile exercise. So what is the solution? Should we just suffer the consequences of alienating visitors on one device for the benefit of satisfying visitors on another? Or is there another solution?
Fortunately, there is; it’s called Foundation, a CSS framework that features built-in break points for the most common screen sizes. The websites that we build for our clients often use Foundation as a base, as it’s a perfect CSS framework for the mobile-first approach. It makes it easier for web developers to build websites for small devices first, and then add in layers of complexity for larger devices as required. The Foundation framework is fast, extremely customisable and utilises flexible CSS grids to make it easier to incorporate responsive functionality into a website design.
Everyone wants a unique website that sets their business apart from their competitors, and at Reflect we love nothing more than flexing our creative muscles and building beautiful websites that delight our clients and their clients. However, certain website elements only really work when they follow a set of conventions. These are not arbitrary rules, but lessons learned from experience about what works and what doesn’t. There is always room for creativity of course, but usually within the constraints set out by the existing conventions.
Visitors to a responsive website know that when they click on certain elements, certain things will happen. To change the design or placement of such established elements is inviting trouble. The web designers and developers at Reflect have been building websites for years; we know what works and what doesn’t, and we understand that the right way to build mobile websites isn’t about creating experimental features that have never been seen before. It’s all about creating beautiful mobile experiences that engage the visitor, encourage them to explore the website and provide an intuitive browsing experience that makes use of tried-and-tested design elements.
We can help with that. Our team has over 40 years’ experience of building beautiful, bespoke websites that make a real difference to our clients’ businesses. We are at the forefront of mobile web design and pride ourselves on not only the quality of our work, but also the outstanding level of technical support that we afford all of our clients – whatever their size or budget. To talk to us about your project get in touch and we’ll get back to you as soon as we can.