Introduction
With the amount of mobile devices used to access the internet increasing exponentially, there is ongoing debate as to the best way to serve up content to these users. Google recently moved to clarify their position on the matter by issuing some recommendations.
Consensus of opinion seems to be that a responsive design is the preferable way to serve up content to different devices rather than a mobile-device specific version of your site. Which makes sense right? I mean who wants to design a website and then have to completely redesign another version of it, or even multiple versions of it for mobile devices, along with which goes managing duplicate content? Whilst there can be much more to it, a simple responsive site will restyle the HTML structure to better fit the user’s device using only a style-sheet.
There are a few inconveniences and restrictions that come with choosing responsive over mobile-specific. Having recently embarked on the process of turning an existing desktop website design into a simple responsive design, using only different style-sheets and a tiny amount of JavaScript jiggery-pokery. Allow me to share a few of my musings, discoveries and frustrations I’ve encountered from a designer’s perspective.
Designing A Responsive Site
If you are starting from scratch, designing your site to be responsive should mean much less workload in the long run. However, as you will be using the same base HTML code, you can find yourself trying to shoe-horn elements into your mobile version that you would rather leave out.
If your design is minimal, an interpretation for a smaller screen should be fairly simple. You will need to allow more space for linked elements to give a larger area to ‘tap’, possibly increase the font size to boost legibility on smaller devices and make your buttons and links larger and more finger-friendly. The overall design should be largely a case of stacking previously floated elements and allowing things to breathe a little better with some more padding or margin.
It should be easier to maintain a consistent feel across all devices using responsive. Since you are taking the same content and structure and only making changes to parts that require it, much of your graphics and styling, etc. will be exactly the same.
An added bonus of taking the responsive route when you have an existing design, is that you are forced scrutinise your design and assess how important each part is. If that pretty graphic or flashy animation is being dropped for mobile, is it worth keeping for your desktop site? Of course, more often than not, the answer will be ‘Yes’ and you’ll want to serve up slightly more intricacy for your desktop users but it is beneficial to be asking the question, you may find your desktop site is improved as you create your mobile styles.
It can also be fulfilling if you’ve designed a great desktop website when, rather than spending hours on a completely new design, much of your design slides effortlessly into smaller device format with minimal adjustments to the styling.
Obstacles To Overcome
Of course, the fact that you have to work with your existing HTML flow, brings with it frustrations. The simple (styles only) responsive approach can fall down if you have a myriad of elements that you would ideally like to drop for mobile users. Since you are working with the same HTML, hiding and showing content can only be achieved by styling them to not display or by using JavaScript to hide and reveal things. You will find yourself having to accommodate elements that, given the choice, you would not display on a mobile device. Why not simply “display:none;”? I hear you ask! Well, amongst other things, there are search ranking implications that come with hiding too much content through styling. You also need to remember that even though content is hidden, it is still loading and therefore adding to the page weight, which is potentially costly to mobile users.
You will probably find that you need to hide a small amount of elements from both mobile and desktop users but ultimately this works out better than a duplication of your entire site.
E-commerce site designers in particular, will have the added challenge of how to accommodate a third party payment provider’s design into their site. There is only so much that can be done here and unfortunately most of the payment providers seem to be stuck somewhere in the 90s when it comes to their page design and construction. Unless you are providing your own payment system or you’ve found one with a modern approach, you will just have to make the best of what they offer.
Conclusion
The more minimal and concise your main site design, the easier it will be to make it responsive. So, if you’re about to embark on a new website design, consider responsiveness from the start and the whole process should be much more smooth. It should also result in a better design generally. You may find as you create the simplified styles for your mobile design, you simplify and improve your desktop design along the way.
References
- Smashing Magazine - Why We Shouldn’t Make Separate Mobile Websites
- Opera – Mobile-friendly: The mobile web optimization guide
- A List Apart – Responsive Web Design
