Does Your Website Provide These Poor Mobile Experiences?
We often say there are two main differences when it comes to the mobile web: screen size and mobile bandwidth constraints. KISSmetrics recently released an infographic showing how important this is and how it affects your bottom line. In addition to highlighting those statistics, I'm going to dig further and explain the causes of these bad experiences.
First things first, the statistics.
Common problems when accessing a website from a mobile phone:
- 73% have encountered a mobile website that was too slow to load.
- 51% have encountered a mobile website that crashed, froze, or received an error.
- 48% have encountered a mobile website that had formatting which made it difficult to read.
- 45% have encountered a mobile website that didn't function as expected.
- 38% have encountered a mobile website that wasn't available.
Observation: A lot of people are having a lot of bad experiences. :)
Mobile Internet users expect a web-browsing experience on their phone that's comparable to what they get on their desktop or laptop.
- 11% said they expect their load times to be much slower on their phone than desktop.
- 12% said they expect their load times on their phone to be faster than their desktop.
- 21% said that they expect their load times on their phone to be about equal with their desktop.
- 25% said that they expect their load times on their phone to be almost as fast as their desktop.
- 31% said they expect their load times to be a bit slower on their phone.
Observation: Most thought their phone had slower load times than their desktop.
How long would the mobile user wait before they left your page?
- 3% said they would wait less than one second for a page to load before abandonment
- 16% said they would wait 1-5 seconds
- 30% said they would wait 6-10 seconds
- 16% said they would wait 11-15 seconds
- 15% said they would wait 16-20 seconds
- 20% said they would wait 20+ seconds
Observation: 6-10 seconds is the sweet spot.
Causes of Common Problems When Accessing A Mobile Website
So now that we know the numbers on mobile website loading times, let's investigate and dig a little deeper on some of the causes behind this.
51% say they have visited a mobile website that has crashed, froze, or received an error. What causes this? The easy one is a Flash-enabled website. Flash isn't available on the iPhone platform, and nearly 1 in 3 Americans own an iPhone. Mobile websites that crash or freeze do so as a result of a website that's simply not optimized for mobile devices. This could be due to large JavaScript files or websites with a lot of code. iPhone/Android phones render mobile websites better than Blackberry, that's for sure.
48% say that they've visited a website which had formatting which made it "difficult to read." Now, that's fairly subjective. To me, "difficult to read" means an overall poor experience. I think about the websites with text that requires you to pinch, zoom, and scroll left/right/up/down to read.
45% say that they've encountered a website that didn't function as expected. This could mean a few things. It could mean Flash was used on a navigation menu and the mobile user couldn't click through to different pages because they were on the iPhone. Or maybe the navigation menu had hover over submenus and there is no hover on phones.
38% say that they've encountered a website that wasn't available. This sounds like a broken link to me. I imagine that means the desktop site is broke too. Or maybe they had really poor reception at the time.
Causes of Slow Mobile Website Loading Times
There are several different elements that could cause a website to load slow on mobile phones.
Images. Unoptimized images cause mobile web pages to load slowly. Some mobile website solutions involve changing the display (CSS) on your mobile website and simply resizing the images. The problem with this is that although the images are resized, the actual full image needs to be loaded and then resized. This causes the site to take longer to load.
Video. Regular mobile video on a mobile phone will take longer to load. We recommend either compressing the video for mobile devices or using YouTube. Vimeo also has a mobile version of their website.
Code. There are two different ways too much code could slow down a site. The first way is large JavaScript or CSS files take longer to download. It's important to optimize these files by removing as much white space as possible and using any compression tools available (eg. for JavaScript files, JSmin). The second way too much code can slow down a mobile website is because it puts more load on the mobile web browser. That is, the more code you have, the longer it takes to download and the harder the mobile browser has to work to display the page. This isn't that big of a deal on some of the newer phones, but it's important to note for older phones (mostly Blackberry).
Media queries (CSS). Media queries are one of several methods of making a mobile website. It involves taking your desktop website and loading a special file which "hides" certain parts of the desktop website for mobile devices. For instance, if a website has 3 columns, only 1 column might be relevant to the mobile user. Media queries allow you to hide the other 2 columns when the website is being viewed on a mobile device. The problem with this method is the complete website still gets downloaded, and then items get hidden. The means the actual images aren't resized and you have the issue with too much code. We normally don't recommend this method.
All of these poor experiences create opportunity for those who provide a positive experience. It's about the experience. Mobile web users are tolerant and take notice of those who stand out.
If you're concerned about the experiences of your mobile visitors and use Google Analytics, you can see how much mobile traffic you have. Thank you KISSmetrics for the infographic!
Coming up soon will be a comprehensive post on what goes into a mobile website. Stay tuned!
Is there any bad mobile experiences you'd like to share?
