We show you the most important principles of responsive design
Responsive Web design: Previously everything was easier
In the past, everything was easier: Web designers were able to follow fixed sizes and standards and target their projects either to the desktop view or to the mobile Internet. This time is over – whoever wants users to be able to consume their own content no matter where they are and no matter which terminal they use, must deal with Responsive Web design. And this is sometimes not so easy.
- “Responsive Web design” versus “Adaptive Web design”
Responsive and Adaptive Design are similar, but not the same. “The two approaches complement each other, so there is no” right or wrong “here,”
- The flow
The narrower the screen of the terminal on which the content is played, the more elements are arranged one below the other instead of next to each other. All later content slides further downwards accordingly. This is called the flow.
- Relative units
If the size of the screen on which content can be displayed varies, the pixel density of the displayed area is no longer carved in stone. For web designers, it makes sense to move away from fixed pixel presets and instead to define relative units of measure – such as “50 percent of the screen” or “100 percent of the screen”. These are then adapted to the output format used.
Breakpoints define where the layout of a page is allowed to break. In this way, web designers can ensure that a change in the design, for example when the page narrows, does not lead to a content break. “But use breakpoints with circumspection, when it is difficult to understand which content elements are interdependent, breakpoints can quickly create chaos.
- Maximum and minimum values
This principle prevents content on the Smartphone or the tablet from being displayed too small – or too wide on larger screens. Simply define a pixel value for the maximum width and the distortion effect will remain.
- Nested objects
Here several content elements are grouped within a container and can thus be moved together. This often makes the work for web designers easier because they do not have to process so many elements individually.
- “Mobile First” and “Desktop First”
These two guiding principles of responsive web design indicate which starting point for the design of a web page is set: I start on the small screen and adjust the design for larger resolutions – or I start with the desktop version and work on the smaller Smartphone- Sizes before? “Technically, there are no big differences. Get going and see which approach works better for you.
- Web fonts and system fonts
The choice of embedded fonts can affect the load times of the web page. While Web fonts are available in a lot more variants and they can personalize a page very nicely, the system fonts pre-installed in the users’ operating systems are displayed “fast as the flash”, as long as the selected system- Setup of the user.
- Bitmaps and vectors
If logos and graphics have a small file size and should scale well, it is advisable to access vectors, such as SVG files or icon fonts. Images in JPG, PNG or GIF format usually need to be optimized and are much larger. However, they can show details or effects better than vectors, and not all browsers support SVG formats. “So choose carefully”.