On the weekend of April 27-28, 2013, I attended Wordcamp Melbourne, a gathering of around 300 likeminded people to discuss all things WordPress. This series of posts is an attempt to provide a brief summary of some of what I learned there.
If you have a smartphone, you’ll be familiar with the frustration of trying to navigate around websites that aren’t designed for use on smaller devices. James Banks believes that not only must we ensure that all our websites are mobile-friendly, but that we should be starting our development process with mobile web, not adding it on as an afterthought.
James started out with some enlightening statistics. If you’re not sure if you need a mobile website, think about this:
- 1 in 2 Australians own a smartphone.
- 50% of users expect a mobile website to equal the desktop.
- 57% will not recommend a poor mobile website.
- 40% will go to a competitor if a mobile website is poor.
With these statistics in mind, how many customers might you be losing if your website is not mobile-friendly? Yet despite these statistics:
- Only 25% of Australian websites are optimised for mobile devices.
Clearly if you’re in that 25% you have a significant advantage over your competitors.
With the use of mobile devices increasing rapidly, there’s a lot to be said for James’s philosophy of building for mobile first, and then scaling up to what the desktop site will be. One advantage of the mobile-first philosophy is that designing for the smaller viewport forces you to focus very clearly on what’s important. Rather than looking at your website and thinking “what can I remove to make my site better on mobile devices” we instead should be starting with the question “what’s essential?”, and enhancing that on the full desktop site if appropriate.
James offered the following points to remember when planning your mobile site:
- Allow users to easily access content. While clicking your way through a few menus to find what you want on a desktop site may not be too onerous, on a phone it can be very frustrating. Some things to consider in this respect:
- Easily accessible search. Give users the option to go straight to what they want by searching.
- Content before navigation. While on a computer screen it’s easy to ignore the menu and cast your eyes straight away onto the content, on a phone the limited space means you have to physically scroll past everything – forcing the user to scroll past the menu on every page can be very frustrating.
- Avoid low contrast design. Screens can be difficult to see in bright sunlight, and almost impossible if there is insufficient contrast on the page.
- Make tappable elements large enough and space them out. It’s much harder to hit the right spot with a finger than with a mouse! (The minimum size for buttons and other elements you tap is 44 x 44px.)
- Build for speed. If you get it right on the mobile, it will be super-fast on the desktop site.
- Place media queries at the top of your css file. Responsive design relies on calling different styling properties depending on the device viewing the site. As speed is crucial on the mobile, you want to ensure it gets the right stylesheet straight away.
- Reduce http requests. Web pages are made up of a number of files – the basic HTML file to hold the page content, images, stylesheets to control how the page looks, and script files to control functionality. Each of these files requires another trip to the server to get it. Reducing the number of elements on the page speeds up page load times by reducing the number of trips to the server.
- Compress images properly. Mobile bandwidth isn’t cheap, and image-heavy sites can chew it up pretty fast, especially if you allow it to just load the same images as the desktop site and display them smaller. Instead, make sure you have included appropriate smaller images specifically for the mobile site.
These are all great points that James has made, and I’d like to add a few of my own:
- Make contact information and location easy to find. People browsing on their phones are often doing so to find their way to a business, so make sure your phone number and a map to your premises are prominent on your site.
- Ensure all phone numbers and email addresses are clickable. Ever been on a website on your phone and you can see their phone number but have to write the number down to be able to call? Or do you try another website where you can tap the number to call, and deal with that company instead?
- Avoid PDF file downloads. This is one of my pet peeves, especially for those in the hospitality industry. A traveller looking for a restaurant to dine at is not going to be happy if they have to download a 2MB PDF file to see your menu. Most likely they’ll go to your opposition who have the menu on the web page itself.
- Ensure the site can be navigated and understood without loading images. This is actually an accessibility issue which applies to all websites, but can also be crucial when using up expensive mobile data bandwidth. When I’m travelling, I regularly disable all images in my mobile browser if I’m getting close to my bandwidth limit. So I quickly leave sites that don’t make sense when images aren’t loaded.
- Don’t use Flash. Don’t use it at all. Iphones and iPads can’t display Flash, so if your website is built in Flash, they won’t be able to access it at. At all. Don’t use it.
Megan’s Web now builds all websites according to responsive design principles to ensure your site is mobile-friendly right from the start.