How to Create a Mobile-Friendly Website
It’s 2019 and if you are launching a website you will be at a significant disadvantage if you do not have a site that can easily be viewed, interacted with and eventually able to easily receive payment. If you fall into this category of websites, you are missing out on a lot of opportunities. If you’re new to web design, or even if you want to give your designer some areas you want to focus on, here are some tricks to help you to improve the mobile-friendliness of your website.
Image by Jan Vašek from Pixabay
-
- Use Good Fonts. Font legibility is important, but a legible font means nothing if it does not load on your website. If you use a custom font, your site can seem sleek and professional, but this requires mobile users to download the font package. More often than not, they will not and instead will be presented by a blank space rather than your sleek text, which can make your site seem very unprofessional. To get around this you can either use non-custom fonts or use Google Font Loader to display test in a default font while the font is downloading. You can do this simply with two CSS rules. In the first use the WebFont.load function.
- Know That Fixed Positioning isn’t a Good Fix. Having a header with a fixed position can cause the unique mobile problem of obscuring the screen when a user zooms in on your site. The best way to avoid this is to disable fixed positioning.
- Be aware of word wrapping. If you’re accessing a mobile site, some text or data that fill the page well in desktop view can extend off the mobile view. You can fix this by adding the span style ‘word-wrap’ to make the text break to the next line when it reaches the edge of the page.
- Know your Widths. Find your minimum viewing size by narrowing your desktop browser to as narrow as it can be while still functioning. To ensure a mobile user doesn’t have to zoom in to your site, take this minimum viewing size and set it as your website’s viewport in your page’s head.
- Be Aware of Forms. On a phone, autocorrect is the default for all typing unless the user takes the time to turn it off themselves. This can make form completion annoying if the personal information required for a form is not found in their mobile dictionary (e.g. if they have an unusual name). You can turn off autocorrect simply by coding ‘autocorrect=off’ in your form input tag.
- Finally, test everything. You need to test your mobile site as much as you test your desktop site. Look for any areas that slow down the user’s journey and interrupt their progress. Payment is a crucial example of this – a whopping 66% of mobile customers abandon their purchase because payment is not streamlined to their mobile device. The digital testing experts Digivante recommend all sites test payment integrations daily to maximize conversion rates.
Creating a mobile friendly site is not really an option in today’s digital landscape. If you are not optimized for mobile you can lose a lot of customer trust as you appear unprofessional and unprepared. Don’t miss out on business due to such a preventable error – implement these specific tips to help mobile users enjoy your site effortlessly.
Author: Carol Trehearn
