Responsive web design, or simply RWD, is constructed in the form of a flexible layout of the website, which is able to support virtually any device. In this case the entire page code is downloaded, which on one hand is convenient, on the other – reduces the speed. If your intention is to optimize the existing site using responsive approach, keep in mind that you’ll have to rebuild the entire site and rewrite the code from scratch. This kind of approach will be appropriate for web sites with a relatively simple structure that is easy to alter in the future.
For example, adaptive design will fit users who search a variety of information and perform a variety of actions on both mobile devices and computers. But as practice shows both of these approaches are well combined. Adaptive design widely uses responsive technologies that allow creating more flexible layouts.
These are separate strategic approaches in the design of websites and play different roles for SEO. Let’s see what peculiarities distinguish responsive web design from the rest:
1. Responsive layout uses HTML and CSS only without JavaScript in order to properly define necessary design elements.
2. The layout defines how elements of the site will look on different devices; however, these elements are not hidden and not replaced by others, their behavior, as well as their functions don’t change either.
3. Three basic principles of RWD are:
– all elements are located within the modular grid;
– all elements of layout and media files are flexible – their size depends on the size of the screen;
– working with media queries through CSS3 allows you to specify different styles, depending on the screen resolution, size and other characteristics.
4. Adaptive layout (not to be confused with an adaptive design) allows the site to have several styles, various elements on a modular grid. These options interchange when the screen is resized, with some form of transition point between the different types of layout.
5. It is not intended to work with models of elements and their objectives on the page, also doesn’t imply a change in the hierarchy and the type of markup.
In practice responsive approach is more widely used than the adaptive one. And it is obvious why – RWD is easier to implement and is very beneficial for SEO purposes. Most templates on sale are responsive. Adaptive design is often used in bigger and multifunctional products; the most obvious examples are mobile versions of social network websites, web mail services, etc.
