Adapting your Website for the Mobile Era

The article below was originally published in Business Performance Quarterly Issue Three. To read the article in the original publication please see Business Performance Quarterly Issue 3. Business Performance Quarterly is published by Waterstons and contains articles to help businesses attain performance through technology

In the last few years it has been impossible to ignore the growth of mobile devices in society. The iPhone changed the way we saw our phones, and then later the iPad introduced another type of mobile device that took the market by storm. These devices have grown to be a huge portion of the computing market, and have grown to become a major player when it comes to the internet.

Mobile devices cover a large portion of internet use, and this is increasing. In just two years Europe saw 183.43% increase in mobile web use, Asia had a 192.46% rise, and the USA had a 69% rise. A report by ComScore showed that 37% of time spent online in 2012 was from mobile devices. For Maps, Weather, Music and Social Networking mobile devices were more popular than PCs. With all these trends, it is no surprise that a statement from Smart Insight predicted that by the year 2014 mobile web users will overtake fixed web access (aka desktop PCs).

Percentage of Mobile Web use by category

(ComScore WhitePaper 2013 Mobile Future in Focus – http://www.comscore.com/Insights/Presentations_and_Whitepapers/2013/2013_Mobile_Future_in_Focus)

However mobile devices, despite being convenient for users, bring with them a number of restrictions. The smallest devices can have up to 80% less space when it comes to screen size, interactions are less precise when using touch, and if users are on the move, connections can be poor. Despite this users want a great experience on their mobile. According to a study by Compuware in 2011, 71% of users expect a site to load as fast as it does on their PC, and 74% of users say they will abandon a site if it takes longer than 5 seconds to load.

Making your website mobile friendly

What do you need to do to provide a good User Experience on a mobile? There are a few key principles to follow. As touch is an imprecise interaction method, key interactions should be large targets (such as navigation and key sellers). The locations of these should also be considered as areas of the screen are harder to reach on mobile devices. It is also important to make sure key user journeys should be short, simple and obvious (for example a user buying a product, or deciding to contact the business). Content should be the key focus of the website, and should be made to be
easy to read on small screens.

Ease of Touch Interactions

(Ease of touch interactions according to Luke Wroblewski, taken from http://mobile.smashingmagazine.com/2013/05/29/the-state-of-responsive-web-design/)

Speed of loading was another key point made by users. This can be addressed by providing less content to a mobile website, and providing images that are smaller in file size as the required display size will be smaller (images make up a large portion of website size).

There are some irritations users can experience when browsing on their mobiles. If your website makes use of Google Maps (or other providers), this can ‘steal scroll’ on mobile devices. This means that if a user attempts to scroll by touching the screen and moving their finger, but they happen to touch the Google Map, the Google Map will scroll and not the website. It is important to consider solutions to this on mobiles, such as providing an alternative map. If your website provides downloads or videos, it can be frustrating for users when their device doesn’t support the file type or doesn’t have flash. Either make sure alternatives are available for mobile devices, or don’t provide mobile users the option to download or view the video.

The same principles above are also key for internal applications such as intranets. A large number of companies have employees who spend time travelling. By providing a mobile friendly experience productivity can increase by having easier access to key documents and important web based business applications when not in the office.

By improving your mobile presence you are giving the potential for tighter integration into your users’ lives. Whether its potential customers on your website, or employees, most users carry their mobile with them everywhere, and therefore are always able to access your website at any time.

Solutions for a Mobile Friendly Website

There are three main ways you can support mobile devices: a separate website targeted at mobile devices, adapt your current website to scale down to a mobile device, or consider mobile devices first and scale up your website to larger screen sizes and more powerful devices.

Mobile Specific Website

The main benefit of a mobile specific website is being able to separately target mobile devices and PCs. This allows you to provide a fantastic experience on a mobile and fully utilise the platform without affecting your Desktop based website. A lot of large websites do this, the BBC being a key example. The website can be fully optimised for poor connections and provide a great user experience with fast loading times, providing content, and an experience tailored to the limitation of mobile devices and connections.

However this brings a lot of complexity. A strategy needs to be introduced to have one central base for content, and serve it between at least two websites. There is also the question of how many websites do you need, and whether you create extra websites for tablets, and even retina devices (new apple iPhones and iPads with high resolution screens). You also need to decide which website you provide to which device. The solution gives you the greatest control, but also is likely to be the longest, most costly, and most difficult to introduce, whilst also bringing extra complexity to maintenance and ongoing development.

Responsive Design

This second solution is the idea that you can scale down your current website to a mobile device. This has picked up great popularity in recent years because this can often be implemented directly on top of existing websites. The basic premise is to remove some elements and adapt other elements to better suit small screens and touch interactions.

This solution is not the most effective at providing a fast user experience on a mobile. The process of removing content tends to provide an overhead on a mobile device that can actually slow things down. If not properly considered during design, websites can have far reduced functionality and offer a poor user experience on mobile devices. It is important that care and attention are applied during the design stage to provide a good mobile design, and not just the desktop website with limited functionality.

This solution tends to be the easiest to implement with existing websites, as the main changes required are to adapt the existing design to mobile devices, and therefore the existing website on PCs requires little change in design.

Mobile First

The final solution, and the one that is gaining popularity at present, is designing for mobile first. The statistics show that mobile is likely to soon be the dominant presence when browsing the web so this alone makes a good case for this solution.

The philosophy of mobile first is to start your design with the least capable device (the mobile phone), and add features to your website as they become available. This provides a mobile website that is optimised for speed and only provides the content required. It also allows us to target certain mobile features such as GPS, Voice Input as we can add features based on these if they are available. The main difference between this and responsive design is we add features, rather than remove features, meaning that we tend to be able to better utilise the features we have available on any device.

Good mobile first design will often lead to better desktop design. It forces you to focus on the key content of your website, and make this the centre of attention, which can often be overlooked when designing with all the screen space of a PC. When you add content as the devices become more capable, the additional features compliment your key content, rather than dominate it.

Mobile first tends to provide simpler, but much more targeted websites to the capability of a device. This is an improvement over responsive design, and allows it to come close to mobile specific for its effectiveness on each device. However as we only have one website that adapts, we remove all the complexity of having a single set of content for many websites that the mobile specific website required.

It does often require more work to implement mobile first for existing websites than a responsive website would, as even though a complete redesign is not required, the current website would have to be adapted to work from an initial design built for mobile that would scale onto the desktop, requiring at least some changes to the desktop website. However a gradual move over to mobile first design is certainly possible and would ease the transition to providing a better mobile presence.

Conclusions

Even though responsive design is the easiest way to adapt your website to work on mobile devices, it is not the best due to a poor mobile user experience more often than not. With the trend on the internet moving towards mobile browsing there is a very strong case for mobile first design. If proper care and consideration is taken during the design process this leads to a simple, content driven website targeting what is key to your business. Mobile first is the best compromise between performance and complexity of solution to the mobile web. Mobile specific websites are certainly a viable option, though with the extra complexity, it ought to provide your business clear advantages over a mobile first design to be considered, and is likely to take more effort to support.

If you are looking to improve your intranet for mobile devices, SharePoint 2013 has been designed with this in mind, being designed for touch, and providing a new and improved user interface to enable easier browsing on mobiles. The new office web apps have also been optimised for touch to enable viewing and editing documents much easier when not in the office. It is just one of the many new features that SharePoint 2013 provides, and it alone is an excellent reason to upgrade.

If you haven’t considered mobile in your strategy for your website, I would highly recommend that now is the time you begin to do so. If the predictions prove to be correct, it will be likely that over half your users are on mobile devices this time next year, so it is important that you provide them the best experience possible on your website, whether they are at home on their PC, or whether they are joining the mobile revolution and are on their phone or tablet.

Leave a Reply