WEBSITE DESIGN GUIDE - ENSURING YOUR WEBSITE IS COMPATIBLE ON MOBILE AND ALL BROWSERS

 

Whilst website builders do a great job of making your site compatible on a wide range of devices and browsers, it’s not until you rigorously test your site in different ways that you identify issues that could dampen the visitor experience.

CONTENTS

 

1. INTRODUCTION

Return to contents

Visualise your favourite website. I’m going to make a prediction: I bet you were visualising how it looks on either a desktop or a laptop. I’m also going to make a second, safer, prediction that you likely built your own website using one of these devices.

I imagine that I’ll have got at least one of these predictions right for the vast majority of people reading this guide. Regardless, the reality is that most of the time we only tend to think about how our website looks to us, and not about how it looks to others. However, there are a couple of common reasons why a website might look different to different visitors:

  1. Different visitors use different browsers - for example Chrome, Firefox, Safari, Edge or Opera. At its core, a browser is a bit like a translator reading a language we don’t understand. In this instance, the browser is reading the programming languages the web page is written in (such as HTML, CSS and so on) and translating that into a layout populated with images, video and text. Just like when translating any language, the browser (or translator) is going to translate in a specific way which might be ever so slightly different to how another translator would do it. Most of the time this won’t make a huge difference, but sometimes these differences will be more pronounced.

  2. Different visitors use different devices - for example mobile, tablet, desktop, laptop and even some of the more niche internet browsing devices such as eReaders and games consoles. The biggest factor that determines how a page will look on each of these devices is the screen size of that device. Small screen devices (like mobile) don’t typically just shrink down your website, they instead show a different version of it that is optimised for that device. This leads to your site looking noticeably different on different devices. 

To their credit, the most popular website builders are incredibly strong on this front. A lot of hard work goes on in the background to ensure your website is compatible across as many browsers and devices as possible, and this functionality is automatically enabled when you first begin building. Additionally, their pre-made templates will all have been specifically tested across different browsers and devices, and optimised accordingly. All of this means that you don’t typically have to do much to ensure wide browser compatibility, and relatively little to make your website at least display nicely across all device types.

For this guide, we’re going to focus predominantly on the experience that visitors get when they access your website on their mobile device. There are a number of reasons for this:

  • The mobile version of your website will look the most distinct and different to any other version of your site.

  • Mobile optimisation is typically (but not always) an after-thought and something most amateur designers spend little time thinking about when building their sites.

  • Whilst it is a popular device to use, browsing the internet is typically more difficult and less efficient on mobile, so we need to work harder to deliver a good experience to users of those devices.

 

2. THE SINGLE MOST IMPORTANT BIT OF ADVICE

Return to contents

Before we deep-dive into the mobile experience, I’ll start with the best bit of advice I can give in this area. Despite its simplicity, it will be of huge benefit when thinking about the visitor experience on all devices and across all browsers.

Test your website by experiencing it in a different way to how you normally would

The best way to test how your website performs on different browsers and devices is to experience it first hand. Get hold of your phone, get hold of a tablet, try it on different screen resolutions on your laptop or desktop, and try it using multiple browsers. To help you simulate an actual visitor experience; set yourself a mission, such as looking to research a specific product, and visit your site with that in mind. Note down how your site appears when accessed in different ways, and where in the journey you run into pain points and difficulties.

Once you have done this with a good number of different devices and browsers, you can then turn to automated testing to uncover things you haven’t found, using ways of access you haven’t tried. There are a lot of good automated testing tools available online, many of them free (search 'website compatibility test'). You don’t need to spend money here, but spending a little can help speed up the process and deliver better results.

Once you have an understanding of how your website performs when accessed in different ways, you can then make changes to improve it. If you don’t do this testing, you will never know what needs to improve, and issues and problems could continue forever with you blissfully unaware.

 

3. MOBILE COMPATIBILITY

Return to contents

Mobile compatibility and mobile optimisation (how well a website looks and behaves on a mobile device) has come on leaps and bounds since phones were first able to access the internet. Initially, phone browsers would just shrink down the website they were trying to load. Now, most sites are specifically designed to render differently on mobile, and it’s incredibly rare to come across an unoptimised mobile site (when visiting any respectable website anyway).

