When Responsive Design is Not an Option: a Checklist for Optimizing Your Mobile Site

Kristina Kledzik recently wrote a post here on the SEOmoz blog about responsive design and why it’s often the best option when creating a mobile-friendly online experience. She discussed its advantages in dealing with usability issues, duplicate content, mobile search rankings, and link building. Google recommends using a responsive website design where this makes sense from a user perspective, and Bing encourages a "one URL per content item" approach.

Kristina makes a compelling case for responsive design. However, responsive sites can be tricky to develop, especially if the original desktop version has lots of content and/or navigation options. If you have a business or a client whose site has hundreds of thousands, or even millions of pages, it may be difficult to redesign the entire site with a responsive design. A separate mobile site, however, can start with fewer pages, and you can add more as you have time. For some businesses, responsive design is simply not the best option because their mobile visitors' needs are so different from desktop users, and thus require drastically different content. So we can’t always rely on the advice that responsive design is the preferred solution.

Aleyda Solis recently created this flowchart to illustrate the decision-making process for choosing a mobile-friendly option. Below, I’ve highlighted the "separate URL versions" option, which Aleyda recommends for when ‘you cannot implement’ a single URL/responsive design.

If your site (or your client’s) falls in this "separate URL versions" category, you’re in good company. Among the UK’s top 20 retailers, only 14 have mobile-friendly sites, and 13 of them have separate mobile sites. The pattern is similar in the US, with MongooseMetrics reporting that 73% of websites ranked in the Quantcast Top 100,000 sites used URL redirects to a mobile specific URL.

Here are a few examples of major retailers' different approaches to mobile:

Apple doesn’t have any type of mobile site; Ebay uses a separate URL mobile site; Currys uses a responsive design.

The good news is that mobile sites, when done correctly, are certainly able to handle these same issues of usability, duplicate content, mobile search ranking, and link building.

So, how do you optimize a mobile site to work as well as implementing a responsive design? You must ask yourself a few questions before reaching your final goal.

Information Architecture

When you’re just starting out, the first thing you need to think about is information architecture. One benefit of a mobile site (over a purely responsive design) is that you can provide the user with a drastically different experience from the desktop version. First, you need to ask some questions:

1. Does your mobile site reflect mobile users’ intent?

When structuring a mobile site, one of the first things to ask is whether mobile visitors are interacting with your site differently than desktop users. If so, your mobile site design needs to reflect this.

If you’re not sure how your users are interacting with your site, have a look at your analytics and segment out the mobile traffic. Google Analytics already has "advanced segments" for mobile and tablet traffic. The mobile segment includes traffic from tablets, though, so you may need to create a custom segment in order to view only non-tablet mobile traffic.

This can be slightly tricky, as you’ll need to use a regular expression (‘RegEx’). The setup I’m using is:

• Name: ‘Mobile - no tablets
• Include: ‘Mobile (Including Tablet)’ containing ‘Yes’ AND
• Exclude: ‘Screen Resolution’ Matching RegExp (1\d|[7-9])\d\d+x.*

What this regular expression means is that this custom segment should include traffic from mobile devices but exclude traffic from devices with a screen resolution of 700+ by anything. You may decide to tweak the RegEx depending on how large (or small) a device you want to include. (Some of the larger smartphones also fall in this range, but then again, maybe these should be seeing the desktop version, as well.)

Once you have the data, focus on landing pages (are people entering your site in the right place?), conversion rate, and where people leave the conversion funnel (where are they getting stuck?); bounce rate (are people not finding what they’re looking for?); and, if possible, site search and organic search keywords (what are people looking for to begin with?). If you have analytics set up for your mobile site, you should use that data in order to see which mobile site pages are performing above or below average. For a detailed overview of what to look for, see Section 3.1: Your Mobile Users in this great article by Aleyda Solis.

2. Have you designed for the user?

Once you understand your users’ goals, you should design your site to reflect the most common reasons for visiting the site on a mobile device. An obvious example of this is using a mobile phone to find a store location near you. This feature might be less prominent on the desktop site, but for a mobile user, it should be very easy to find on the homepage.

