My JavaScript book is out! Don't miss the opportunity to upgrade your beginner or average dev skills.

Thursday, April 23, 2015

What Does Mobile Friendly Mean ?

Since Google started rolling out its Mobile Friendly websites privileged algorithm my Facebook stream started showing any sort of related post.
There were developers panicking, other careless but had to post something related anyway, and overall a huge misunderstanding of the meaning of a Mobile Friendly site.

There Is One Web

If you are a Web Developer and you get paid for it, you should develop from the scratch with smaller screens in mind too. This is nothing new, actually, we used to develop for 640x480 or 800x600 screens, with websites able to scale up to 1280x1024 ... remember? Then 1600x1200 came out.
In later 10 years, instead of having the need to upscale only, new smaller screen arrived.
Did anything change? Basically only one thing: the viewport!

Mobile Friendly VS Mobile First

It might come new to you, but these are two completely different things. A Mobile First website is a website created for mobile with an App-like layout and interactions. There are then techniques capable of making the website somehow usable on Desktop too, but the main focus is on what's possible to do on mobile.
Mobile Twitter, Mobile Facebook, and Mobile Here, are examples of Mobile First, and de-facto mobile only, solutions. This makes them Mobile Friendly too, but not so Web friendly, providing an unpleasant experience on Desktop browsers, compared to their Desktop counterpart.

On the other side, a Mobile Friendly website is a website that just works on Mobile too.
This includes the following myth busting:
  1. you don't necessarily need a fully responsive layout, you've been doing responsive panels with images or articles for years, that would mostly do already the trick, if there is the right viewport
  2. you don't need media queries and media queries will not make your site automatically mobile friendly
  3. you DO need to test on a Smartphone, you DO NOT need to be fully compatible with wearables. Apple watch doesn't even have a browser, don't bother much for now
If you don't believe me, this is a basic example of Mobile Friendly website. It contains some basic information on top of some valid CSS3 and a valid HTML5 layout.
It doesn't use media queries at all and it passes Google verification.