Ever looked at your website on your phone and thought "Why does my website look bad on my phone? It looks great on my desktop and my laptop?!" Here are five common reasons a website that looks great on a traditional computer might look awful on a smart phone.

1. No Responsive or Mobile Version

If your website shows up as a really small version of its regular self on your phone, chances are, a mobile version of the site doesn't exist. The browser on your smartphone is pretty versatile. So, when it can't find a mobile version, it looks at the whole thing as a desktop computer would. Then, it automatically shrinks it down to fit your screen. This allows you to pan and zoom around the content.

If you're not sure if your website is responsive, you can easily check it. Open the website up in a browser on your desktop computer. Then, shrink the window size until it becomes smaller than the width of the page. If your website rearranges itself to fit your window, chances are, it's responsive.

2. Missing scaling rules for mobile display

Even if your website performs well in the test above, that doesn't mean it will on your smartphone. As the screens on mobile devices have increased in resolution, they've started to require extra information from a website. It needs instructions on how they should stretch or shrink your content for maximum visibility.

On your smartphone, if you're seeing your responsive or mobile site, but parts of it look strangely shrunken, your site is probably missing the code that keeps everything in proportion.

If you're comfortable with code and you want to solve this, here's a great article from Mozilla on using the meta viewport tag to optimize your site for mobile devices.

3. Un-optimized Images

If the structure and text of your site looks fine on your smartphone, but your logo or images are blurry, there's a good chance that they haven't been optimized for mobile screens.

Take the retina display on the iPhone 8 or iPhone X for example. In order to make the screen look extra sharp, Apple basically crams 4 (or more) pixels into the amount of space that would be 1 pixel on your traditional desktop display. Then, to compensate for this, they double the resolution of graphics and text. That way, it won't look tiny on the screen. The trouble comes when the actual size of your graphic is smaller in pixels than how it's being displayed on screen. Rather than being "locked" to its actual size, it gets stretched out - and thus, gets blurry.

This issue can be corrected by providing alternative images for devices with retina or high-resolution displays. This also applies to 4K and 5K desktop monitors.

4. Unsupported Media Types

Now, let's say your website loads, but is missing certain content. It's likely that you're using media types that aren't supported by your mobile browser. For example, Flash, which can be used for both video and animations, does not work on most phones. Likewise, there are certain JQuery and Javascript elements which can help make your site interactive for desktop users, which will not display properly - or at all - on your mobile device.

5. Excessively Large Media

For most people, the 3G or 4G mobile network connection on their phone is much slower than their home or office wifi network. With that in mind, if your website relies on large images, which haven't been compressed for the web and take a few seconds to load on your computer, they may not load at all on your phone.

Often, these sorts of images are found in home page rotators, or as background images. Depending on how your site is set up, their slow load time can affect the loading of the rest of your site as well.

You can use a tool like GMetrix to scan all of the images on a specific page of your website. It will provide you with a report that outlines where you can cut down on load time.

Check Your Site On Your Mobile Device

The best way to tell if your site suffers from any of these issues is to look at it on your phone. Tap to a few pages, make sure you can navigate everywhere you need to go and see everything you're supposed to see. It's also a good idea to inspect your website on your tablet. Better yet, borrow someone else's device (especially if it uses a different OS) to give things a go.


Interested in building a mobile-friendly website, or fixing your existing site?

Get in touch and we can talk about the services we can offer to help.

Get Started

See what we can do for you.

17 Comments

  1. Heather Smith on February 23, 2017 at 7:34 pm

    My website looks great on the desktop but not on my mobile device and I have no clue how to fix this! Help, please!!!

    • Max on February 24, 2017 at 11:11 am

      Hi Heather. Looks like your site is down right now, but we’d be happy to take a quick look if you want to contact us when it comes back online.

  2. Charm on April 14, 2017 at 11:52 am

    Same problem with Heather. My website looks great on the desktop but looks terrible on my mobile devices. I hope you can help me fix this, pls!

    • Chris Yoko on April 22, 2017 at 11:13 am

      Hey there Charm – we’re happy to take a look if you’d like us to add you to the list. In exchange all that we ask is that you give us permission to create a video of the issue and how we recommend it is fixed. We won’t share any sensitive information of course, but we would show your site and the before/after the issue is solved, as well as other possible details depending on the issue itself. Would that be ok? If so, please email questions@yokoco.com and we’ll carry on the conversation in private.

  3. Mexx on June 5, 2017 at 11:44 am

    Add in

  4. Spencer on June 17, 2017 at 6:31 am

    Hi, I’m having an issue with scaling the homepage picture in mobile. The site looks great on a desktop, but in mobile the frontpage is a mess.

  5. August on July 16, 2017 at 8:03 am

    I don’t know why my website acts so strangely, can you help me?

  6. tareka jones on August 22, 2017 at 1:50 pm

    My website looks different on mobile. Can you please check it once. Thanks

    • Chris Yoko on August 31, 2017 at 12:40 pm

      Hi Tareka, we’re happy to take a look if you’d like us to add you to the list. In exchange all that we ask is that you give us permission to create a video of the issue and how we recommend it is fixed. We won’t share any sensitive information of course, but we would show your site and the before/after the issue is solved, as well as other possible details depending on the issue itself. Would that be ok? If so, please email questions@yokoco.com and we’ll carry on the conversation in private.

  7. disha sharma on August 3, 2018 at 8:47 pm

    the html page is not on any domain yet. Its looking fine on laptop but when i open in mobile browser, the header merge with the below content and header looks weird. Could you help?

    • Chris Yoko on August 14, 2018 at 6:36 pm

      Hi Disha, if you’d like, you’re welcome to contact us at questions@yokoco.com with the issue you’re having. If we can provide advice, we’ll let you know. We’d also like your OK to possibly use the issue in a future article or video to help others solve the issue if they encounter it.

  8. Rudi on September 4, 2018 at 4:55 am

    Hi,

    For some strange reason all of a sudden my website starting showing up weird on my phone. Built on Joomla. I cannot see how any of my addons did this as I have not added anything to it in a long time. Do you still have the option as mentioned previously by using my site as a before / after demo for you ?

    Thanks

    • Chris Yoko on September 10, 2018 at 11:21 am

      Hey there Rudi – We’re happy to take a look for you and take things from there. If you’d like to do that, just email us at questions@yokoco.com and we’ll give it a go.

  9. Maybell on October 17, 2018 at 5:45 am

    Great post. I used to be checking constantly this weblog and I am inspired! Very useful info particularly the last part 🙂 I deal with such information a lot. I was seeking this particular information for a long time. Thank you and good luck.

    (PS I am not a reptile person.)

  10. John Waired on February 25, 2019 at 1:08 pm

    Great post. I keep having issues with my site on mobile and this helped me narrow some of them down. Thanks!

  11. Bob Tiffin on April 21, 2020 at 9:22 pm

    I have a website that I’ve made numerous changes to lately on a PC laptop. Only recently did I look at the site on an iphone and noticed that the home page no longer looked the same as it had a couple of months before – before all these changes had been made…..and it’s the home page! There are other pages that don’t show up the same either but the home page is the most egregious. Can you help me – I’m at a loss.

    • mlollar on April 25, 2020 at 8:49 pm

      Hi Bob, thanks for reaching out. I took a look at your site and I’m not sure I’m seeing the issue. Based on how the home page looks on a desktop/laptop display, it looks how I would expect it to look on mobile as well. Remember – the layout won’t necessarily be the same on every screen size, but the important thing is that your navigation menu and content are available to everyone, and it appears you’ve succeeded on that front.

Leave a Comment