You can also take advantage of mobile-specific features to improve the user experience. Using the same example, you could offer the option of store lookup by postcode, but also by geolocation ("use current location"). When the "nearest store" results come up, include a phone number that is click-to-call.

(Screenshots from m.primelocation.com)

3. What about tablet users?

The current recommendation from Google is to serve tablets the desktop site, rather than the mobile site. This is because user browsing patterns and screen size on a regular-sized tablet like the iPad more closely resemble desktop browsing than smartphone browsing. Also, a site that looks great on a small smartphone browser will appear too big and annoyingly grainy on the much larger tablet screen. Be sure to test the touch screen capabilities of your desktop site.

An exception to the current guideline would be if you want to provide a tablet-specific online experience, in which case you might decide to use a third subdomain (t.domain.com). As tablet sizes become more varied, this guidance may change.

Let's check out some examples of tablet-specific domains:

Example one: Colbert Nation is the official site for Comedy Central show, The Colbert Report.

Example two: Mail Tribune is a news publisher.

It's important to make sure your mobile visitors are being served the correct version of your website. My best advice is to use redirects based on user agent. If you're not redirecting based on user agent, you should set up redirects based on user agent detection, so that when someone visits the desktop site on a mobile, they are redirected to the mobile version. If possible, use server-side redirects (301s or 302s) rather than Javascript redirects; JS causes a lag in the load time (because the page has to load and then parse the JS), and a page with a Javascript redirect is less likely to be cached. Also, make sure that if someone on a desktop PC clicks a mobile link, they will be redirected to the desktop version.

A few quick tips for handling redirects to mobile site:

• Google’s most recent guidance states that either a 301 or 302 may be used.
• When using user agent detection, be careful of cloaking.
• Don’t redirect all desktop pages to the mobile homepage; instead, use a mobile page which is relevant to the original. If you don’t have a relevant mobile page, consider creating a page which explains this and offers the option to view the desktop version of the desired page and/or alternate pages on the mobile site.
• Be sure to include a link to "view desktop version" on your mobile site (and vice versa). Use cookies to ensure that if a user clicks on this option the user agent detection will be overridden and they will not be redirected again (unless they choose to switch back via the "view mobile version" option).
• Try to use ‘mirrored’ URL structures (so that www.domain.com/hello redirects to m.domain.com/hello, not m.domain.com/xi3l3kxd. This may not be possible, however, if there’s not a one-to-one relationship between desktop and mobile pages.
• For more information on mobile site redirects, see Cindy Krum’s article on ‘generating mobile redirects properly.
• To avoid the appearance of duplicate content, you should use a special mobile rel=’canonical’ tag. This will be covered in more detail later.

Google Analytics

Once you’re happy with the structure of your site, you need to be able to track its usage. Jeff Tirey at Mongoose Metrics recently wrote about their fantastic study which found that on 37% of websites that are a) using Google Analytics, and b) also have separate mobile versions of their site, the mobile version is not being tracked! This is craziness. And it’s simple to fix.

1. Is your tracking code implemented properly?

If you simply haven’t added the tracking code to your mobile site, go do it now. If you aren't sure whether to use the special non-Javascript version, keep in mind that you should be able to ignore the special "tracking a mobile site" option. Instead, you should use the same Javascript code that you use on your desktop site.

The (rare) exception to this would be if you have a disproportionately high amount of traffic from feature phone (non-smartphone) users that you need to track. Feature phones don’t support Javascript, so the normal tracking code can’t track these visits. However, this is an unlikely situation, as most websites don’t see much traffic from these types of phones. If you are worried about it, you can check the site’s server logs for visits from feature phone user agents.

2. Is your mobile site data being tracked through your primary domain?

You should track your mobile site on the same web property (i.e., using the same UA-XXXXX-Y account number) as your desktop site. This requires a simple tweak in the code on both versions in order to indicate to GA that your m.domain.com site is a subdomain of your main site. You should also set up a special profile exclusively for traffic to m.domain.com. To learn more, check out these tips from Google:

• How to set up crossdomain tracking
• How to set up a new profile

Technical SEO

1. Do you have a mobile XML sitemap?

Even if you have a mobile HTML sitemap, it is best practice to create an XML sitemap for your mobile site, and submit it to Google and Bing. To learn more about how to create a mobile sitemap, check out this these instructions from the Google Webmaster Tools blog.

