Learn how to fix common website issues on mobile devices

Even those of us with phones permanently glued to our hands will put them down and sign into our computers to work on our websites. After laying out your fullscreen pages it’s easy to forget to review how they render on mobile devices.

Using examples I’ve come across over the last sixteen years, you’ll learn what to look for and how to fix common website issues on mobile devices.

Font sizing

Large fonts can look great on big screens, and often auto resize when the screen is smaller so that the text remains legible.

What you may not know is that there are several ways of assigning font size on a website and some work better for responsiveness and accessibility than others.

If you haven’t applied the correct font settings, you may experience the following issues when viewing your website on mobile devices:

• Headline text overlaps when on more than one line,
• Headline text appears too large on mobile, or
• Paragraph text appears too small.

Here’s why those issues happen:

Line-height

Line-height is what it sounds like in that it sets the height of a line of text.

You may notice line-height more in your paragraphs, with numerous lines of text and the space that sits between them. Increasing the line-height of paragraphs would increase the space between the lines of paragraph text.

You may not notice line-height when it comes to your headlines because often our headlines fit into one line on desktop screens.

It’s not until you view the same webpage on a mobile screen that you might notice the letters of your headline overlapping each other if the line-height isn’t set high enough.

“As a general rule, we should give the user as much control as possible, and we should never disable or block their settings from working. For this reason, it’s very important to use a relative unit like rem for typography.” – Josh W. Comeau

Text sizes

By default most browsers, word processors, and web platforms recognize headline hierarchy out-of-the-box.

💡 Tip: If you’re not familiar with what heading hierarchy is or how it relates to web accessibility, learn more by reading my post: ‘Are you making these common accessibility mistakes?’.

This means that even if you don’t assign your own styling to headlines, using H1 through H6 tags on your web page will generally apply auto-styling to make the text of those headlines appear larger or bolder than your paragraph text.

Most designers implement their own font styles, colours, and formatting, often setting specific sizes for the text they intend to use as headlines or titles. This can either overwrite the general headline settings, or simply apply headline styles to normal text.

If the same font size is being attributed to the headline on mobile devices, chances are, it will no longer fit within the smaller screen, getting cut off in the process.

PX vs REM

Most of us are familiar with ‘px’ or pixels as a reference point to font size. By assigning text a set px size, you are telling the headline to display at that fixed size no matter the screen width.

But you can also use an alternative unit ‘rem’ to apply variable font sizes to your text so that they scale with the viewing device. 

Since covering how to fix common website issues on mobile devices can’t be devoted entirely to font scaling I’m going to leave that up to Josh W. Comeau, who has already published a thorough post where he discusses why we should use a relative unit like rem for typography.

Background image positioning with text content

Imagine this: You find the perfect photo, you’ve written the perfect headline and byline, your call-to-action is perfect. You build out the hero section of your home page on desktop and admire its beauty when you’re done.

Then, you pull up your page on mobile to find that the focal point of your background image – the bit that brought everything together visually, is missing entirely.

When you rely on positioning content on desktop screens, you don’t inherit the same layout on smaller ones due to responsiveness and the size of the area that the content has to fill.

You may end up doing one of the following instead:

• Select a new image that works well on all device screen sizes
• Change the positioning of the image using CSS
• Create a desktop-only section and a mobile-only section with varied implemented styling
• Hide the banner on mobile in favour of altered content altogether

If your site has existed for some time and you have the analytics data to review, you may want to see the percentage of traffic that views your website on desktop vs mobile. If there is a large discrepancy, you have your answer on what ‘version’ to perfect first.

Site width vs content width

The padding/spacing between the edge of the screen and where your content starts/ends can lead to super skinny content in the middle of the screen or content that nearly appears off-screen.

White space

It might be part of your desktop design to include white space and larger margins and padding because you have more space to work with, but you don’t want mobile users to have to scroll for ages just to see your next section of content.

Similar to setting font sizes, margin and padding can also use EM, REM, or % to set their configurations. 

Using 200px as my left and right padding on desktop is fine, but on mobile this would squish the text content to only a couple letters per line. Using 2% instead, would add sufficient spacing across devices.

Flow of content

On larger screens there is room for more than one column of content, but responsive sites are developed in such a way that content moves into one column and cascades down the page on mobile devices.

If you’re using a layout that is similar to Content Area on the left + Sidebar on the right on desktop, then without any additional tweaking for mobile your sidebar content will appear at the bottom of the page.

If you depend on important navigation or lead generation within the Sidebar area, you may want to reverse which content is shown first on mobile versus on desktop.

Text-embedded images

If you use social media and post a lot of great content there, that’s fantastic! However, great content is not delivered equally, and rarely are these graphics website-friendly.

Marketers will often embed text in their social media graphics and then use the platform’s caption or description area to reapply the text for screen readers. 

While you could technically do the same on your website, this may work for desktop but less so for mobile devices. Depending on your image, once it’s scaled down to fit the device window size, all of that embedded text may not even be legible anymore.

Keep any text embedded in website images to a minimum and always be sure to include important information in on-page text so that it can be indexed by search engines and for accessibility.

Learning how to fix common website issues on mobile devices

You’re bound to come across more responsive design issues to remediate than what I’ve outlined, but font sizing, background image positioning, site vs content width, and text-embedded images are easily the most common website issues on mobile devices that I see.

Not sure if your website is responsive already?

A professional website audit will review your site in its entirety, including:

• Responsiveness on mobile devices
• Search engine optimization
• Accessibility
• Design and branding inconsistencies
• User experience, and possibly more!

With this outcome you learn more about what problems your website may be experiencing, along with recommendations on how to fix them.

This can help you determine whether your budget suits editing as needed, or upgrading your website completely. Alternatively, you may discover you have the interest or knowledge to maintain some of the advice yourself, and only co-op the services you need.