How to Design a Mobile Friendly Website in 10 Steps

Regardless of the device a visitor uses to access your website, your goal should always be to provide that visitor with a stellar user experience. If a visitor has to repeatedly pinch and zoom and scroll in order to read your website’s microscopic text or to tap on its awkwardly placed links and buttons, there’s a good chance that visitor is going to bounce from your site. And there’s also a good chance that visitor will end up associating his or her poor experience with your brand or business. As a result, it is essential that you have a mobile friendly website that is easy to navigate on any device. So here are 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:

a) The font needs to be large enough so people can read it without squinting or pinching. (Google recommends12 pixels as a minimum font size.)

b)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-friendly.

3. Use “Touch-Friendly” Navigation & 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 x 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 for your tap targets will help ensure that visitors are able to easily navigate around your site. Another suggestion for encouraging people to stay on—and engage with—your site: Clearly label all of your buttons so visitors know where each click will take them.

4. Don’t Hide Your Code

In order for Google to optimally render, index, and rank your website’s content on mobile devices, you need to make sure Google’s web crawling bots—Googlebot and Googlebot-Mobile—can access your site’s image files, CSS, and JavaScript. Controlling which assets Google’s bots are able to crawl can usually be accomplished through updating your site’s robots.txt file and re-submitting it to Google.

5. Keep Code Simple

Having too much CSS or JavaScript on your website can cause serious slowdowns for mobile visitors, and, in turn, hurt your search rankings. For these reasons, Google recommends compressing or “minifying” your site’s code wherever possible and reorganizing your CSS if it is causing slowdowns.

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 Unnecessarily 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 image, which wastes 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 range 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 of 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 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 of 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 mobile friendly website, Google will automatically re-crawl and re-index your site’s pages. Want to speed up the process? You can use the “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 your 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).