It’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.
- 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
- 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.
- The content is not blocked on mobile.
That is related to #2 – You want to enable a good rendering of the site.
- Use Google webmaster tool to make sure your site is in good shape.
- Serve Googlebot the same site as regular user.
- Avoid mobile specific 404s: http://www.example.com/updates -> m.example.com/updates 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.
- Use: google.com/webmasters/tools – to debug issues with your web server’s configuration.
- 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?
- Chrome Emulation (ctrl+shift+i or cmd+opt+i > [click on the mobile icon]
- Webmaster Tools Fetch as Google and Render – See how Google sees your site.
- PageSpeed Insights – Fix these ‘low hanging fruits’ first and you are on the right track.
- Web Fundamentals – A comprehensive resource for multi-device web development. You can also check my presentation on web fundamentals for developers.
- Web master tools provide you with a lot of important information.
- developers.google.com/webmasters/smartphone-sites/ – Bonus: Search for the (new) Mobile usability tool inside webmaster.