How to make your website mobile-friendly: 10 essential tips for optimization

We often talk about the need to make sure that your website is 'mobile friendly' or 'optimized for mobile devices', but you don't often hear about the ways in which to do so.

So, in this blog we decided to share 10 essential items for you to focus on so that you can ensure your website is mobile friendly and is as accessible on phones as it is on desktops.  

But before we dive into it, let’s define what mobile optimization is and why it’s so important.   

What is mobile optimization?  

Mobile optimization or ‘mobile friendly’ simply means that a website has been designed to properly fit more screens other than the typical desktop (think phones and tablets).

When a website is optimized for mobile devices or is “mobile friendly" then this means that you can browse through and interact with the website on a cell phone or tablet just as you would on a desktop.  

Why is mobile optimization important? 

Having a ‘mobile friendly’ site is vital in today’s online world. According to Statista, over 5.4 billion people worldwide use mobile devices to access the internet. 

"As of the first quarter of 2024, around 95.9 percent of global users accessed the internet via mobile phones, while 93.7 percent reported doing so via smartphones. By comparison, internet access via laptop or desktop was reported by almost 62.2 percent of respondents." - Statista

Ultimately, this means that if your website isn’t optimized for mobile, you’re missing out on a massive portion of your potential audience.

How to make a mobile-friendly website 

1. Choose mobile-responsive layouts 

A responsive layout allows your website to adjust its size and design to suit the user's device and screen size. It can switch between screen sizes, showing relevant content while adjusting the design - like moving from a two-column website layout on a computer to one-column on a phone. 

This sounds obvious but the amount of times we come across websites that aren't optimized for mobile devices and tablets in 2024 is wild.

Just take a look at DHL's site on mobile (and they are a global leader in the international shipping, courier services and transportation industry). Their mobile optimization is a complete mess for being a global leader.

2. Simplify navigation 

When people are searching for something on a website using their phone, they're usually searching for something specific—a quick answer, hours of operation, the address or a customer service number. In these cases, they want to find the information they need as quickly and as easily as possible.   

Therefore, it’s a good idea to consider what your mobile visitors are searching for when they land on your website and make sure it's easy to spot on your mobile homepage (or easy to navigate to).  

You can use analytics (like Google Analytics) to learn more about what mobile visitors do while on your website and what they’re seeking. This will allow you to see how mobile visitors interact with your website to help you better optimize your mobile design. 

side tip: this is also why it's a really good idea to set up a Google Business Profile if you haven't already done so. Google Business Profile is super beneficial because it allows your visitors to find exactly what they're looking for without having to leave the search results page.

But honestly, there’s so many more reasons to set-up a profile so we’ll list some for you below: 

• increased visibility: your business becomes more visible on Google Search and Maps, making it easier for potential customers to find you when they're searching for services or products you offer
  

• customer engagement: a Google Business Profile allows customers to leave reviews, ask questions, and engage with your business directly, which helps to build trust and credibility. Make sure you go through your reviews and respond to them!
  

• local SEO boost: having a well-optimized Google Business Profile improves your local search ranking, making your business more likely to appear in the "Local Pack" of search results (think, when someone searches "restaurant near me" - you have a better chance of appearing in these results)
  

• free advertising: it’s essentially free advertising space on the world’s most popular search engine, giving you the opportunity to showcase your business without any direct cost
  

• stand out from others: a well-maintained profile with photos, reviews, and regular updates can set your business apart from competitors who may not be using this tool as effectively as you are.  

3. Get rid of those annoying pop-ups

We can almost guarantee that you've come across a pop-up or two in all of your online browsing history that completely annoyed you because of the timing that it popped up or because you couldn't find where the 'x' button was to close out of it.

Here's a scenario for you - imagine someone lands on your website for the first time, they've never interacted with your brand before, and within the first three seconds of landing on your website, a pop-up occurs asking them to subscribe to your newsletter. Do you really think they're going to subscribe in that moment? Probably not. They have no idea what they're even subscribing to!

Annoying your website visitors is exactly what you want to avoid so let's talk about some tips to keep in mind when designing and enabling the pop-ups on your website, specifically for mobile (however, a lot of this is also applicable to the desktop version as well):

