Designing your website for the mobile generation

Danny Bluestone of Cyber-Duck outlines how you can ensure your website meets the needs of smartphone and tablet users.

Danny Bluestone

When defining a digital strategy, the importance of mobile cannot be underestimated. Mobile and tablet traffic to UK websites has been on a par with desktop traffic since mid-2013. The construction industry in particular has to deal with staff and suppliers working on site, where using smartphones may be the only viable method to browse the internet. 

So how do you make your website and back-end systems available to mobile (and tablet) users? Here are some tips that can help.

Make your website ‘responsive’

With the constant launch of new devices with different screen sizes, I’d recommend using a responsive web design for your main website and systems. This approach means the website will display in the best form possible across all current and future screen sizes.

“Breakpoints” are defined so the structure, content and images scale to fit browser windows, providing an easy reading experience.

The impact this has on user retention is immense. For instance, we recently created a responsive website for BAM after discovering that almost a quarter of their site visitors came from mobiles or tablets. The new site reduced the number of mobile and tablet visitors who abandoned the site after viewing just one page by over 10%.

A responsive approach doesn’t have to be expensive. Existing designs can be “retrofitted”, and responsive design eliminates the need to create and maintain a separate mobile website.

Consider creating an app 

Mobile apps don’t replace your website or function as your main “shop window”. Instead, they should only be considered if they can offer an additional service and mobile tailored experience that doesn’t require constant online connectivity, and can draw on the device’s unique features (such as geo-location or the camera).

Cyber-Duck launched an iPad app for office partitioning company Optima, enabling its in-house sales team and core customer base of architects and contractors to work more efficiently onsite. The app provided a user-friendly way to browse the technical documents, animations and video content about Optima’s products.

Cater to touchscreen interactions

When designing for mobile, it’s important to create a “finger-friendly design” for touchscreen interaction, alongside the traditional mouse click and keyboard inputs.

Your design needs to be optimised for how mobile users hold and tap devices. The most popular grip is with one hand, using the thumb to tap the screen. This means crucial controls (like buttons) should be organised into the bottom area of the screen, and be a comfortable size and distance from each other. Incorporating gesture-based interactions (like swipe or drag) are a further opportunity for enhancement.

Similarly, when designing forms it’s important to remember that most users are significantly slower at typing on a touch screen and are more likely to make mistakes. Limiting the amount of information required can make a noticeable difference.

Adapt design to raise performance

High loading speeds are critical to raise conversion rates and avoid abandonment, with 64% of smartphone users expecting websites to load in under four seconds. Average page weights are creeping up rapidly, so it’s advisable to set a strict performance “budget” for your website or system, either in terms of load times, or page size.

It’s unfortunate that images are the main culprit of high page sizes, when project photography plays a critical role in construction websites. However, you can still use an image-led design as long as you ensure that each image is necessary, optimised and compressed before and after exporting as a jpg or png file. For BAM’s new website we chose a classic photographic-led design that would show visitors what the company does, rather than telling them.

Clever conditional loading techniques can further raise the perceived speed of a page, by loading visible sections of the page in stages, with key content first, or selecting elements that won’t be displayed on a mobile device. In creating a sustainability website for BAM, for example, we disabled animations and parallax scrolling on mobile devices to ensure high performance, with big graphics and drawings being optimised.

Of course, testing with a variety of real mobile devices is crucial in every instance, to gain a real idea of the user’s experience.

In construction, a significant proportion of your target market are “on the move”, spending many business hours on site. It has become vital for decision-makers and digital agencies to work together and create the optimum experience for these users across desktops, tablets and mobiles. The best way forward is to plan for mobile from the outset, with a responsive website, aiming to raise mobile usability and performance with design throughout the project.

Danny Bluestone is managing director of Cyber-Duck website design consultancy,