We're Doing Responsive Web Wrong, But We Can Fix It
For nearly a decade web designers have concentrated on transitioning websites to more responsive designs, but many have failed to take into account the rapid increase in screen size. From 2007 to 2011 screen size only changed by a half an inch, then at the end of 2011 screen size exploded. In the past 3 years the size of the average smartphone screen has increased dramatically, going from an average of 3.5" to over 5" diagonally across, the largest being the Asus FonePad 8 with a screen size of a whopping 8". The additional screen real estate is a double-edged sword, as there is more room to display content, but also now more dead space.
Size Matters: From the Palm to Thumb, the Size of Smartphones
When Apple launched its original iPhone and subsequent models, including the iPhone 5, their designers deliberately chose their screen size. It was most likely chosen for a very simple reason - it was comfortable[i]. The average user's thumb can comfortably reach from the corner of a phone at the base of their palm to the farthest corner of a 3.5 inch screen. In translation, a person could ideally hold an iPhone in their right hand and reach the top left corner of the screen without awkwardly straining or using their left hand.
As smartphone manufacturers increase the average smartphone screen size, consumers can no longer comfortably touch >10% of their screen with one hand, and this poses a problem for website designers and developers alike.
The Dead Zone: What Bigger Screens mean to User Experiences
(Thumb Zone templates by Scott Hurff)
Companies such as Facebook and Microsoft have already identified the problem of screen dead space as represented in their apps. For Facebook, commonly used functions like the newsfeed, notifications, messages, and even the main navigation now appear along the bottom of the screen on iPhone and Android smartphones. Microsoft, with their Windows Phone, did something most other platforms aren't yet doing; they moved the browser controls to the bottom of the screen rather than leaving it at the top of a website.
Which leads me to my point; we already know that "good" responsive web design is adaptive to the device visiting the website, loading only content and resources that are necessary for that device's optimal experience. Now we have to reconsider how we design website navigation and what makes sense for our users. Responsive websites typically resize the website header and use jQuery to create a navigation menu specifically sized for mobile phones. Taking into account that the two most popular types of mobile navigation are dropdown and off-canvas menus, this poses a problem if our main target pages are in the dead space, like product pages or platform features. Therefore, when planning responsive websites, we have to account for the potential dead zone near the corners of smartphones and even the above stretch zones.
5 Tips to Improve the User Experience of Responsive Websites
1. Place commonly used functions in easy to reach areas
This means keeping navigation and calls to action away from the top left and the bottom right corners of a screen. Instead use these pain point areas to put the shopping cart back button or the website logo to go home. This small change could help conversion rates by preventing users from accidentally navigating away from your website's goals.
2. Above input labels vs. Inline input labels
A growing trend in web design has been to place input labels within the fields themselves. This maximizes the above-the-fold content, while still providing users context. Or does it? Baymard Institute has a great point many of us overlook; when using inline labels, especially in a long list of form fields, users can lose context of what was supposed to be entered. Therefore if you have to use inline fields, use them on simple forms like email and password inputs, but on in-depth checkout fields it safer to give users more context to the inputs with above the input labels[ii].
3. Go beyond conditional loading
4. When someone wants to buy something on your site, do not display unnecessary navigation and distractions
Seriously, can't emphasize this enough. Mobile shopping carts have a huge uphill battle when it comes to conversion rates[iv]. Everything from load times to price could affect a user's decision to make a purchase. Therefore, build your mobile shopping cart separately from the website's design if you have to. Remove any and all distractions such as ads, other products, and social media links. Once the user is in the cart, just let them checkout without distracting them unnecessarily.
5. Test, optimize, test, optimize, and repeat
Pay close attention to your website analytics and how it differs from desktop users to smart phone users. You can sometimes pick out patterns worth exploring to determine more effective ways to display content or advertisers. When possible, A/B test website designs. Even if the tweak is small you might be able to see a noticeable change in user behavior.
Conclusion: Large smartphone screens are breaking responsive web design, but we can fix it.
While these 5" and above screens wreak havoc on traditional methods for designing responsive websites, the problems they cause are easy enough to overcome. Focus on prioritizing content for optimal displaying and navigation on users' phones. A poorly designed responsive website may not only harm a user's experience, but also your rankings on search engine placement. This is especially true with Google's recent April update which will feature mobile-friendly sites higher in search rankings done from mobile devices[v].
In closing, designing for the user doesn't just start and end with what looks good, but what is also a great experience.
Follow Jason A. Howie on Twitter