Web design layout type

A web design layout type (also web page layout or web layout ) defines basic graphical properties or display parameters ( layout ) of a web page . These parameters give a web browser information about how the content (e.g. images, text, videos, ...) should be presented on the display of a device.

For the visual representations within a design process, a layout should give an impression of how the result will look in the meantime or in the end. A layout of pure text, added images or even complex animations can show the functionality of the later website as the end result.

Standard layout types

When designing a website with its individual web pages, there are different approaches or characteristics of how a design should behave after completion on a device . These are summarized in the standard layout types. For standard layouts, only one size unit is used for the representation in the horizontal plane within the display window.

Fixed layout

Fixed website layout. Visualization: (1) shows scaling errors when the display area is too small, (2) no errors when the display area fits exactly and (3) scaling errors when the display area is too large.

A fixed layout is designed with previously defined pixel values ( px ) for its dimensions, which means that this type of layout cannot adapt to display windows of different sizes on end devices.

As a solution for this property, the end devices linearly scale the website so small that it is completely displayed on the end device or horizontal scroll bars appear in the display window so that the website can be read completely by moving the display area. Many end devices have a larger display area than what is actually required, which can result in unused white space.

Fluid layout

Fluid website layout. Visualization: (1) shows the initial variant, (2) the first enlargement and (3) the second enlargement.

Fluid layouts are adjusted in their size to the display window using percentage values ( % ); this is also referred to as adjustment to the viewport . Thus, the layout adapts flexibly to different display surfaces, hence the word “fluid” for “flowing or continuously deforming” or another possible term “flexible layout”. As a result, if the dimensions of a display window are changed, the positions of the content are also adjusted with the change in the layout. However, the content (e.g. texts, images) is retained in its size.

Elastic layout

This type of layout is called "elastic layout" in English and is based on typographical information, whereby the main focus should be on the text of a website. The size specifications for the font size are given in the relative unit em (1 em = 16 px as standard in the web browser). This is why this layout type always adapts its properties to the currently set font size. This behavior put most web browsers, even in principle, by the page zooming (ger .: "Page Zoom") already has to offer. As an alternative size unit, rem is also used in this layout type.

Wikipedia web design, for example, uses an elastic web layout for displaying the articles. The German-language Wikipedia almost explains how to use the Wikipedia layout in articles under the article Help: Text design / layout flow together. This type of layout is classified differently in specialist literature and by web designers, either as a mixed form of fixed and fluid layout, or as a standard form. Due to the use of only one size unit, the elastic layout in this article is classified among the standard types.

Mixed forms

Layout types can be combined in mixed forms in order to compensate for the disadvantages of the respective layout type and so that the individual advantages complement each other. Different size units of the individual layout types (e.g. px, em, rem,%, ...) can be used within a mixed form at the same time.

Adaptive layout

Adaptive website layout. Visualization: (1) shows the initial variant, (2) the first break and (3) the second break.

The adaptive layout or adaptable layout is a fixed layout with several display versions for different sizes of display windows. The layout "jumps" automatically to a different display of the website when the display window is a certain width. These previously defined width sizes are also known as breakpoints . The number of display versions can be freely selected, which means that any number of break points can be used.

Responsive layout

A responsive layout, also known as a responsive layout, combines the properties of a fluid layout with an adaptive layout. Fixed breakpoints are defined within the layout, in which parts or the entire layout change significantly. This layout type behaves like a fluid layout between these breakpoints. The contents (e.g. texts, images) of a responsive layout adapt to the available space within the layout by scaling.

Layout approaches

Due to the different screen resolutions and due to the historical development of the forms of representation and web design , two layout approaches have prevailed from a practical point of view. One is known as Mobile First and the other as Desktop First. These names relate to the respective starting point of an approximate display size of the end devices for the first layout of a website.

These approaches should bring the content of a website into focus so that it is clear and readable for website visitors.

Desktop first

This term is also known as the graceful degradation approach or desktop site (i.e. desktop site). The development approach for the layout is chosen from the perspective of the computer screens, so that it is scaled from desktop width to tablet width and then to smartphone width. This can be beneficial for relatively complex websites.

Mobile first

This term stands for the creation of a layout first for mobile devices (e.g. smartphones) with subsequent scaling for wider devices such as tablets and desktops. Luke Wroblewski coined this term in 2009 and published new strategies and approaches very early on with the book “Mobile First”. The focus should be placed on the prioritized content, which is why this approach is also referred to as content first .

