Improving Your Mobile Sites

mobile devicesIt’s not a secret that the world is going mobile at a (crazy) rapid pace. We all seen the statistics about it, and we know that the next 4 billion people will see the web only on mobile. This post will focus on how you can build a mobile site that will be ‘in a good relationship’ with Google (and other search engines out there).

Responsive web design is one answer when it comes to ‘how to serve’. You wish to avoid redirects, sniffing for the mobile browsers agents or managing two versions of your sites.

How we can make our site mobile friendly?
Let’s try to think as developers of a search engine. If you were trying to figure out if a site was mobile friendly just by looking at a site, what would you look for? First, the content on our site must be readable on mobile so it should fit within the screen. Second, we will try to make sure that the site is usable.

Main Points

  • Primary content should be accessible by crawlers. So no Flash here. If you have a video, make sure to use the HTML5 options etc’.
  • Viewport must be configured.
    For example: < meta name=”viewport” content=”width=device-width, initial-scale=1.0″ / >
  • Readable font size.
  • No fixed-width viewport.
  • Content sized to viewport.
  • Tap targets clickable: so they are big enough and got space around them.


Checklist for improving your mobile site

  1. All your content is approachable by vertical swiping. Since, it’s not trivial to users and not a good UX to scroll in all 4 directions – you wish to avoid the horizontal one. Moreover, Chrome will switch tabs if users are doing an horizontal swiping too close to the edge of the screen.
  2. The content is not blocked on mobile.
  3. Check if robots.txt or related files are blocking Googlebot from crawling JavaScript and CSS.
    That is related to #2 – You want to enable a good rendering of the site.
  4. Use Google webmaster tool to make sure your site is in good shape.
  5. Serve Googlebot the same site as regular user.
  6. Avoid mobile specific 404s: -> gives 404 (not found).
    Psst… Our RWD approach will solve this issue for us without even thinking about it, since we don’t have the problem of redirects and managing content for 2 domains.
  7. Use: – to debug issues with your web server’s configuration.
  8. Aim to get page rendering in under 1 second. This doesn’t necessarily need to be all the content on your page, but the content above the fold should be there in under 1 second on a 3G network.

We should try to achieve these limits:

  • DNS lookup: upto 200ms
  • TCP connection: upto 200ms
  • HTTP request & response: upto 200ms
  • Server response: upto 200ms
  • Client rendering: upto 200ms

How to test your mobile site?

  1. Chrome Emulation (ctrl+shift+i or cmd+opt+i > [click on the mobile icon]
  2. Webmaster Tools Fetch as Google and Render – See how Google sees your site.
  3. PageSpeed Insights – Fix these ‘low hanging fruits’ first and you are on the right track.



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s