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
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.
See what we can do for you.