We recently looked at a list of things people expect to find on your website and a mobile friendly design is one of them. Mobile user experience is more important than ever as more than half of web traffic these days comes from mobile devices. This is why, we decided to explore this topic further by offering you a few tips on how to make your website mobile friendly. If the site is compatible with mobile browsers, it is more likely that you will get more visitors and you will make more sales.
- 1. Use a responsive template
- 2. Use large buttons and fonts
- 3. Optimize the images on the site
- 4. Improve the site loading speed
- 5. Keep mobile content simple
- 6. Avoid pop-ups and large text-covering blocks
- 7. Use the viewport meta tag
- 8. Turn off autocorrect on forms
- 9. Use a simple navigation menu
- 10. Add mobile-friendly contact information
- Some useful tools
- Wrap up
1. Use a responsive template
If you use a template for your website, make sure that it is a responsive one. Not all templates are designed to look good on a mobile device. Our Website Builder, for example, comes with fully responsive themes that you can use to build any type of website and preview every page in desktop, tablet and smartphone modes. Other applications like WordPress or OpenCart come with a large number of free and paid templates, but you will have to look at the features of each one to see if it is a responsive one or not. If you are about to purchase a theme, make sure that you check its specifications or view its demo first. If you use a theme that is not responsive by default, you will either have to put a lot of effort to modify it, or your site will simply look bad on a mobile device.
2. Use large buttons and fonts
Browsing pages should be a pleasure, not a burden. This is why, you should pick the size of the elements on a given page carefully. Few people will check more than a page or two if they have to keep zooming in and out because the font size is too small and hard to read, for example. Make sure that the text on your site is readable.
Buttons should not be small either. If they are hard to tap, or if you have a group of buttons that are hard to select, visitors will probably just go to a competitor’s site. It can be quite annoying if navigation is difficult and you end up tapping the wrong button just because buttons are simply not designed for larger fingers.
3. Optimize the images on the site
Reduce the images on your site to the smallest possible size that does not affect their quality. You don’t need images that are several megabytes in size and are 1500+ pixels wide for a mobile site. Such images may be suitable for a powerful desktop machine with a broadband connection, but not for a smartphone on mobile data. A lot of image editing applications these days have a “Save for web” option that will set a recommended resolution and size for your images.
Use a web-friendly format. JPEG is more suitable for photographs that have a lot of colors and compressing such an image comes with negligible loss of quality. PNG is better for screenshots that need to be zoomed in, and for logos with transparent backgrounds. BMP is an example of an extension that is not suitable due to its large size. You may come across suggestions to use Google’s WebP file format. While it offers a superior compression, it is still not supported universally, so some of your visitors may not see images in that file format.
Add lazy loading. In simple terms, this is an optimization technique that delays the loading of images until they come into view. You may have seen this technique on some websites – images show up as you scroll down the site, but not before that. If your site has more images, lazy loading can increase its loading speed significantly. If you use WordPress for your website, version 5.7 of the platform introduced this feature by default. For earlier versions, you can use a plugin. If you do not use WordPress, you can add a “lazy” attribute to your images:
<img src="image.jpg" alt="..." loading="lazy">
4. Improve the site loading speed
Fast loading speeds are a must not only for the desktop version of a website, but also for the mobile one. Along with optimizing your images, there are a few others steps you can take:
- Disable unnecessary plugins and pop-ups. Code that is loaded, but is not really needed, can only slow down your site.
- Reduce the number of URL redirects. Every redirect triggers a new HTTP request/response, adding to the overall loading time.
- Use server-side caching or a content delivery network. Text and/or images will be served faster if they are cached. Some hosting providers offer server-side caching. If you use WordPress, you can use a caching plugin as well.
- Combine files if possible. It is better to have one CSS file instead of six. The same is valid for JavaScript files. If needed, you can have one global file and one page-specific.
The above steps will give you a better loading speed, which will give your site a small boost in search engine results. You will also save some traffic to people that use metered mobile or Wi-Fi connections. If they are aware of this fact, it is more likely that they will come back to the site later.
Keep in mind that no matter how powerful a mobile device is, it cannot match the power of a desktop or a laptop. In addition, mobile data connection is usually slower than a standard cable/Ethernet/Wi-Fi connection. This is why, the lighter and faster a mobile site is, the better.
5. Keep mobile content simple
It is fine to display more content on the desktop version of a website, no matter if it is text or images. Most monitors these days are widescreen, and they can display a lot of content. The only issue with having too much content in this case is that visitors may be overwhelmed and may not find what they are looking for. This is not the case with mobile devices, though, as they offer limited space to display content. Visitors should be able to see the most important content at a glance or with no more than a few scrolls.
Most elements on a mobile site are usually with 100% width, meaning that all your content will be displayed vertically, one section after another. Unless you want people to scroll endlessly, you should keep only the most basic content. One image instead of a group of images with the option for a visitor to check all images; a short product description instead of a long one; an excerpt instead of a whole article – these are a few examples how you can keep content short and simple. You can leave the option for a visitor to see more in they are interested, but you should eliminate all non-critical elements. You can always add a link to the desktop version of your site as well.
If you have any infographics on your site, make sure they are short and simple as well. A very detailed one cannot be displayed properly on a small screen, so visitors will have to zoom in. Break one large infographic into a few short ones for easier viewing.
6. Avoid pop-ups and large text-covering blocks
Pop-ups are a way to get the attention of visitors - to ask them to subscribe to your newsletter or to show them a personalized offer, for example. This will work great on a desktop, but it can be really annoying on a mobile device. Pop-ups usually take most, if not the whole mobile screen. This way, instead of getting one’s attention, you will distract them as they will no longer see the site content. Things get worse if the closing button is hard to see, hard to press or for some reason does not fit the screen at all.
The above is valid for any block that may be covering the content of your site as well, including banners, cookie preferences, etc. Similar to any other element, you should keep things simple. For a cookie agreement, for instance, you can add a short note with a couple of options and a link for visitors to read more if they would like. There is no need to add a large block of text with a detailed explanation and multiple options that will cover the entire mobile home page.
7. Use the viewport meta tag
The viewport is the visible area of a web page that is displayed on a device. Pages look different on a desktop monitor and on a smartphone screen and if they are not optimized for mobile devices, browsers usually render them at desktop width, and then scale them down to the width of the mobile device. This makes pages quite difficult to read as you will have to zoom in and scroll in all directions. Adding the viewport meta tag will fix this for websites that are not optimized for mobile devices:
<meta name="viewport" content="width=device-width, initial-scale=1.0">The meta tag “tells” browsers how they should render a page when they load it by setting the width and the zoom level to fit the device. In other words, the tag instructs the browser how to control the scaling and the dimensions of a page.
8. Turn off autocorrect on forms
Many people use autocorrect when they type on their phones. While this feature is useful when they chat, it may slow them down if they have to fill out a registration/checkout form on your site. Their phone may try to change their personal name or street address to common words, so they will have to edit anything that has been autocorrected. To turn this feature off, use the autocorrect=off attribute:
<input name="form" type="text" autocomplete="off"/> While you are at it, you can also add spellcheck="false" to disable the annoying red underline, which isn’t really needed for a form on a mobile website.
9. Use a simple navigation menu
If your website has a lot of sections and you want to have a link to all of them on your primary menu, you can add them on the desktop version of your site. It may not be the best idea to have too many options on a menu, but the menu will look fine on a large monitor. You should definitely avoid adding many links on a mobile menu, though. Visitors will either have to scroll down the menu, or the options will be too small and will be hard to select. Either option will make navigation quite difficult and is likely to discourage people from browsing your site.
A mobile menu should be simple and should include only the main categories on your site. If needed, it can include a few sub-options, which should appear only if the main option is selected. Shorter names can also help as they are easier to comprehend when visitors browse on their mobile devices. Use “About Us” instead of “Read More about Our Company”, for example.
Of course, the best choice for a mobile website is a hamburger menu that will take as little space as possible. People are used to it, so full-text links should appear only if a visitor taps on the menu, and not by default.
10. Add mobile-friendly contact information
In case that a visitor wants to contact you, you should make it easy for them to do so. Any contact channel you add on the website should be easy to use on a mobile device.
- Phone number. Selecting and copying a phone number can be difficult on a mobile device if it is in plain text. Add a click-to-call number:
<a href="tel:+1.123456789">+1.123456789</a> This way, visitors can call you by tapping on the number instead of copying it or trying to remember it.
If you prefer text instead of a voice call, you can use the following:
<a href="smsto:+1.123456789?body=This+text+will+be+sent">Send SMS</a>- Email address. Make sure that the email address you list on your site can be clicked so that visitors don’t have to select it and copy it manually. As with the phone number, many people may find it difficult to select and copy only the email address, and then paste it to compose a new message. Use the mailto URI:
<a href="mailto:[email protected]">Link text</a> To make things easier for visitors, you can pre-fill other fields as well:
<a href="mailto:[email protected]?subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">Link text</a> - Contact form. Make sure that you require as little information as possible to be typed – pre-fill the subject and offer a simple drop-down menu with options. Filling out a contact form on a mobile site can be annoying and time-consuming if clients have to enter too much text.
Some useful tools
There are different tools that you can use to optimize your site and make it mobile friendly. Some of them can tell you if the site is already responsive and if it is not, they will suggest what steps you can take. Others can help you with the actual optimization.
One of the most popular ones is Google’s Mobile-Friendly Test. You should only enter the URL you want to check and you will see what parts of your site you can improve. You will also see a screenshot of the site on a mobile device.
If you are interested in seeing the site on different devices, you can check the developer-oriented Blisk browser. It is based on Chromium like other popular browsers such as Google Chrome, Opera and Microsoft Edge. What makes it unique is that it features a number of built-in device templates – smartphones, tablets and desktops with various operating systems and screen resolutions. This will allow you to preview your website on multiple devices simultaneously. You will save time and you will make sure that your site is compatible with devices from different vendors.
TinyPNG and TinyJPG are online image compression tools that can decrease the size of an image several times. They offer a compression technique that eliminates certain colors selectively, saving precious bites. You will not notice any difference between the original image and its compressed copy, especially on a mobile device. The company behind the web tools offers WordPress and Magento plugins as well. This way, images that you upload will be optimized automatically, which will speed up your site and will save you time.
Wrap up
Mobile traffic is on the rise and people are so used to mobile-friendly sites these days that they will probably leave a site that is not optimized for a mobile device. Whether they want to check some information or order something online, it is very likely that they will use their phone or tablet. This is why, your website should offer them a good mobile user experience. A responsive site will also help your site rank better in search engine results.
Mobile browsers are different from desktop ones, though. They use less stable connection and rely on more limited system resources. This is why, standard site optimization may not be enough, so you have to put some effort to make your site mobile-friendly. We hope that the tips above will help you in this endeavor and will bring you more visitors and potential customers.
