Posted by Kristina Kledzik
Now that it's 2014, the question isn't "should I build a mobile site?" It's "how do I build a good mobile site?" Mobile sites are, at their core, just sites; but redesigning your site for very small screens and linking your mobile site to your desktop site gives you a lot more to think about.
I've put together a checklist of a) aspects of mobile sites that are often broken yet overlooked, and b) optimization options that many people miss. Where you need more information, I've included a link rather than a full description, so that people smarter than me can help you with the details.
Connecting your mobile site with your desktop site
Check your redirects
- Are redirects set up to get visitors to the specific page they were trying to view, not the homepage?
- Are mobile visitors redirected to the mobile version of the site?
- Are desktop visitors redirected to the desktop version of the site?
Allow mobile visitors to see the desktop version of the site
- Is that option easy to find?
- Once mobile visitors choose the desktop version of the site, will they remain on that version as they browse the site? Or will your redirects send them back to the mobile version of the site each time they click on a page?
Dynamically served sites: Check the Vary-HTTP header
- Have you set up a Vary-HTTP header to tell Google and browsers that you vary the HTML by user agent?
Separate URL sites: Check rel=alternate/canonical tags
- Are desktop pages set up with a rel="alternate" tag pointing to the mobile version of that page?
- In the header, add: <link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.domain.com" />
- Are mobile pages set up with a rel="canonical" tag pointing to the desktop version of that page?
- In the header, add: <link rel="canonical" href="http://www.domain.com" />
Technical issues
Check Crawl > Crawl Errors and choose the Smartphone tab. This only shows URLs that are a problem for mobile crawling, but not standard desktops:
(We have one error. :( )
- Google will return pages that it's having a hard time crawling.
Check/add the mobile XML sitemap
- Have all mobile pages been submitted to Google via an XML sitemap in Google Webmaster Tools?
- Keep mobile pages separate from desktop pages; Google Webmaster Tools reports on the number of pages indexed by separate sitemap. If you keep the two separate, you'll be able to see if fewer mobile pages are indexed than desktop pages.
Review the mobile site as you would review any site Check the site speed for mobile devices
- Google offers an excellent page speed tool that gives a list of recommendations based on its crawl of your site.
- This is a more important step than it is in desktop optimization, since phones have less computing power and heavy coding and/or images will lead to an even slower mobile user experience.
Use server-side redirects
- Server-side redirects are generally faster, since they don't rely on the weaker computing power of a phone.
- 301 and 302 redirects send the same message to search engines, so you can use either type.
Design
View the site on a variety of mobile devices
- Does it look good on a number of phones?
- Check the top phones on the market. Good examples are the iPhone (iOS), Samsung Galaxy S4 (Android), Nexus 5 (another Android), and Nokia Lumia 520 (Windows).
- Check the top phones that your visitors use, as reported by your web analytics.
- Does it look good on a number of tablets?
- Check the top tablets on the market. Good examples are the iPad (iOS), Samsung Galaxy Tab in multiple sizes (Android), Kindle Fire (Amazon), and Asus Transformer Book (Windows).
- Check the top tablets that your visitors use, as reported by your web analytics. Pay attention to the top tablet sizes as well.
Check the size of links
- Are all links given a 28x28 pixel margin between other links, so they're easy to click with a finger?
Check that no elements rely on Flash
- iPhones can't render it at all, and it's slow on Android.
- Look for sneaky uses of Flash, like Flash Player for video.
Make sure the mobile site design matches the desktop site design Use a viewport tag
- Set up a viewport tag to let mobile browsers resize pages so they fit devices perfectly.
Don't use pop-ups
- They're too easy to accidentally click and completely take the visitor away from the page s/he wants to be on.
- They slow down loading time.
Responsive sites: Review where elements end up
- On mobile versions of the site, are the most important elements at the top? Make sure you don't move important right hand elements, like the "add to cart" button, below all other content.
- On tablet versions of the site, does everything still make sense?
Navigation
Make sure visitors can reach all pages on the mobile site Separate sites: Link to desktop-only pages as well as mobile pages
- Only offering a small portion of your desktop site to mobile visitors is frustrating.
- If visitors aren't interested in that content, including a link won't cause a problem because no one will click on it.
- If visitors are interested in that content, you can use analytics data to show that mobile visitors choose to click on that link.
Content
Map mobile to desktop pages
- There should be an equivalent mobile page for every desktop page.
- There may be more mobile than desktop pages, since it's often easier to navigate mobile sites if you break up the desktop content into multiple pages.
- In some instances, you may have extra mobile pages based on location capabilities, but it's still best to offer them in both versions, so visitors never feel like they can't find something they remembered on your site.
Edit wordy content
- Mobile visitors have to deal with small screens, and are often on the go and have less patience.
- Get the same message across as briefly as possible.
Remove unnecessary images
- They slow down page loading time and aren't needed to fill up extra screen space.
- Ads are particularly annoying on mobile screens, so if ads are a side business and not your primary source of revenue, consider cutting back on them on your mobile site.
Video
View videos on the mobile site to make sure they load and run properly Use an HTML5 video player
- It's lightweight and easy for phones to render.
- If you're using a major hosting platform, you're probably already using an HTML5 video player.
Make your videos responsive
- Necessary if you have a responsive site, but still recommended if you don't. Since phones are different sizes, you want the video to snap to fit the screen width.
- If you're hosting YouTube, Vimeo, or your own videos, you can add a bit of code to make them responsive.
- If you're using a paid platform like Wistia, they may offer code to make videos responsive (Wistia's is Video Foam).
SERP differences
Does each page title look good on two lines?
- Google still gives you approximately 70 characters (512 pixels) in your page title, but the width of the screen forces the page title into two lines.
Does your meta description still work with only 120 characters?
- Google cuts off mobile meta descriptions at approximately 120 characters rather than 150 characters in their SERPs.
Is your mobile URL user-friendly and keyword rich?
- Google displays the mobile URL rather than the desktop URL for mobile searches, as long as redirects have been set up properly.
Final check
Run pages through the W3C's mobileOK checker to make sure you haven't missed any small coding errors. It's fairly finicky, but that makes sure it finds a lot of issues you may have overlooked.
Sign up for The Moz Top 10, a semimonthly mailer updating you on the top ten hottest pieces of SEO news, tips, and rad links uncovered by the Moz team. Think of it as your exclusive digest of stuff you don't have time to hunt down but want to read!
from Moz Blog http://ift.tt/1hWPCAC