Integration into a website

For the description and alignment of a layout type, a Cascading Style Sheet (CSS) can be used directly in the HTML code with the help of breakpoints or "In one line - CSS", which gives the required parameters to the web browser for display in the display window. The standard CSS styles apply to the respective starting point of the first website layout. With the Mobile First approach, this would be selected for the smallest possible screen considered and with the Desktop First approach for the largest possible considered resolution within the layout.

Conversion between layout types

The standard types are usually further developed for mixed forms, such as responsive web design, and then converted, for example, from fixed size values with pixels to flexible size values with percentages. For this purpose, CSS grid systems are used and the content is converted from rigid structures into flexible structures so that they can adapt to their changing environment in a controlled manner.

literature

Printed matter

Andrea Ertel, Kai Laborenz: Responsive web design - programming and designing adaptable websites. 2nd Edition. Galileo Computing (now Rheinwerk Verlag), Bonn, 2015, ISBN 978-3-8362-3200-5
Björn Rohles: Good web design - basic course. 1st edition. Galileo Design (now Rheinwerk Verlag), Bonn, 2014, ISBN 978-3-8362-1992-1
Jürgen Wolf: HTML5 and CSS3 - the comprehensive manual. 1st edition. Rheinwerk Verlag, Bonn 2015, ISBN 978-3-8362-2885-5
Martin Han: Webdesign - The handbook for web design. 3. Edition. Rheinwerk Verlag, Bonn 2020, ISBN 978-3-8362-7216-2

Online literature

Luke Wroblewski, Mobile First , released in 2020

Individual evidence

↑ ^a ^b ^c ^d ^e ^f ^g ^h ⁱ ^j ^k ^l Andrea Ertel, Kai Laborenz: Responsive web design - programming and designing adaptable websites . 2nd Edition. Galileo Computing (now Rheinwerk Verlag), Bonn 2015, ISBN 978-3-8362-3200-5 , p. 29-32, 75, 170 ff .
↑ ^a ^b ^c ^d Björn Rohles: Good web design - basic course . 1st edition. Galileo Press (now Rheinwerk Verlag), Bonn 2014, ISBN 978-3-8362-1992-1 , p. 136-137 .
↑ Jonas Hellwig: The layout types of a website: Fixed, Fluid & Elastic. In: blog.kulturbanause.de. June 7, 2016, accessed April 7, 2020 .
↑ ^a ^b Jonas Hellwig: Adaptive Website vs. Responsive website. In: blog.kulturbanause.de. November 19, 2018, accessed April 7, 2020 .
↑ ^a ^b ^c Jürgen Wolf: HTML5 and CSS3 - the comprehensive manual . 1st edition. Rheinwerk Verlag, Bonn 2015, ISBN 978-3-8362-2885-5 , pp. 567 ff .
^ Luke Wroblewski: Mobile First. In: https://www.lukew.com/ . October 2011, accessed on May 6, 2020 .

[:0-1] ↑ ^a ^b ^c ^d ^e ^f ^g ^h ⁱ ^j ^k ^l Andrea Ertel, Kai Laborenz: Responsive web design - programming and designing adaptable websites . 2nd Edition. Galileo Computing (now Rheinwerk Verlag), Bonn 2015, ISBN 978-3-8362-3200-5 , p. 29-32, 75, 170 ff .

[:1-2] Björn Rohles: Good web design - basic course . 1st edition. Galileo Press (now Rheinwerk Verlag), Bonn 2014, ISBN 978-3-8362-1992-1 , p. 136-137 .

[3] Jonas Hellwig: The layout types of a website: Fixed, Fluid & Elastic. In: blog.kulturbanause.de. June 7, 2016, accessed April 7, 2020 .

[:2-4] Jonas Hellwig: Adaptive Website vs. Responsive website. In: blog.kulturbanause.de. November 19, 2018, accessed April 7, 2020 .

[:3-5] Jürgen Wolf: HTML5 and CSS3 - the comprehensive manual . 1st edition. Rheinwerk Verlag, Bonn 2015, ISBN 978-3-8362-2885-5 , pp. 567 ff .

[6] Luke Wroblewski: Mobile First. In: https://www.lukew.com/ . October 2011, accessed on May 6, 2020 .