As mentioned earlier, the website builders typically make mobile optimisation pretty easy for you, getting you most of the way towards having a great mobile site right off the bat. As such, it is perhaps not surprising that many mobile websites go untested by their designers. However, delivering a good mobile experience is too important to ignore, which warrants putting in extra time and effort to make sure it isn’t just good but absolutely brilliant. If you don’t believe me, consider this:

• Mobile visits now account for half of all visits.

• Many sources were announcing that mobile visitation had overtaken desktop visitation from as early as 2016.

• Looking at the trend of mobile growth over time, it looks to be showing little sign of slowing.

• Google rewards fast, mobile-optimised websites with a better page rank.

• Your mobile experience can have a big impact on how visitors interact with and perceive your brand.

So what do you actually need to do to optimise your mobile site? The answer is that it really depends.

Some website builders (such as Wix) offer you the ability to customise your mobile site directly. This works by taking a linked copy of your desktop site, translating it into a mobile-friendly format and giving you extra control to finesse the mobile design. For example, you can play around with where things are positioned on your mobile page, and you can hide and show different elements on it.

Other website builders don’t have this functionality but provide themes and templates that are already mobile optimised and look great on mobile from the get go. (Of course; looking great and being great to visit are not the same thing).

If you have the customisability that sites such as Wix offer, then it will be easier to arrive at the perfect mobile site through tailoring it specifically for that device.

If you have built your site from scratch then you have the option of how to approach this - but building and maintaining a second, mobile version of your site is time consuming when you're having to do it yourself.

If you don’t have this customisability then you might have to work a little bit harder by ensuring your desktop site is designed in a way that then translates into an effective mobile site. To achieve this, you might benefit by adopting a philosophy called ‘mobile first design’. This is the idea that your design should start by considering what will work on mobile - essentially making the desktop version a larger version of the mobile site (rather than making the mobile version a scaled back version of the desktop site). This is a sensible approach not only because of the growing importance of mobile, but because many best-practice mobile design concepts are generally good design concepts that will help you improve your desktop site as well.

So, to recap:

  • If you can customise your mobile site directly: understand what needs to be changed and make those changes to the mobile version of your site specifically.

  • If you can’t customise your mobile site directly: understand what changes you need to make to the mobile version of your site and make those changes to the desktop version of your site. These will then get translated into the mobile version of your site, fixing the issues it previously had. As you can’t make changes to the mobile version directly, this requires a more careful balancing act between the needs and expectations of your desktop and mobile visitors.

 

4. BEST PRACTICE MOBILE DESIGN

Return to contents

