Overcoming the challenges of the mobile web
01 November 2015
Mobile web development is not easy. Despite its often simplistic look and feel, there are some major challenges and design hurdles to overcome when building a mobile web site.
Should you add responsive styles to a desktop website to achieve a mobile friendly version or should you build a completely separate customised mobile version? Or should you not even bother, mobile browsers are getting pretty powerful, right? Should the content be the same, or cut down? What about functionality, how do you deliver a fully functional desktop site on a screen that’s up to 10 times smaller? How do you test a mobile site, when it can be viewed on thousands of different devices running dozens of different browsers?
We don’t claim to be experts on the subject, as nobody really can, but we have become more and more experienced and wish to share our thoughts on overcoming some of these problems.
Why bother?
Mobile browsers are increasingly more capable of displaying a full desktop site with no problem, so what’s the point in developing a mobile site at all? Well, for one, let’s think about the devices that can’t display the full website. Not everyone has the latest iPhone or Samsung. Also, many users will find it irritating to have to zoom into a full website – some will not have a problem with it – but for those that do we should deliver something easier to use and targeted for their use case. For the other group who like the desktop version, let’s give them a link to visit that instead.
Responsive Design
Responsive design is simply changing the way a page is displayed depending on the size of the screen viewing it. This ensures the content keeps a logical layout no matter what device is used to view it, whilst maintaining only one web site and one set of copy. This sounds great for the website administrator, but what about the user?
The fact is a responsive site is not a mobile optimized one. The simple fact that images tend to be bigger on desktops means mobile users will be downloading redundant KB – precious data over 3G. Not only that but what if we decide to hide some content from mobile users? They will still have to download it, only for it to be hidden by the style sheet. What about testing, too? Is it realistic to test a responsive site in all its configurations across all of the devices and browsers, including desktop versions? The risk of layout bugs even after testing with this set up is not to be taken lightly.
Building content for mobile
If we take the mobile site away from the desktop site and build it totally separately, we suddenly unlock a whole array of features we couldn’t think about before. We can optimize the image sizes, the content length, and the scripts for more interactive elements. We can be freer with our use of HTML5 and CSS3 features, as most modern mobiles will support them. We can organise the content more logically for mobiles, targeted to users with fat thumbs rather than pin-point accurate cursors. We have the potential to use swiping gestures on picture galleries, or to use AJAX in search results to load more data inside the page, rather than sending another full page request.
Even if a site is not fully responsive, why not add a few responsive styles to stop the site breaking in very small screens? Remember, people still use screens that are smaller than 240px.
Whether a site is designed to be one responsive site or a separate mobile site, one thing we can all agree on is that the user experience is the key. Here are some key points we try to adhere to:
Don’t hide good content from the mobile user – some people use mobile as their main browser, why should we deny them the same experience as desktop users?
Keep it simple – don’t overcomplicate things with complex layouts or animated navigations, think about those poor mobile users on older systems – have you checked your site works for them? If you keep it simple you can be fairly confident in all users at least being able to reach all your content.
Keep the payload down. The W3C suggest around 20kb for the total payload, that’s pretty small, but it is a good target to aim for. Read the rest of this page too, as it has a number of good guidelines.
Put the site through usability testing. Since user experience is the key, give the site to a group of people to test. Give them the device that performed the worst during your testing phase – if they like the site on this device, you have surely done a great job.
Testing a mobile site
Our mobile testing process is extensive – we have to be sure the site will look ok in virtually every mobile device/browser available on the market at that time, whilst trying to ensure future compatibility.
Notice I said ‘will look ok’, not ‘will look the same’ – we have realistic expectations of mobile browsers’ rendering capabilities, and therefore acknowledge that across older devices and browsers the site will degrade gracefully, whilst more modern browsers will render the full site complete with any CSS3 and HTML5.
We have a number of devices we use to test our mobile sites on, including Windows Phone, iPhone, iPod, iPad, Android, Nokia Symbian and Blackberry. On top of these we also use various emulators to double check the site on other operating systems. We ensure the site will work in both portrait and landscape and will scale any elements or interactive sections appropriately. We have found this combination of testing critical to ensuring utmost compatibility, especially on older systems such as the Symbian phones.
Conclusion
One thing is clear: designing websites for mobile is difficult. Designing and developing an outstanding mobile site, with great user experience, great performance and good compatibility is comparable to hand carving an intricate ice sculpture – it takes dedication, skill and experience – and you’ll get numb fingers from all the testing!
If you are looking to have a mobile site built by an experienced team of professionals, why not get in contact with us today?