A webdesign layout type (also called web page layout or web layout) defines basic graphic properties or display parameters (layout) of a web page. These parameters give a Web browser information about how content (for example, images, text, videos, and so on) should be displayed on a device.
For visual representations within a design process, a layout should give an impression of how the result will look in the meantime or at the end. A layout can be anything from pure text, to added images, to elaborate animations, to show the functionality of the future web page as the final result.
Standard layout types edit
When designing a website with its individual web pages, there are different approaches and properties of how a design should behave on an end device after completion. These are summarized in the standard layout types. For standard layouts, only one size unit is used for the horizontal display within the display window.
Fixed layout edit
A fixed layout is designed with predefined pixel values (px) for its dimensions, which means that this type of layout cannot adapt to display windows of different sizes on terminal devices.[1]
As a solution to this problem, the mobile devices linearly scale the Web page so small that it is displayed completely on the mobile device, or horizontal scroll bars appear in the display window[1][2] to allow the Web page to be read completely by moving the display area. Many end devices have a larger display area than the maximum required, which can result in unused white space.[3]
Fluid layout edit
Fluid layouts are adapted to the size of the display window by means of percentages (%), this is also called adaptation to the viewport. Thus the layout adapts flexibly to different display areas, hence the word "fluid" for "fluid or continuously deforming" or another possible term "flexible layout".[1] This means that when the dimensions of a display window are changed, the positions of the contents are also adjusted as the layout changes. However, the size of contents (e.g. texts, images) remains the same.[1][2]
Elastic layout edit
This type of layout is called "elastic layout" and is based on typographical information, which means that the main focus is on the text of a web page. Font size specifications are given in the relative unit em (1 em = 16 px as default in the web browser). Therefore, the properties of this layout type always adapt to the currently set font size.[2] Most web browsers already implement this behavior, even in principle, by using the page zoom function.[1] An alternative size unit for this layout type is rem.
The Wikipedia web design, for example, uses an elastic web layout for the presentation of the articles.
Hybrid forms edit
Layout types can be combined in hybrid forms[2] to compensate for the disadvantages of the respective layout type and thus the individual advantages complement each other. Different size units of the individual layout types (e.g. px, em, rem, %, ...) can be used simultaneously within a mixed form.
Adaptive layout edit
The adaptive 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 web page from a certain width of the display window.[4] These previously defined width sizes are also known as breakpoints. The number of display versions can be freely selected, allowing any number of breakpoints to be used.[1]
Responsive layout edit
A responsive layout, also called a responsive layout, combines the properties of a fluid layout with an adaptive layout.[4] Within the layout, fixed break points are defined in which parts or the entire layout changes significantly. Between these pagination points, this layout type behaves like a fluid layout.[1] The contents (such as texts and images) of a responsive layout are scaled to fit the available space within the layout.
Layout approaches edit
Due to the different screen resolutions and due to the historical development of the forms of presentation or web design, two layout approaches have become established from a practical point of view. One is known as Mobile First and the other as Desktop First. These names refer to the respective starting point of an approximate display size of the end devices for the first layout of a web page.
These approaches are intended to bring the content of a website into focus so that it is clear and readable for website visitors.[5]
Desktop first edit
This term is also known as the Graceful Degradation[1] Approach or desktop site. It takes the layout development approach from the perspective of computer screens, scaling from desktop width to tablet width and then to smartphone width. This can be beneficial for relatively complex websites.[5]
Mobile first edit
This term stands for the creation of a layout first for mobile end devices (e.g. smartphones) with subsequent scaling for the wider end devices such as tablet and desktop.[5] Luke Wroblewski already coined this term in 2009 and published new strategies and approaches very early on in his book "Mobile First".[6] The focus will be on prioritized content, which is why this approach is also known as Content First.[1]
Integration into a website edit
For the description and alignment of a layout type, a Cascading Style Sheet (CSS) can be used with the help of breakpoints or "In One Inline - CSS" directly in the HTML code, which communicates the required parameters to the web browser for display in the display window. The default CSS styles for the respective starting point of the first web page layout apply. This would be the smallest possible screen for the Mobile First approach and the highest possible resolution within the layout for the Desktop First approach.[1]
Conversion between layout types edit
The standard types are mostly further developed for mixed forms, such as Responsive Web Design, and then converted from fixed size values with pixels to flexible size values with percentages, for example. CSS grid systems[1] are used for this purpose and the content is thus converted from rigid structures into flexible structures so that they can adapt to their changing environment in a controlled manner.
Conversion between layout types edit
The standard types are mostly further developed for mixed forms, such as Responsive Web Design, and then converted from fixed size values with pixels to flexible size values with percentages, for example. CSS grid systems (CSS grids) are used for this purpose and the content is thus converted from rigid structures into flexible structures so that they can adapt to their changing environment in a controlled manner
Sources edit
- ^ a b c d e f g h i j k "Responsive Webdesign - Konzepte, Techniken, Praxisbeispiele". Rheinwerk Verlag GmbH. Retrieved 2020-07-23.
- ^ a b c d "Grundkurs gutes Webdesign - Alles, was Sie über Gestaltung im Web wissen müssen". Rheinwerk Verlag GmbH. Retrieved 2020-07-23.
- ^ "Die Layout-Typen einer Website: Fixed, Fluid & Elastic". kulturbanause® blog (in German). Retrieved 2020-07-23.
- ^ a b "Adaptive Website vs. Responsive Website". kulturbanause® blog (in German). Retrieved 2020-07-23.
- ^ a b c Jürgen Wolf (2015), HTML5 und CSS3 - Das umfassende Handbuch (in German) (1 ed.), Bonn: Rheinwerk Verlag, pp. 567 ff., ISBN 978-3-8362-2885-5
- ^ Wroblewski, Luke. "LukeW | Mobile First -a mobile strategy & design book by Luke Wroblewski". www.lukew.com. Retrieved 2020-07-23.