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:
- 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
- you don't need media queries and media queries will not make your site automatically mobile friendly
- 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
It doesn't use media queries at all and it passes Google verification.
So it's just the viewport?
Well, theoretically yes! Specifying a viewport like<meta name="viewport" content="width=device-width,initial-scale=1.0"> is like specifying a <!DOCTYPE html> to avoid browser quirks. The viewport tells the browser that the site is compatible with the device width and would like to be shown at its default full scale, instead of trying to put the entire site within the display, simulating a Desktop behavior.However, if you just add the viewport meta tag but you don't test the site is actually usable on a resolution with max 320 virtual CSS pixels, which is a quite common minimum denominator for mobile phones, the site won't become automatically Mobile Friendly.
What are the challenges
The matter in terms of usability, user experience, and design, together with the different interaction model is complex, that is why you need to hire professionals or update your skills. Let's start small at least, with some hint:- stop using Desktop CSS pixels to define font size. The old
11px Arialdefault should be banned from the Web, IMO, let the browser decide the right size for its display capabilities and goemorrem - avoid fixed dimensions, use
max-widthinstead ofwithwhenever it's possible. This gives free down scaling in all browsers already - Don't style too much buttons, selects, or forms, most devices have their own native implementations and usually look better and feel better than anything else. Also, the size is usually the right one
- verify that you have at least 32px of virtual CSS area to click links and/or press buttons. Kids, as well as big grown up people, have the same right to be able to click a link or button, small to big fingers shouldn't be a barrier
Media Queries To The Rescue!
Media queries have been introduced to help solving multiple resolutions. These are both easy to use and powerful.Media queries can be used to make the site "fully responsive" thanks to their ability to target ranges of resolutions. We still need to test all of them, there's never magic behind layouts and design, we all know it.
That's why media queries are actually not even needed, but if used, will not make any page automatically Mobile Friendly.
At least we can use media queries to temporarily make our website mobile friendly, showing the minimum amount of necessary features such a contact page, with a contact form, eventually an image of where we are, and anything you would put at least in your credit card.
Maybe your website hasn't been even created to run on mobile, providing a nice way to inform your customers they need big Desktop screens is better than letting them think that your website is, or feel, broken.
You Have One Job
This is the embarrassing part I've read here and there and I'd like to share this because it's hilarious. I'm afraid stories like this do not ever surprise anyone in Italy, but basically 2 days ago companies started scamming via phone saying any sort of FUD in order to make Companies website "available on Google", spreading the rumor that their website was risking to disappear or not being found anymore: don't believe them!There are also Web Agencies and Web Developers that sell the "Mobile Web friendly thing" as package a part ... they actually ask extra money to develop a website that will provide some info on mobile too. Who the hell wouldn't have such option by default in 2015? Why is that even an option?
I've read so many ignorant statements about this matter I hope I've provided some basic to stop fooling ourselves and our customers ... aren't we the first one laughing in anger when we visit a website that looks crap on our smartphone?
As Summary
If you are a Web Developer please don't fool your customers. If you want to give a Mobile option, that would be eventually a fully responsive, App-like, website, not the fact every website developed or updated today should be Mobile Friendly, of course, it has to!Like I've said in a previous post, It's your duty to develop for the Web, which these days includes Mobile, it's not an option.
The option eventually could be the amout of features and App-like patterns should be included in the mobile friendly version, but that's another story, not how the default offer should be.
Developing in 2015 a website that won't be usable on mobile, in the mobile era which in case we didn't realize went full steam in 2007 and not yesterday, should be penalized indeed so I honestly thank Google for this: it's time to wake up and update our knowledge ... aren't we Web Developers after all? Let's keep our job updated, it usually means more secure too against competitors. It's a win/win ;-)
Thanks for reading, and thanks in advance for making the Web more awesome than ever!
