Responsive web design – an introduction
Due to the increasing spread of smartphones and tablets and the increasing variety of devices on which websites can be displayed, the requirements for web design have changed fundamentally. Designers and developers no longer know in what size their website is displayed, how fast the visitor’s Internet connection is or whether a mouse or a touchscreen is used for operation. Conventional websites, which rely on a fixed width for display and whose operation is optimized for either the desktop or the smartphone, can no longer meet the different needs of the users. A new approach is needed – responsive web design!
As a responsive web design is any measures which sites are created so that they are displayed on different devices as possible optimal. This relates to questions of design and operation as well as to the technical implementation.
A responsive website consists of three “main ingredients”:
- A fluid layout grid
- Adaptable content
- Media queries (breakpoints) that fundamentally change the layout at strategic points
The fluid grid
Most websites use layout grids for their design. These design aids (taken from classic graphic design) divide the screen space across the width into a series of columns. B. 12 columns. Popular tools for developers, such as the Bootstrap framework, provide such a grid system.
In non-responsive web design, the grid would be set to a certain width in pixels, e.g. B. 960 pixels. A column would then have a width of 80 pixels. If the browser window is now not 960 pixels wide, but much smaller, the layout would be cut off or reduced to a smartphone screen size. Neither of these is an ideal situation. With much larger screens, such a design would be centered, which is less of a problem, but wastes space.
A fluid raster does not use pixel values, but rather percentages. Instead of 960 pixels, the total width is defined as 100% of the browser window. The columns are also specified with percentages. In this way, the grid automatically adapts to screens of different sizes.
Adaptable content
A fluid grid doesn’t help much if the content in it cannot be displayed in different sizes – to match the grid. This is not a problem with plain text: the browser automatically breaks it. The lines are then simply shorter on smaller screens. But even with pictures it becomes more difficult. (Bitmap) graphics have natural widths and heights that are specified in pixels when the graphic is created. The graphics are normally displayed by the browser in these values and would “blow up” the layout without additional measures.
Let us assume that a graphic is to be displayed in full screen at the top of the page. On a typical desktop computer, it would have to be around 1200 pixels wide. Only a small section of this would be displayed on a smartphone with a calculated screen width of only 320 pixels. Fortunately, the natural dimensions of graphics can be overwritten by CSS instructions.
With the instruction
img {
width: 100%;
height: auto;
}
the browser is told that it should display all graphics in 100% of the width of the surrounding area. In our example, that would be the entire page – but it could also be a single column. With the second instruction we then specify that the height should adjust proportionally to match the width – after all, the image should not be distorted.
In this way, all content must be designed flexibly – there are corresponding approaches for tables, picture galleries, videos, maps or advertising banners so that they work on different devices.
Media queries
Despite these two ingredients, the size differences between a smartphone and a 22-inch screen are so large that they cannot be managed with a single layout. Imagine a homepage that displays content (e.g. teaser boxes) in four columns. On a smartphone, these columns would be far too narrow to accommodate content.
This is where the media queries come into play, which have been part of the CSS vocabulary since CSS3. Media queries can contain media properties such as: B. the width of the screen, and react to this information with different styles. The developer can specify that a layout that is displayed in four columns on a desktop computer with a wide screen has only two columns on a narrower tablet and only one on a smartphone.
A media query looks like this, for example:
@media only screen and (max-width: 600px) {
body {
background-color: yellow;
}
}
The decisive factor is the condition in brackets – here it is specified when something should happen: in this case, when the page width is a maximum of 600 pixels (i.e. for 600 pixels and all smaller widths). The media queries are noted in the stylesheet and encapsulate the instructions to be executed in brackets. If you copy the example into an existing style sheet and reduce the size of the browser window, the background of the page is colored yellow if the page width is less than 601 pixels.
What’s next?
Now you know the three ingredients for responsive websites. With just a few instructions, you can create a responsive website. But of course the subject of responsiveness is much more extensive. If you want to know more about media queries and responsive web design, the online tutorial from SelfHTML will help you (https://wiki.selfhtml.org/wiki/HTML/Tutorials/responsive_Webdesign) or the book “Responsive Webdesign” by Andrea Ertel and Kai Laborenz .
