To create a website for only one type of display nowadays is unimaginable – thanks to smartphone and tablet. But what is the answer to smooth presentation on multiple devices? "Responsive Web Design" is a frequently-cited keyword. "Responsive Web Design" can be roughly divided into two areas: "adaptive layout" and "responsive layout". But what do the terms actually mean and which of the two should we use? We can shed some light on the mysteries of layout!
What is the difference between adaptive and responsive layout?
Responsive Web Design is designed to present web pages smoothly on every output device – whether it is a smartphone, tablet or Desktop PC. Therefore items such as images, text and navigation bars are "flexible" or "elastic". The web page will be customised for the width of the output medium.
Responsive and adaptive layout are part of responsive web design. They work to some degree with the same elements. This means that hybrids are often produced. However, there are clear differences.
Adaptive layout is created individually for each form of presentation. So there are different outlines for smartphone, tablet and monitor. There is one layout with different fixed widths. Each width is characterised by a so-called "breakpoint".
To test where the breakpoints of a web page are, only the browser window has to be reduced in width. At certain points, the website will "snap" into place. At this point different elements disappear or change: the sidebar disappears, the navigation bar changes, the logo moves and images adapt.
Adaptive Layout
Source: http://cafeevoke.com/
Cafe Evoke has chosen an adaptive layout for its home page. The top image shows the same page three times - on a Desktop PC (1), tablet (2) and smartphone (3). In particular the empty space on the sides of Figures 2 and 3 suggests an adaptive solution. The images and the text are not elatic. There is a pre-defined size for the medium. This is seen particularly in the image slider: A part is simply cut off when switching from desktop to tablet.
Responsive layout
By contrast, a responsive layout is presented with flexible grids. This means that there are still fixed points to which the layout is oriented, however, elements between these fixed points are more flexible. The space of the output medium is always used optimally. This means that space that could actually be filled with content is never wasted.
Source: http://stephencaver.com/
A nice example is the website of Stephen Caver. The three pictures are again representative of desktop (1), iPad (2) and iPhone (3). His site is responsive. It wastes no space. Even if the browser window is smaller, the font and the header fit in proportion to the screen size. There will be no unfilled border on the sides.
The individual elements are relative. A sidebar should, for example, take up a third of the display surface. The images and fonts are elastic in a responsive solution and adjust their size to the output device. It is very forward-looking, as new output devices also allow new resolutions.
Which is better?
The question is easy to answer: responsive layout is the definitive choice. However, there are two sides to every coin, and there are a few reasons why flexible grids may not be the right solution.
A responsive layout must be implemented initially in a website. The images and elements need to be flexible. In particular with companies, a complete rebuild is out of the question, so it is necessary to resort to a more pragmatic solution. Here the answer is adaptive, which can also be installed retroactively.
Working with flexible grids is flexible, as the name suggests. Therefore, it is difficult to judge the finished product. There are no set numbers that allow for perfect planning.
The development of a flexible layout is expensive. The duration and the cost of such a page is significantly higher than for adaptive layouts. The evaluation period is also longer, therefore creating more cost and greater resource requirements.
A responsive layout certainly brings with it enormous benefits. By contrast with an adaptive layout, it is already prepared for new models. It does not need to be re-adapted for future units.
The biggest advantage is the flexbility of the responsive layout. Where the adaptive layout has its limitations, the responsive layout continues to grow. All space is put to the best possible use on every device.
Conclusion
The web designer community is unanimous that "Responsive Web Design is the system of the future". But what is the better choice right now?
For new websites, it is clear: flexible grids and responsive layout are the way forward. Their use on new devices is a must due to the flexibility of the layout.
However, bear in mind that it is more expensive, as an adaptive solution. For existing websites, it is sometimes impossible to insert a responsive layout. They do still need to keep up with the times and adapt to new forms of presentation. For these websites, adaptive layout with fixed widths is just right.