Quick summary
A mobile-friendly website isn’t optional anymore: most people browse on phones, and Google uses mobile performance to judge rankings. Make your site responsive so it automatically adapts to any screen size, prioritise easy navigation and readable text, optimise images and media for speed, and avoid intrusive pop-ups. Test regularly on real devices to ensure mobile visitors get a smooth, usable experience that helps them stay, engage, and convert.
Why is a mobile friendly design important?
Mobile friendly design is super important for websites because many people use their phones to browse the internet. If your site looks great and is easy to use on a mobile phone and tablet computer, your visitors will stick around longer and actually read your content.
Your website needs to be mobile friendly because it’s crucial for search engine optimisation (SEO). Search engines, like Google, want to provide the best possible experience for users. Since most people use their phones to browse the internet, a search engine prioritise websites that work well on a mobile phone.
If you have a mobile friendly site, it has a better chance of ranking higher in search results. This means more visitors, more enquiries and/or more sales!
The switch: In November 2016, for the first time in internet history, more people used the internet using their phone than their PC.
Responsive design does NOT mean your website uses the same design on mobile phones and desktop PCs.
The Top 5 Mobile website design myths
- Myth: A mobile website should be a simplified version of the desktop site. Bust: Your website should still provide a full experience, not just a limited version of the desktop site. Content should be streamlined, but not eliminated.
- Myth: A mobile user is always on-the-go.
Bust: Not all mobile users are in a hurry. Many use their smartphones while relaxing at home or during downtime. Design your mobile site with both quick-browsing and leisurely users in mind. - Myth: A mobile screen is too small for important content.
Bust: Effective design techniques can present important content clearly and concisely. Mobile users should have access to the same crucial information as desktop users. - Myth: A responsive website is only important for bigger businesses.
Bust: Most websites themes (WordPress, Wix etc.) come with mobile version responsiveness built in! - Myth: A mobile user does not convert.
Bust: Mobile users can and do convert! But only if your website is seamless and user-friendly.
What does responsive design mean?
“Responsive web design” (also known as adaptive design) are terms that can be confusing to understand.
Basically, this means that you create a website that can adapt and look good on any device, phone, tablet, or computer.
Your website changes its layout and design automatically based on the screen size and the device’s orientation (regardless of how users hold their phone – vertically or horizontally).
This means you’re giving your website visitors the best chance to read your content and look at the images – no matter what device they’re browsing on.
Stéphanie Walter, CC BY-SA 3.0, via Wikimedia Commons
What does mobile-first approach mean in website design?
When building your website, you start by designing and optimising your website for mobile devices like smartphones.
Then you adapt and scale the design for larger screens like tablets and desktop computers.
By doing this you understand the importance of the mobile user experience. By designing your website with a mobile visitor in mind right from the beginning, you ensure that your site works well and looks great on a small screen, and then you can enhance the experience for users on a larger device.
Does this apply to tiny businesses who build their own website?
Technically yes, but I understand how difficult it can be designing a website without the experience of a web designer. You’re so happy it looks great on a PC or on your laptop, but when you check it on your phone, it’s not quite the same!
You can use the LT browser on your computer which you can download and install for free. It’s super easy to use and shows you instantly what your website looks like on different devices without having to refresh your mobile screen after every website change you make.
Essential Mobile Design Tips: What to Consider for a Smartphone-Friendly Website
- Responsive design: Make sure your website automatically adjusts its layout based on the screen size width and orientation.
- Mobile-first approach: Start designing for mobile devices and then scale up for larger screens.
- Easy navigation: Create intuitive and touch-friendly menus and buttons for smooth navigation.
- Fast loading times: Optimise images and media files to reduce loading times.
- Readable text: Choose font sizes that are easy to read. Make sure the line heights is big enough so that your lines of text are not too close together.
- Touch-friendly: Use buttons and forms that can be used on touchscreens.
- Avoid pop-ups: Don’t use intrusive website elements that disrupt the user from finding the information they visited your website for.
- Content: Keep content concise and focused. Keep your content user-centred (why are they here?)
- Regularly test your website on different devices and browsers to ensure all content can be accessed.
What does mobile friendly navigation mean?
A mobile friendly navigation consists of buttons and other navigation elements which are easy to use on a mobile device.
Make your navigation as simple as possible, clear and touch-friendly to increase your users’ mobile experience. Your users want to find information quickly and easily with just a few taps on their phone screen.
How to optimise images and media for a mobile friendly website
- Use the correct image size: Make sure images fit well within the screen dimensions of a mobile device.
- File formats: Use file formats like JPEG or WebP for images and MP4 for videos.
- Compress images and media files to reduce file size without losing quality.
- Lazy loading: Set up your website design so that images and media only load when they’re about to come into view. This improves web page load times.
- Use tools or plugins to automatically optimize images and media files.
- Add descriptive alternative text to images for better accessibility and SEO.
- Don’t auto-play videos or audio files, as your visitors can be annoyed by this. Also, you don’t know where they open your website – on the train or in the office – you don’t want any music or noise coming from your website as soon as it’s opened.
- Test on different devices and check how images and media display on a smaller screen.
Check out the Ultimate Guide to photos on your website.
What are touch-friendly website interface elements?
Make sure that buttons, menus and forms are designed to be easy to use on touchscreens.
Make these elements large enough so your website visitors can tap them with a finger. Check they are spaced out enough to avoid accidental taps, and they respond well to touch gestures.
Learn more about Local SEO for Service Businesses on our Resource page