2. How will Google know it’s a mobile site and not duplicate content?

To make sure Google know's your mobile site is a separate entity from your main site, it's best to implement the special mobile rel=canonical tag. In order to indicate to Google that your mobile site isn’t just duplicate content, you can use a special version of the rel=canonical tag. On the desktop page, add the rel=alternate tag:

< <link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page-1" >

This tag will point to the mobile version.

On the mobile page, add the rel=canonical tag:

<link rel="canonical" href="http://www.example.com/page-1" >

This tag will point to the desktop version. Simple as that!

3. Make sure you’re not blocking the ‘Smartphone-Googlebot’ from your desktop version in robots.txt, and don't block regular Googlebot from the mobile version.

Bing is a bit more ambiguous in their advice (from March 2012):

"Occasionally, it may make sense to keep some URLs targeted at specific clients (e.g. mobile devices), which you can opt to block from us via the usual methods (robots.txt, webmaster tools) or not." (The emphasis is mine.)

Since the guidance is unclear, I would recommend the less drastic approach. My advice is to allow Bing to crawl your mobile and desktop sites. You can opt to follow my recommendation...or not.

On-page Optimization

1. Are your meta tags mobile-friendly?

Since mobile screens are smaller, there are fewer characters displayed in the SERPs. To adapt to the smaller screen size, it's important that your meta tags be formatted in a mobile-friendly style.

For the best results, your title tags should be kept within 40-60 characters. Similarly, meta descriptions should be kept within 90 characters.

2. Are you targeting mobile-friendly keywords?

It's becoming increasingly important to do your keyword research specifically for mobile traffic. Mobile visitors will likely be looking for different results than desktop visitors, so you must lay the groundwork properly.

Optimizing the content on your mobile site for mobile keywords is also a great way to rank highly in the mobile SERPs (this may or may not be necessary, depending on whether they’re different from your desktop site).

3. Is your site load time too slow?

The goal for your site load time should be around 2-3 seconds. After waiting five seconds for a page to load, 74% of mobile users bounce.

You can check your page load time in Google Analytics. Use your mobile site profile (often the desktop load time is vastly different, which will mess up the averages). If you don’t yet have the data in a separate mobile site profile, you can also check this using your custom segment for non-tablet mobile devices.

Another way to increase you site load speed is to compress large images. Be sure to check other on-page elements, such as Javascript and videos, with a mobile emulator like Google’s Gomometer. Remember that certain formats, such as Flash, aren’t displayed on most mobile phones, so be conginzant of what works and what doesnt. Also, remember to be careful with Javascript in order to use the correct approach for your design.

Extras

I've thrown in a few extra pieces of advice for those of you who made it this far. Keep on reading!

1. Are you missing out on easy eCommerce wins (if applicable)?

To keep your conversion rate optimization on track, here are a few points to consider:

• Ensure the checkout/shopping baskets on your site sync across all platforms.
• Implement larger on-site buttons so that visitors don’t have trouble clicking the correct one on their device.
• Feature a "find-a-store" option.
• Use click-to-call for any phone numbers listed on your site.
• Ensure an easy, ideally 1-click checkout for customers to complete their orders.

2. Where appropriate, are you using structured data markup?

Where it makes sense, use appropriate markup on your desktop and mobile sites. This should allow rich snippets to appear in mobile SERPs.

3. Is your mobile site optimised for local search?

Approximately 40% of mobile search is local. There are two big ways to take advantage of this fact:

• Make use of geo-positioning features, such as the HTML5 Geolocation API.
• Optimize your mobile strategy for Local Search. This also ties in with using structured data (as above).

4. Is your video content optimised for mobile viewing?

Video is one of the most common things people do on their mobile devices. To make the process as easy as possible, consider the following:

• Don’t use Flash for embedded video content; use HTML5.
• Check out these tips on optimizing video for mobile.

Well there you have it, folks! Hopefully this list will come in handy for those who want to optimize a mobile site.

Did you find this information helpful? What kinds of experiences have you had in this area? What other tips and tools would you add to this list? Leave your thoughts in the comments below!