• use timed or scroll triggered pop-ups:
  

  • timed pop-ups: set your pop-ups to appear after the user has spent some time on the page (e.g., after 20-30 seconds). This gives users a chance to engage with the content and check out the vibe first before being interrupted.
    

  • scroll-triggered pop-ups: instead of showing pop-ups immediately or after a set amount of time, trigger them when a user has scrolled a certain percentage of the page. This ensures that the user is already invested in the content before being presented with a pop-up.
    

• make exiting your pop-up EASY:
  

  • visible close button: there's little to nothing more annoying than being on a website and stuck on a pop-up because you can't figure out how to exit out of it. So, ensure that the close button is prominently visible and easily tappable. It should be large enough to tap without difficulty and placed in a common location, such as the top right corner.
    

  • tap outside to close: another easy way make your pop-ups mobile-friendly is to allow users to dismiss the pop-up by tapping outside of it (in addition to the visible close button). This provides an additional way for users to close the pop-up without having to search for the close button.
    

• design for smaller screens:
  

  • full-screen pop-ups: avoid using full-screen pop-ups on mobile as they can overwhelm users. Instead, use smaller, non-intrusive pop-ups that cover only a portion of the screen.
    

  • minimalist design: overcrowded pop-ups can become messy and difficult to decipher; instead, ensure the pop-up design is clean and straightforward, with easy-to-read fonts and clear calls to action. Avoid overcrowding the pop-up with too much text or too many images and elements.
    

• contextual relevance:
  

  • tailored content: ensure that the content on the pop-up is relevant to the user’s current activity on your website. For example, if a user is reading a blog post, the pop-up could offer related content or a newsletter sign-up related to that topic. Another example - if a user is browsing through the shop, the pop-up could offer a limited-time discount for those who subscribe.
    

• limit the frequency:
  

  • capping pop-up frequency: avoid showing pop-ups too frequently to the same user. Implementing frequency caps, such as showing a pop-up only once per session or once a day, can prevent users from feeling bombarded while on your website. note: you can also do things such as have a place to subscribe to your newsletter in other areas of your website, such as the footer or the contact section, and avoid having a pop-up interrupt the user.

side tip: regularly perform A/B testing on different pop-up designs and triggers to see what works best for your audience. Testing can help by giving you valid data that will help you to improve the experience (if necessary) to maximize conversions without annoying your website visitors.

4. Use fonts that are easy to read 

Choosing clear, simple fonts helps people easily digest your content - which helps improve readability and overall engagement with your site. 

here are some things to keep in mind: 

• stick to standard fonts: when you stick to the 'standard' fonts, you can help to prevent delays caused by font downloads on visitors' browsers, which can slow down your website loading time, particularly on phones
  

• adjust font size for phone screens: the desktop-recommended font size of at least 14 pixels might not suffice for smaller screens; test it on the mobile version of your website to ensure legibility; but we recommend at least 16 in font size   
  

• opt for black text over multiple colors: to help to ensure visibility, especially with varying backgrounds   
  

• utilize limited space effectively: on mobile, make sure to bold, CAPITALIZE or increase the font size of text and important information to enhance readability, particularly on a small screen where text can easily be scrolled past and lost in the sauce

5. Hide elements when necessary 

Given that phones and tablet screens are considerably smaller than desktops, you may come across a scenario where you might have to 'hide' an element from the mobile or tablet version of your site in order to enhance the user experience (UX). 

here are some things to keep in mind:   

• clarity over clutter: because the screen sizes are significantly smaller for phones and tablets, sometimes displaying too many elements can clutter the screen and make it difficult for visitors to find what's essential   
  

• readability: text-heavy sections or complex layouts might be readable and fun on a desktop, but they can become challenging to read and digest on smaller screens; so, by hiding non-essential elements, you can ensure that the vital information remains clear and accessible for your website visitors  
  

• focused content: people who are browsing on their phones typically have much different needs than someone browsing on a desktop - people on their phones are typically looking for information or trying to perform a specific task quickly; so, by hiding irrelevant content on the mobile version, you can focus their attention on what matters most to them like contact information, hours of operation, call-to-action buttons, or key services/prices

