The need for websites to perform optimally across different screen resolutions continues to grow as smartphone penetration increases. In the UK, smartphone penetration is breaking through the 60% mark and users continue to confound those who think certain purchases will never be conducted in significant numbers on such small devices.
As one of our previous blog posts illustrated last year, there are several options for creating a website that can perform well across multiple devices. However, the one method which appears to be storming ahead as the preferred option is "responsive design"...... Mashable may well have quite rightly predicted 2013 as being the "year of responsive web design":
"Given the rapid adoption of tablets and smartphones — and the fact that users currently seem to prefer reading their news on the mobile web rather than in apps — I think it's inevitable that 2013 will be the year that responsive design takes off." - Pete Cashmore.
Given all this, responsive design is still a relatively new approach; many web designers and developers are still getting to grips with the key principals. As a result, it is possible to make some basic conversion mistakes in the way it is implemented. Below, we've pulled together 5 responsive design conversion mistakes to avoid:
- Don't hide your main call to action on smaller screens! It may sound obvious, but it appears web developers are often left to work out the layout of the page on smaller devices. Unless they are explicitly told to keep main CTAs prominent, they may choose to display main navigation and content more prominently than the primary CTA.
- Don't ignore the different way that your audience engage with different devices. Smartphone users engage with websites differently to desktop and tablet users. You must consider how your target audience will be engaging with your website on different devices and provide them with the content prioritised accordingly. e.g. Smartphone users are more likely to want short, key content immediately available and by providing them with a quick, obvious way to call you could also be beneficial.
- Design for the user, not the methodology (i.e. do what is best for your website visitors, not because you think you can do something cool with responsive design). It's imperitive to keep your primary objectives in place and not to be distracted by using this fairly cutting edge practice to do something that might be an "industry first" for you, but could just as easily lead to conversion rates falling off a cliff.
- Keep forms short and keep data entry to a minimum. Use drop downs, check boxes and radio buttons to make form filling on mobile less of a chore. Your target audience may have "fat fingers" and find data entry challenging on smartphones. As such, always consider how you can make life easier for them.
- Keep page loading times at front of mind. One of the challenges with responsive site builds is that you have to load all of the code into the browser. This means that all of the code that exists for a desktop site must also be loaded onto the smartphone device..... which isn't optimal for loading times & and is one of the reasons some developers choose to build separate smartphone sites. In order to mimise the impact with a responsive site, this needs to be taken into consideration. Many developers like to ensure this is covered by designing for "mobile first" and building up from there.
There are of course a plethora of other elements to consider, as with any web development project. These 5 points should at least provide you with something to consider to try to keep your responsive approach on track.