Building a Mobile-First Website: What You Need to Know

We’re not saying anything too outrageous when we say mobile usage is on the rise. Most of us are on them all day, every day – whether it’s for work, buying from our favourite sites or just having a quick browse during the lunch break.

But they’ve become so popular that for businesses, it’s no longer enough for their sites to be suitable for mobile. Now, they have to be mobile first.

Using our recent paper on cruise businesses as a reference, we’ll look at what you need to know about the recent evolution in websites designed for handheld devices and how they compare to responsive web design.

Quick Navigation

Our findings

As part of our recent paper, Unlocking the Secrets to Cruise Marketing Success, we carried out an array of research designed to help cruise businesses elevate their marketing to new heights.

Part of that research involved looking at which devices cruise audiences favour over others. Echoing what we said in the introduction above, we found that, with an average of 68.59%, the majority of traffic for cruise companies came from mobile.

In fact, the only site that had more traffic come from desktop, Seascanner, achieved that by just 0.03%. By contrast, 92.1% of Royal Caribbean Cruises’ traffic, on the other hand, came from mobile. Clearly, our research only adds to the view of mobile’s popularity showing no signs of slowing down.

Mobile-first vs responsive web design: What’s the difference?

So how do these two approaches to web design differ? We asked our Lead Engineer Mathieu for the answers…

• What is responsive web design?

“Responsive web design adapts desktop websites to mobile screens. It begins on the

desktop and then scales things down to smaller screens. The content, navigation, and layout all decrease to fit mobile screens – but they stay geared for “classic” desktop websites.

“Responsive web design helps website content fit the screens of different devices automatically, and in a way that makes it comfortable for users to read”.

• What is mobile-first design?

“Mobile-first design is more like designing a mobile app and adjusting the layout for desktop devices while retaining the traits of great UX, such as fast download speeds and streamlined content to engage the audience.

“The mobile-first method considers mobile users’ needs first, arises from what can be a more restrictive mobile end, and works toward expanding features for desktop”.

Best practices for building a mobile-first website

Want to make a start on crafting a mobile-first website for the first time? To make sure it has both form and function in spades, keep these best practices in mind before you begin your project:

Put the user first

Before you do anything else, putting yourself in your visitors’ shoes is essential. The research you carry out here lets you understand their difficulties and know what your site should do so it can solve the problems they have.

Make sure to research your competitors’ mobile-first sites too. What makes them work? What makes them not work? By doing this, you’re thinking like a user and can apply the positives you learn to your own site. And don’t be afraid to take the direct approach either: ask your visitors what issues they may be experiencing by drawing up surveys and sending them to your most loyal users.

Create a visual hierarchy for your content

On a mobile device, you only get so much space to work with, so it’s important to think about your content as a concise hierarchy. The key elements should be displayed prominently, while any distracting clutter should be removed. Then, order the content in a hierarchy according to its importance.

Keep titles on top and article previews above the fold, so readers know what to expect from content as quickly as possible. Image and video sizes should be optimised for mobile, while any long copy should be broken up into one-sentence paragraphs people can easily skim. Carrying out these will help from both a website performance and UX perspective.

Make the mobile-first elements stand out

On the downsized dimensions of a mobile device, you’ll want things like colours, and typography to leap off the screen. And rather than hyperlinks, which can be a bit fiddly to tap on such small screens, create powerful CTAs that catch your audiences’ eye instead.

Likewise, there are loads of other visual mobile-first elements you should aim to optimise too, including navigation buttons, geometric shapes and patterns, parallax scrollers and/or image backgrounds, and illustrations.

Improve your site’s loading speed

An intuitive mobile-first website should be quick to load, too. Trust us, mobile users just don’t have the patience these days – and a slow website is going to have them looking elsewhere very quickly.

Luckily, there are loads of methods you can use to improve the speed of your site. Give these a go:

• Compressing your images to reduce the file size without compromising their quality
• Make use of ‘lazy load’ so that website elements load separately in sequence – making parts of your website immediately visible to users
• Switch to safe HTTPS protocol (this’ll help with your SEO, too)
• Use a content delivery network (CDN) that loads the site’s content from the nearest cache to the user

Go minimal with your design

Like we said earlier, you’ll want to keep the key elements while getting rid of the unnecessary. Things like pop-ups and ads, which can disrupt the experience, can all be done away with, but think about these approaches too:

• Reduce the number of links in your navigation menu
• Keep typography simple and big enough to be readable
• Use as few pages on your website as you can
• Put a search feature in place
• Use two columns of content at most

Why mobile-first websites matter in the travel industry

If there’s anything we can take from our research, it’s that the numbers don’t lie. That 68.59% mobile traffic figure we mentioned earlier shows the tides turning in favour of handheld devices.

In other words, cruise companies should be doing everything they can to optimise their websites for mobile. A site that’s not suited for mobile can lead users to bounce from the site, leaving purchases incomplete.

Think about it: a cruise holiday is a large booking. Whichever line, destination or ship you go for, there are tons of different booking options you can customise your trip with. If they can’t find what they’re looking for, users will look elsewhere. Or worse, they reach the confirmation page only to realise they’ve made an error because of poor site design and UX.

==

For more information on what a website requires, check out our blog on how to write a website requirements and statement of work here. We’ve even thrown in some templates for you to download and help out with, too.

Download our Cruise Industry Research Document

For more insights into mobile-first design in the cruise industry, as well as details on social media, paid/organic traffic and more, you can download our cruise research document in full here.

Need the insights and expertise of a team of talented developers to help your mobile-first website come to life? BANC can help put your ideas into practice through innovative processes and thorough research. For more information, head to the homepage or give us a call on 0345 459 0558.