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.
My website looks great on the desktop but not on my mobile device and I have no clue how to fix this! Help, please!!!
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.
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!
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.
Add in
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.
I don’t know why my website acts so strangely, can you help me?
My website looks different on mobile. Can you please check it once. Thanks
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.
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?
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.
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
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.
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.)
Great post. I keep having issues with my site on mobile and this helped me narrow some of them down. Thanks!
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.
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.
Hi There!
Thanks for the advice above, however I am still having issues.
All of the above things are active/have been done, yet my site, which works well on a desktop, is incredibly slow to load on a mobile, and always very truncated as it does load. Im at a loss as to wha to try next. Any help would be greatly appreciated.
Hi, Dan! Sorry to hear that you are still having issues. This article touches a bit on why your mobile version could be slowed down, most often times that has to do with images and their lack of optimization for mobile. To check your mobile optimization levels, read this article by GTmetrix. Also, please see this article by Modzilla for more information on optimizing images for a more mobile-friendly website. Hope this helps! Cheers.
I have a problem with my website. It looks great on my windows laptop, it looks great on my android phone.
But when i try to see my webiste on Iphone, there was some guge problems. Can somebody tell me why?
Hello there! Sorry to hear you are having issues with your mobile version of your website. We actually have a few blog posts that could be helpful for this. Please click here to learn about Google’s Mobile-Friendly Test, and here to learn about why having a mobile-friendly site is good for business. Hope this helps. As always, please feel free to contact us with any questions you may have!
Hey there JustPro – if you’re having issues with images on iPhones only, it is likely due to the Retina display, you may want to check out our article here: https://www.yokoco.com/is-your-website-ready-for-the-new-ipads-retina-display/
hello. im having the same problem as everyone. my site looks great on my desktop but phones it looks so bad. please help!
Hi Efren. We took a quick look at your site and we’re seeing a lot of little issues. The good news is that there’s nothing fundamental at your site’s core that is causing the problems (meaning it doesn’t need a total overhaul), the bad news is that there’s no trick or super quick fix that would sort you out. You’d probably be best served by having a web developer dive into your CSS code and just work through the problems one by one. Even if you just fix a few things (like the broken header), it could go a long way. You’re welcome to reach out to us through our contact form for more info — Hope that helps!
Hi! My website has a parallax effect but on my phone the images not only look blurry but they don’t have the scrolling effect either. I was wondering how I could fix this issue
Aloha Maimuna, sorry to hear you’re having this issue. Blurry images can often be a result of incorrectly scaled images, that can be due to CSS or, if you’re using Retina devices, it can be because your images aren’t set to be viewed correctly. Check out our article on Retina display here: https://www.yokoco.com/is-your-website-ready-for-the-new-ipads-retina-display/
I have a problem with the movie search engine and buttons, but only on iPhones. I don’t have an iPhone myself and it’s hard for me to check it. I replaced the paddings with margin and it did not help. Objects overlap or are higher. Interestingly, Search Console does not recognize this as an error and the page displays correctly there.
Hey there SWtv – if you’re having issues with images on iPhones only, it is likely due to the Retina display, you may want to check out our article here: https://www.yokoco.com/is-your-website-ready-for-the-new-ipads-retina-display/