Responsive web design

What is responsive web design?

Responsive web design is an approach to creating website graphics that takes into account the different types of devices that visitors use when browsing the web. The user's device adjusts how the content is displayed on the page according to the screen size.

Responsive design optimization ensures that the site is functional and clear when using a variety of devices, such as:

Mobile Phones
Tablets
Smart TV
Laptops
Desktop Computers

Mobile-first indexing

Mobile-first indexing means Google predominantly uses the mobile version of the content for indexing and ranking. Historically, the index primarily used the desktop version of a page's content when evaluating its relevance to a user's query. Since the majority of users now access Google Search with a mobile device, Googlebot primarily crawls and indexes pages with the smartphone agent.

"Starting July 1, 2019, mobile-first indexing is enabled by default for all new websites (new to the web or previously unknown to Google Search)"

(Source: developers.google.com)

Benefits of responsive design

Web responsiveness affects SEO
The number of smartphone users is still growing
More than half of all online purchases and reservations are made via phone
Using a single platform for multiple devices reduces your costs

Brief history

Flexible layouts before responsive design

At one point in history you had two options when designing a website:

You could create a liquid site, which would stretch to fill the browser window
or a fixed width site (size fixed in pixels)

These two approaches tended to result in a website that looked its best on the screen of the person designing the site! The liquid site resulted in a squashed design on smaller screens and illegibly long line lengths on larger ones.

The fixed-width site risked a horizontal scrollbar on screens smaller than the site width, and lots of white space at the edges of the design on larger screens.

A number of approaches were developed to try to solve the downsides of the liquid and fixed-width methods of building websites. In 2004 Cameron Adams wrote a post entitled Resolution dependent layout, describing a method of creating a design that could adapt to different screen resolutions. This approach required JavaScript to detect the screen resolution and load the correct CSS.

Zoe Mickley Gillenwater was instrumental in her work to describe and formalize the different ways in which flexible sites could be created, attempting to find a happy medium between filling the screen or being completely fixed in size.

Responsive design

The term "responsive design" was coined by Ethan Marcotte in 2010 and described the use of three techniques in combination.

The idea of fluid grids, something which was already being explored by Gillenwater, and can be read up on in Marcotte's article, Fluid Grids (published in 2009 on A List Apart).
The idea of fluid images. Using a very simple technique of setting the max-width property to 100%, images would scale down smaller if their containing column became narrower than the image's intrinsic size, but never grow larger. This enables an image to scale down to fit in a flexibly-sized column, rather than overflow it, but not grow larger and become pixelated if the column becomes wider than the image.
The third key component was the media query. Media queries enable the type of layout switch that Cameron Adams had previously explored using JavaScript, using only CSS. Rather than having one layout for all screen sizes, the layout could be changed. Sidebars could be repositioned for the smaller screen, or alternate navigation could be displayed.

(Source: developer.mozilla.org)

Tools for testing:

The Mobile-Friendly Test describes issues that can affect your page when accessed on a smartphone.

The Search Console mobile usability report describes issues that can affect your page when accessed on a smartphone.

The Chrome browser supports several smartphone layouts in the device mode and mobile emulator.

Does your website use responsive design?

If not contact us and we will create a responsive web design for your website or e-shop. For more information about responsive web design you can contact us at +420 602 426 001, info@gmmedia.cz or further contacts are here.