The first responsive web design site was created around 2002 for Audi. Today, more than a decade later, many websites still have not adhered to the new standards that allow visitors to have an adaptive experience when visiting their websites. In this article we discuss the importance of using a responsive web design and how it can affect your website visibility with search engines.
Why is There Such a Big Emphasis in Responsive Web Design?
Internet has become mobile. Most of our internet traffic today originates from mobile devices, such as smartphones. This means that a lot of times we are constrained by display sizes, requiring websites to automatically adapt to be displayed nicely.
Google knows this and has been implementing algorithm updates that place emphasis on mobile compatibility and optimization. An example of this emphasis is the Mobilegeddon update that Google released in April of 2015.
While this update does not affect searches made from desktops, it does affect searches made from mobile devices. Two years ago Google started labeling mobile-friendly websites, giving users a visual identification for mobile-friendly pages. It was also a ranking signal for Google.
This past week, Google announced that they will be removing the mobile-friendly label from the results page. The mobile-friendly criteria, however, will continue to be a ranking signal, so every webmaster must continue to optimize their websites to meet these criteria.
Mobile Versus Desktop
Which of the following website layouts is easier to read from a mobile device?
In the example above we can see how the Greenpeace website was designed to adapt to the device and display in a responsive manner.
The smartphone on the left is rendering the page for a mobile experience while the smartphone on the right represents the desktop rendering of the website for a desktop-like environment. As you can see, it would be extremely unpleasant to view and browse the desktop rendering of the website from the small mobile device.
Some of the characteristics of a responsive mobile website include:
- Navigation menu – It is visible and easily accessible at the top of the page.
- Call to action button – It is prominently displayed to direct the visitors to the most important element of the website.
- Padding and white space – Elements are not crowded and misaligned.
- Font size – Texts are not small and difficult to read, and visitors are not required to zoom in to view the content.
- Design integrity – The elements of the pages are scaled consistently throughout the website (fluid grid).
- Compatibility – One website design is perfectly compatible with various devices.
- Speed – Elements are optimized to provide a fast browsing experience.
Mobile first. If you are building a new website, there are no excuses for not creating a responsive design experience for your visitors. If you already have a website and it is not yet optimized for a mobile experience, you really need to make it a high priority!