So what is it that you specifically need to do or think about in order to deliver a great mobile experience? Just like with the previous guide on accessibility, the following list is a starting point to get you thinking and will be short on technical implementation guidance. As always, you’ll be able to learn a lot more through web search and your website builder’s support pages:

  • Keep your text concise. Bounce rates are higher on mobile sites and average time spent on them is lower. You have less time to influence and persuade your visitor on mobile, so make every word count.

  • Prioritise the position of key content. To ensure your visitor finds the most important parts of your content quickly, carefully consider its position on your mobile site. Given you can see relatively little on a single mobile screen, and mobile pages tend to be a lot longer than those on desktops to account for this, it’s easier to miss things than on desktop. Carefully consider what your most important content is, and put it at the top to reduce the risk of it being missed.

  • Consider the fold. Think about what content a mobile visitor can see when they first load up your mobile site. Is anything particularly important missing from their view? What can be seen just below the fold? Again, prioritise the order of your content so the visitor can see the most important bits first.

  • Cut back on your content. It is really hard to show the same amount of content on mobile devices as it leads to incredibly long pages that visitors will never want to fully explore. Be as selective as you can about what you do and don’t show. If there is no, or little, visitor benefit to showing something then don’t show it, or use it on another part of your site.

  • Use collapsable accordions. Accordions are a type of user interface that let visitors expand and hide the content that sits underneath them, and are a good way to simplify the page and help visitors navigate it quicker. As default, accordions are typically set to hide their content, which allows visitors to browse through accordion headers until they find the content that’s right for them. They can then expand out the accordion to show the content itself. 

  • Review how your menu bars work. In the navigation guides we covered the different types of navigation menus available to you as a designer. The hamburger menu (the one with the three horizontal lines) is still king on mobile as it saves a lot of space on the screen. Unless you have a radically better way to display a menu on your mobile site; seriously consider using one.

  • Keep things large. This goes for interface elements (such as buttons) but also for text and images. Mobile screens are smaller, and having to zoom in before you can see the content or interact with it does not make for a good experience.

  • Leave sufficient space between elements. A visitor’s finger and thumb are much less precise than a cursor on a desktop, and mistakes (specifically, misclicks) can happen as a result. Avoid having too many buttons near one another or you run the risk of the visitor clicking the wrong one.

  • Keep buttons in the middle of the page. Things at the edges of a mobile screen are harder to select (if you don’t believe me, try it!) so avoid putting buttons there.

  • Take advantage of mobile devices’ unique features. For example, you can load things in a specific app that the visitor might have, you can format phone numbers so they can automatically start a call when selected and you can enable voice search in your search bar.

  • Avoid using pop-ups at all costs. We’ll cover pop-ups in more detail in the final section, but they are particularly disruptive on mobile. If you’re going to use them (which you shouldn’t) make sure they are the absolute last resort for the job you’re employing them to do.

  • Avoid asking the visitor to fill in long forms. Inputting text on mobile takes considerably longer than on desktop and is more prone to error. Design your forms so that they require as little input from the visitor as possible. Whilst you’re there, disable autocorrect on them as this is particularly frustrating when a visitor is typing in things like names and addresses.

  • Consider image resolution and format. You want your images to look clear and crisp on all screen sizes. Of course you could always upload the highest resolution image you can find, but this will lead to slower loading times - particularly on mobile. Some website builders will automatically compress your images for mobile, or allow you to upload a separate mobile image file. Use of SVG images (Scalable Vector Images) is also worth considering as these files automatically scale up to look good on all resolutions, and typically have a lower file size than traditional image formats.

  • Assess your website’s loading time. Mobile internet connections remain less reliable and slower than fixed connections in most parts of the world, exacerbating frustrations with slow loading pages. Check how your site performs and make amends accordingly (see the guide on ‘General navigation’ for advice on how to achieve this).

  • Remove any Adobe Flash elements. This technology is in decline and will be phased out by 2020 anyway so it’s unlikely you’re currently using it. If you are, stop immediately as Flash isn’t supported on the majority of mobile devices.

  • Give visitors the option to switch to the full desktop site. Browsing in this way might be the preference for some, it might open up access to a wider range of content (if you’re hiding certain things on mobile) or it might be a good fallback option for visitors who are struggling to use your mobile site (of course it’s far preferable that you just fix any issues they are experiencing).

 

5. TO RECAP...

Return to contents

The biggest error you can make when designing a site is not to thoroughly test it. You might spend time and realise that it was working fine all along, but it’ll be worth it for the times where you spot something that could damage the experience of some of your visitors.

Test, test and test again. Get hold of other devices and browsers and access your site using them. Do this whenever you make substantial changes to your site. Invest the time in this area, particularly in mobile, and you will reap the rewards.

 

6. CHECKLIST

Return to contents

  1. Test your site extensively on devices and browsers that you don’t use yourself. Remember; your site might look nice when accessed in these ways, but it might not offer a strong visitor experience.

  2. Research the level of control your website builder gives you over your mobile site in order to understand how to make changes to it.

When designing for mobile:

  1. Keep your text concise, making every word count.

  2. Elevate the position of key content to ensure your visitor finds it quickly.

  3. Cut back on content, or use it on another part of your site, if your page feels too long or intimidating.

  4. Use collapsable accordions to simplify your pages and help visitors navigate them quicker.

  5. Strongly consider the use of the hamburger menu on mobile.

  6. Keep your text, images and interface elements (such as buttons) a decent size.

  7. Leave sufficient space between different elements on the page. 

  8. Keep interface elements in the middle of the page and away from the edges. 

  9. Take advantage of the features unique to mobile device browsers and operating systems (such as voice, phone and other app integration).

  10. Avoid using pop-ups at all costs.

  11. Avoid asking the visitor to fill in long forms.

  12. Disable autocorrect on forms requesting data like names and addresses.

  13. Carefully consider your images’ resolutions and formats, leveraging the SVG format where beneficial.

  14. Assess your website’s loading time and optimise your site accordingly.

  15. Remove any Adobe Flash elements you might be using.

  16. Give visitors the option to switch to your full desktop site if they prefer.

Found this content valuable?

Want to get in touch?

Contact us by email or Twitter.