On the 21th of April Google released the so-called “mobile-friendly update”. According to the press releases, this update will boost the ranking of mobile-friendly pages on mobile search results. From now on, searchers can easily find high quality and relevant results where the text is readable without taping or zooming, tap targets are spaced appropriately, and the pages avoid unplayable content or horizontal scrolling.

The update in a nutshell:

• It affects only search rankings on mobile devices
• It affects search results in all languages globally
• It applies to individual pages, not entire websites

What does it mean for web developers?

Change in the way developers build websites: user-friendly websites aren’t only desktop domain anymore. From now on, sites that are not optimized for smartphones’ smaller screens would see their ranks downgraded as a result. Or, if we look at this other way around – mobile-optimized websites will be rewarded by Google. The last update fulfills Google’s vision of delivering the most valuable content to its customers. It’s surprising how common it still is to come across websites from top brands that haven’t been properly optimized for the smartphone or other smaller screens. In April, the 21st TechCrunch checked companies from the Fortune 500 list and found that 41% of their websites weren’t mobile-friendly.

So the main question for web developers is how to make my website mobile friendly?

Responsive design

Responsive web design is a term that describes the concept of developing a website design in a manner that helps the layout get changed according to the user’s screen resolution. It implies easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).

The main advantages of responsive design are:

• perfect readability regardless of devices that display your website;
• well-structured appearance for increasing information hierarchy;
• enhanced user experience;
• it is cost-effective – there is no need to have a separate mobile version.

One of the best explanations comes from Josh Clark who explains the idea behind responsive design very clearly in the next quote:

“Content is like water.
You put water into a cup it becomes the cup.
You put water into a bottle it becomes the bottle.
You put it in a teapot it becomes the teapot.

– Josh Clark – Seven deadly mobile myths”

Responsive web designing is an entirely different designing version than traditional web designing. Instead of creating and maintaining multiple versions of the same website for different devices (laptops, tablets, mobiles, e-readers, etc.), responsive design technics allows you to create a single page that will adjust to all devices that the visitors could use to access your website.

 

 

What does it mean in real life?

 

Since responsive design has evolved from “nice to have” to “must have”, we have prepared for you a tutorial on how to build a responsive website using our free Get Shit Done KIT.