Posted by Murray Sye
on Wed, May 13, 2015 @ 12:02 PM
Is your website optimized for mobile?
If you're unsure you can check it here. Google will analyze your URL and report if the page has a mobile-friendly design.
Or, you can simply grab your mobile and test it yourself. If you end up looking at a page where the text is way too small, the links are tiny and you have to scroll sideways to see the content – well, you've got a challenge on your hands.
Not to worry though, because today we're going to help you get your mobile website back on its feet. In today's post we've collected 10 tips for creating a user-friendly, search engine optimized, mobile experience.
1. Work with a designer
Or, at the very least, talk to a designer and get their professional input.
At the end of the day, putting your website design in the hands of a qualified, experienced web designer will help ensure that you end up with a website that is not only mobile-friendly, but beautiful.
2. Make smart font choices
Here's a perfect example of an area where an experienced designer can help out big time: font selection.
At the most basic level, the font you choose needs to meet two requirements:
- The font needs to be large enough so people can read it without squinting or pinching. (Google recommends 12 pixels as a minimum font size.)
- The font style needs to be clean, i.e. not overly decorative or cluttered. Ease of reading is the name of the game when it comes to being mobile-ready.
3. Use "Touch-Friendly' navigation and calls-to-action
Ever get frustrated by tiny, impossible-to-click links, buttons, or other "tap targets" when visiting a website on a mobile device? It's a terrible experience, and one that you can avoid by a) using a minimum size of 7mm for primary tap targets, and b) leaving a minimum of 5mm of space between tap targets (according to Google).
Adhering to these sizing and spacing recommendations fro your tap targets will help ensure that visitors are able to easily navigate around your site. Another suggestion for encouraging people to "linger longer" – and engage with – your site: Clearly label all of your buttons so visitors know where each click will take them.
4. Don't hide our code
5. Keep code simple
Pro tip: Use Google's PageSpeed Insights tool to ensure your website's pages are loading quickly across all devices. After analyzing a webpage, the tool will give you a speed score and let you know what – if anything – needs improving.
6. Don't serve up large images
Sure, smartphone displays keep getting better and better, but that doesn't mean you should serve up the largest images possible for mobile screens. After all, mobile devices will still need to downsize those images, which waste both time and processing power.
The big takeaway here: always size content to the viewport and ensure you're serving the proper image sizes for every device.
7. Make sure videos can load
Unplayable content is a mobile faux pas that can cause major frustration for your site's visitors.
When embedding video from YouTube, Vimeo, Wistia or another video hosting service, avoid using <object> embeds on pages that you're optimizing for mobile. Use <iframe> embeds instead, as these will allow for compatibility with a broader ranger of mobile devices/browsers.
For animated content that relies on Flash, Google recommends using HTML5 animations, which you can create using Google Web Designer.
8. Keep HTTP requests to a minimum
Mobile visitors who have already seen the desktop version of your site will likely expect to find all the same features on the mobile version. The only problem: on mobile devices, processing power is limited and bandwidth can be unreliable.
To help keep your pages loading quickly, cut back on on-page elements (like embedded applications) that drive additional HTTP (Hypertext Transfer Protocol) requests. Some other tips for keeping HTTP requests to a minimum:
- Use image maps to combine multiple images into a single image. This won't necessarily reduce the file sizes of your images, but it will reduce the number of HTTP requests that are needed to render those images. Important note: image maps are only useful if the images in question are next to each other.
- Use CSS sprites to combine all the the images on your page into a "master" image (that only needs to load once). You can then use the CSS "background-image" and "background-position" properties to display the part of the image you want to appear.
- Combining files is another way to reduce HTTP requests. Specifically, you can combine all of your stylesheets into a single stylesheet and combine all of your scripts into a single script. Note: this can be challenging if your stylesheets and scripts vary from page to page, but according to Steve Souders – former Head Performance Engineer at Google and former Chief Performance Officer at Yahoo – "making this (combining files) part of your release process improves response times."
9. Keep forms short
We all want our websites – mobile and desktop versions – to be great at generating leads. But it's important to consider usability when creating landing pages for mobile visitors. While typing out your name, email, phone number and other information is relatively pain-free on a desktop computer, on a mobile device it's considerably more annoying.
To ensure you're delivering a great mobile experience, keep landing page forms short. For example, if your typical desktop form asks for a person's name, email, phone number, industry and company size, you may want to simply ask for their name and email and scrap everything else on the mobile version of the form.
10. Ask Google to re-crawl your site!
Once you've finished making your website mobile-friendly, Google will automatically re-crawl and re-index your site's pags. Want to speed up the process? You can use teh "Fetch as Google" tool to trigger Google to re-crawl and re-index your site.
Alternatively if your site has a ton of URLs that need re-processing, you could submit a sitemap. Just be sure to include the "lastmod tag" in you sitemap if your mobile pages are using pre-existing URLs (which will likely be the case if you used responsive design or dynamic serving to make your site mobile-friendly).
Your customers expect a great browsing experience regardless of the device. But as the number of internet users now on smartphones continues to climb (80%) creating a mobile-friendly website is not just a "nice-to-have" but a "must-have" for all business. If you need help, don't be shy, contact WhiteSpace for a no-obligation consultation.
Written by Murray SyeMurray is the CEO and Creative Director with the award-winning
Toronto HubSpot agency partner, WhiteSpace. You can
connect with Murray on Twitter, Facebook or LinkedIn.