Responsive web design
Responsive web design has provided a great improvement in the usability of websites on different devices. Websites with a responsive [...]
October 11, 2016
The Responsive web design has provided a great improvement in the usability of websites on different devices. Websites with a responsive layout are no longer rigid in their design, but adapt dynamically to screens of different sizes. An important cornerstone for responsive web design was laid by the American web designer Ethan Marcotte in an article in 2010, in which Marcotte also introduced the CSS "media queries", which are now important components of many websites.
For a long time, Responsive Web Design was not a very big topic. Only with the increasing spread of smartphones (first and foremost the iPhone) and other internet-capable devices did this discipline get a real boost. As a self-experiment, you can use a smartphone to look at a website that was created in the early 2000s and has not been revised since. It quickly becomes clear that usability leaves a lot to be desired here. Fonts are too small, pages are overcrowded and links are only clickable with a magnifying glass. Quickly researching the opening hours of a local store can be a real test of patience. One of several solutions to overcome this problem is responsive web design.
The biggest challenge of Responsive Web Design is probably the high number of different devices with their different screen sizes. From very small smartphone displays, tablets and notebooks to large monitors - a website should be displayed optimally on every device. But not only the dimensions vary, but also the resolution density. For example, the Retina display of the iPhone 6 has a dot density of 326 ppi, while that of the MacBook Pro with Retina display is only 227.
Moreover, mobile devices work differently than the desktop computer. Here, there are no mouse cursors that could activate hover states. Clickable areas must therefore be all the more recognizable as such. Ultimately, the goal is to do justice to each individual device and thus provide all website users with optimal display and operation.
In order for a website to be displayed optimally on every device, it must be able to query some information. This includes, for example, the available space or the device orientation (portrait/landscape). So-called CSS media queries are used for this purpose. These are already familiar from other areas of application - stylesheets are often provided for a specific browser or for printing.
With the help of the media queries (in CSS2 these were still called media types) various data can be queried, for example:
For example, if you now want to specify that a website should have a black background on screens with a width of at least 1000px, the appropriate command might look like this:
@media only screen and (min-width: 1000px) {
body {
background-color: #000;
}
}
Now every web designer has to decide for himself how to set his breakpoints. The following approach would be possible:
@media (min-width:320px) { /* smartphones */ }
@media (min-width:481px) { /* e-readers (portrait), smaller tablets, smartphones */ }
@media (min-width:641px) { /* E-Readers (Landscape), Tablets (Portrait), Smartphones */ }
@media (min-width:961px) { /* Tablets, laptops and desktops with low resolution */ }
@media (min-width:1025px) { /* Larger tablets, laptops and desktops */ }
@media (min-width:1281px) { /* High-resolution laptops and desktops, TVs and projectors */ }
It is recommended to start with the smallest size and then gradually work your way to the breakpoint with the largest width. This approach is also called Mobile First. Theoretically, it is also possible to proceed the other way around. However, the mobile-first approach offers some advantages, such as the prioritization of important content and the associated hierarchical arrangement.
Now, Responsive Web Design is not the only solution for delivering smartphone-friendly websites. Below are two other approaches.
In some aspects, an adaptive layout is not so different from a responsive layout. Here, too, media queries are used and an attempt is made to adapt the design to the screen size. However, this is not done smoothly, but with rigid breaks. Adaptive web design is therefore more adaptive than responsive. Usually, one version each is created for desktops, tablets and smartphones, each of which has a fixed layout. While such a rigid grid is not an optimal solution, it is at least a start.
The advantage of this method is that it is quite quick and easy to implement, because you can work with fixed dimensions and thus create the exact design for each selected viewport. However, this is also the biggest disadvantage, because with the large number of different devices, a handful of viewports is not enough. Ideally, a separate design would have to be defined for each new display size - an undertaking that makes little sense in reality. You can read an interesting article on this topic read here.
A second alternative to Responsive Web Design is a separate website version for mobile devices. This is separate from the desktop version and can therefore be optimized for mobile devices. This is possible, for example, by means of dynamic serving or a separate URL for the mobile page. With dynamic serving, the server delivers a different code depending on the user agent. It should be noted that a separate mobile website version can lead to more work and the implementation of changes can take longer.
Ultimately, responsive web design is about providing the user with an optimized website with maximum user experience and usability - regardless of the end device. Whether a responsive layout is the right approach depends on how well or poorly it is implemented.
Interesting links:
Original article by Ethan Marcotte on Responsive Web Design: http://alistapart.com/article/responsive-web-design
Sebastian Lochbronner
86830 Schwabmünchen
Germany