Mobile devices are ubiquitous, and it’s no secret that they have changed the way we interact with the world around us. Today, more people access the internet on their mobile devices than on desktop computers, and this trend is only going to continue. This means that if you have a website, it’s crucial to ensure that it looks and functions great on mobile devices.
But designing a website for mobile devices can be challenging. With smaller screens and touch-based navigation, there are a lot of factors to consider. It’s not just about making sure the site is responsive, it’s about creating an experience that is intuitive, efficient, and enjoyable for users on mobile devices. In this article, we’ll be discussing 9 don’ts to ensure your website works great on mobile devices. These tips will help you avoid common mistakes that can make your website frustrating to use on mobile devices. So, whether you’re designing a new website or optimizing an existing one, read on to learn what to avoid when designing for mobile devices.
1. Don’t use tiny fonts that are hard to read on a mobile device.
Using tiny fonts on a website is a sure-fire way to frustrate mobile users. With a smaller screen, it can be challenging to read text that is too small. Not only can it cause an unpleasant user experience, but it can also negatively impact the website’s usability and credibility. Users are likely to leave the site quickly if they find it difficult to read the content, leading to a higher bounce rate and lower conversion rate. As a general rule, it is suggested to use a minimum font size of 16 pixels for body text on mobile devices. However, font size can vary depending on the typeface and design of the website, so it’s important to test how the text appears on different mobile devices to ensure it’s legible.
2. Don’t use too many images or graphics that slow down the site’s loading time on a mobile device.
When designing a website for mobile devices, it’s important to keep in mind that users often have limited bandwidth and slower internet speeds than they would on a desktop computer. Therefore, using too many images or graphics that are large in file size can significantly slow down the loading time of a mobile website, which can lead to frustration and potentially cause users to leave the site. To avoid this issue, it’s recommended to use a minimal amount of images and graphics on mobile websites, and to optimize them for the web by compressing the files to reduce their size without sacrificing quality. As a general guide, for audiences with an average mobile internet connection speed of 3Mbps (like in Malaysia), it’s recommended to keep the total size of a website under 1-2 MB for optimal loading speed.
3. Don’t use pop-ups or overlays that can be difficult to close on a mobile device.
Using pop-ups or overlays can be frustrating for mobile users, especially if they are difficult to close. These elements can interfere with the user experience, making it hard to navigate and find the information they are looking for. This can lead to higher bounce rates and lower engagement levels. Moreover, pop-ups or overlays that cover the entire screen can be particularly troublesome on smaller mobile devices, and users may have difficulty locating the close button or navigating away from them. Therefore, it’s important to avoid using these elements altogether, or to make sure they are easy to close and don’t interfere with the user’s ability to interact with the website.
4. Don’t use too much text or make paragraphs too long, as this can be difficult to read on a small screen.
When designing a mobile-friendly website, it is important to keep in mind the limited screen space available on mobile devices. Using too much text or long paragraphs can make it difficult for users to read the content and navigate the website. It’s recommended to break up text into shorter paragraphs, use headings and subheadings to organize the content, and include bullet points or numbered lists to make the information easier to digest. Additionally, using a legible font size and colour contrast can make reading text on a mobile device easier and more enjoyable for users. By prioritizing readability and organization, website owners can ensure that their content is accessible and engaging on mobile devices.
5. Don’t make the buttons or links too small or too close together, making it difficult to click on them with a finger.
It is important to consider the size and spacing of buttons and links when designing a website for mobile devices. If they are too small or too close together, it can be difficult for users to click on them with their fingers. This can lead to frustration and a poor user experience. To avoid this issue, it is recommended to use larger buttons with ample spacing between them, making them easy to identify and click on. Additionally, providing visual cues such as colour or animation can help draw attention to important buttons or links. By considering the size and spacing of buttons and links, you can ensure that your website is easy to navigate and use on a mobile device.
6. Don’t use autoplay videos or animations that can slow down the site’s loading time and drain mobile device battery life.
Autoplay videos and animations may seem like a good way to grab visitors’ attention, but they can actually do more harm than good on mobile devices. Not only do they increase the site’s loading time, but they can also drain the mobile device’s battery life. Visitors may also find it frustrating if the video or animation starts playing without their consent, especially if they are in a situation where they need to be discreet, such as in a public place. It’s best to avoid autoplay videos or animations altogether or, if they must be used, ensure that they can be paused and that there is an option to turn off autoplay.
7. Don’t forget to optimize the site for mobile SEO, such as by using mobile-friendly keywords and incorporating local search terms.
Optimizing a website for mobile SEO is crucial to ensure it performs well on search engine results pages (SERPs) on mobile devices. One way to do this is by using mobile-friendly keywords that are more likely to be used on a mobile device. It’s also important to incorporate local search terms if the website is aimed at a local audience. This includes using location-specific keywords and including local business information such as the address and phone number. By optimizing for mobile SEO, the website has a higher chance of appearing at the top of search results and driving more traffic to the site.
8. Don’t ignore the importance of a mobile-first design approach, which ensures that the best version of the website is for a mobile device’s screen.
In today’s mobile-centric world, it’s crucial to prioritize a mobile-first design approach when creating a website. This means that the website is designed and optimized first for mobile devices, and then adapted to larger screens. Ignoring a mobile-first design approach can lead to a frustrating user experience for a majority of the users, lower search engine rankings, and ultimately, fewer visitors to the site. Therefore, it’s essential to consider a mobile-first design approach when creating a website to ensure that it is optimized for mobile devices and provides a positive user experience.
9. Don’t forget to test the site on a variety of mobile devices and browsers to ensure it functions properly for all users.
It’s important to remember that not all mobile devices and browsers are created equal. Testing your website on a variety of devices and browsers is crucial to ensure that it functions properly for all users. Issues with compatibility can arise, such as certain features not working or pages not loading correctly. By testing your website on various mobile devices and browsers, you can identify and fix any issues before they affect your users’ experience. Additionally, testing can also help you optimize your site’s performance and loading time, which is crucial for a positive user experience on mobile devices.
So, these are the 9 don’ts that you should avoid to create websites that work great on mobile devices, and most importantly, provide a seamless and pleasant browsing experience for mobile users. Use this list as a reminder when creating your websites. For further reading on mobile-friendly website design, here are some suggested references:
- Mobile Design and Development: Practical concepts and techniques for creating mobile sites and web apps by Brian Fling
- Designing for Performance: Weighing Aesthetics and Speed by Lara Callender Hogan
- Responsive Web Design with HTML5 and CSS: Develop future-proof responsive websites using the latest HTML5 and CSS techniques by Ben Frain
Naim Zulkipli
20 February 2023
-----
Need help with mobile-first website development? Contact AMZ IT Solutions.
All posts in this blog are my own personal views (unless explicitly mentioned otherwise) and are not to be associated with any organization or institution related to me.