6. Strategize CTA buttons 

Buttons are essential elements, especially when prompting a call-to-action (CTA) and directing visitors on where to go next.

As website visitors, and online users in general, our eyes have become accustomed to naturally search for buttons when we're browsing through a website.  

side tip: this is why buttons are much more effective CTAs than clickable text or text that is linked that says for example: "Click here." 

So, opting for larger buttons helps mobile users easily tap the screen and navigate between your site's pages; and since most people on their phone navigate using their thumbs, buttons should be large enough to tap with your thumb. 

here are some things to keep in mind: 

• apply contrast: to enhance button visibility, consider using contrasting website color schemes. For instance, opt for a light color for the button text, a dark color for the button itself (the background) and a contrasting color for the surrounding area (or section of the page); another effective method is to use a different color for the button’s border   
  

• optimize the button size: buttons that are too small can be hard to press (and easily missed), while overly large buttons might take up too much space on a small screen the point is - you basically have to be like Goldilocks here and keep your buttons at a reasonable size or "just right" to ensure they stay readable and optimized for mobile users and their varying fingertip sizes   
  

• maximize button position: most people typically use their dominant thumb for tapping and navigating - so make your site more user-friendly on a smaller screen by positioning buttons within easy thumb reach (usually in the mid-to-lower right-hand side of the screen)   side tip: check out our FREE resource '5 costly website mistakes & how to fix them' for more on how to better optimize clear CTAs and navigation.

7. Optimize images for mobile viewing 

Mobile devices have limited bandwidth compared to desktops, so large image files can slow down loading times. Additionally, many mobile users have data restrictions, making smaller image sizes beneficial in conserving data usage. When working with mobile sites, the aim is to keep image sizes as small as possible without compromising quality.

size your images: high-resolution images take up a lot of space and therefore cause slow load times. You can use an image resizer to reduce the file size, so they load faster without negatively affecting the quality of what people see on your site.  

8. Videos default on stop 

Typically, when you land on a page with a video, the video will automatically play by default. However, to help the load time and speed of your site on mobile devices – set the settings to ‘stop by default’ rather than play. 

9. Avoid animations

Animations and effects can certainly enhance a website's visual design and appeal. However, you might find an animation and/or effect hindering the experience on the mobile version.  

If that is the case, then it is best to ‘hide’ that element to enhance the user experience (UX). 

Also consider interactive elements like sliders, complex animations or hover effects - which allow you to see content display on a desktop only after the cursor hovers over it.

side tip: if you can't access content while browsing on a phone (given that you don't use a mouse/cursor on a phone and can't hover over to see it), then it might be best to rethink the design or only use these elements for more of the 'non-essential' content.

10. Space out your links 

When designing the mobile version of your website, think about how touch devices and mouse clicks work. Since fingers are thicker than desktop cursors, it makes sense to space links further apart on mobile sites to prevent mis-clicks (and ultimately, frustration for the visitor).  

And when you do link out to pages, try to only link to web pages that are also mobile-friendly to provide a seamless experience for your website visitor. 

side tip: scroll through your website on different screen sizes. For instance, ask to borrow phones and tablets of various sizes from friends and family and take time to browse through your website. This will give you a good idea of what your site looks like on all types of screens and sizes and will help you identify any room for improvement. 

Are you frustrated with your website’s mobile performance?  

We know your time is precious, and your business deserves a website that works as hard as you do.    

When your site isn’t mobile-friendly, it can unfortunately be costing you customers and sales. But you don’t have to tackle this alone - we're here for you!! 

Our team is passionate and dedicated to helping you thrive online by making your website a powerful tool that’s optimized for every device. Let us handle the details so you can focus on what matters most—running your business.  

Learn more about our services and/or contact us today, and let’s ensure your website is as dynamic as your brand. 

-

check out our FREE resource '5 costly website mistakes & how to fix them' for more on how to better optimize your website.

written by:

Adriana Leos

Chief Creative Officer

vznayres