„Webdesign-Layouttyp“ – Versionsunterschied
| [gesichtete Version] | [gesichtete Version] |
Aka (Diskussion | Beiträge) K Halbgeviertstrich, Abkürzung korrigiert, Links normiert, Kleinkram |
K Typo |
||
| (22 dazwischenliegende Versionen von 13 Benutzern werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
Ein '''Webdesign |
Ein '''Webdesign-Layouttyp''' (auch '''Webseitenlayout''' oder '''Web-Layout''') legt grundlegende grafische Eigenschaften bzw. Anzeigeparameter ([[Layout]]) einer [[Webseite]] fest. Diese Parameter geben einem [[Webbrowser]] Informationen darüber, wie die Inhalte (z. B. Bilder, Text, Videos, …) auf der [[Anzeige (Technik)|Anzeige]] eines Geräts dargestellt werden sollen. |
||
Für die visuellen Darstellungen innerhalb eines Designprozesses soll ein Layout einen Eindruck darüber geben, wie zwischenzeitlich oder am Ende das Ergebnis aussehen wird. Dabei kann ein Layout von reinen Texten, über hinzugefügten Bildern oder bis hin zu aufwendigen |
Für die visuellen Darstellungen innerhalb eines Designprozesses soll ein Layout einen Eindruck darüber geben, wie zwischenzeitlich oder am Ende das Ergebnis aussehen wird. Dabei kann ein Layout von reinen Texten, über hinzugefügten Bildern oder bis hin zu aufwendigen [[Animation]]en, die Funktionalitätsdarstellung der späteren Webseite als Endergebnis zeigen. |
||
{{Siehe auch|Layout}} |
{{Siehe auch|Layout}} |
||
== Standard |
== Standard-Layouttypen == |
||
Beim Gestalten einer Website mit ihren einzelnen Webseiten, gibt es unterschiedliche Ansätze bzw. Eigenschaften wie sich ein Design nach der Fertigstellung auf einem [[Endgerät]] verhalten soll. Diese werden in den Standard Layouttypen zusammengefasst. Für Standardlayouts wird nur eine [[Maßeinheit|Größeneinheit]] für die Darstellung in der Horizontalen innerhalb des Anzeigefensters verwendet. |
Beim Gestalten einer Website mit ihren einzelnen Webseiten, gibt es unterschiedliche Ansätze bzw. Eigenschaften wie sich ein Design nach der Fertigstellung auf einem [[Endgerät]] verhalten soll. Diese werden in den Standard Layouttypen zusammengefasst. Für Standardlayouts wird nur eine [[Maßeinheit|Größeneinheit]] für die Darstellung in der Horizontalen innerhalb des Anzeigefensters verwendet. |
||
=== Festes Layout === |
=== Festes Layout === |
||
[[Datei:Festes Webseiten Layout Visualisierung.svg|mini|Festes Webseiten |
[[Datei:Festes Webseiten Layout Visualisierung.svg|mini|Festes Webseiten-Layout. Visualisierung: (1) zeigt Skalierungsfehler bei zu kleiner Anzeigefläche, (2) keine Fehler bei genau passender Anzeigefläche und (3) Skalierungsfehler bei zu großer Anzeigefläche.]] |
||
Ein festes Layout ( |
Ein festes Layout ({{enS|fixed layout}}) wird mit vorher festgelegten Pixelwerten ([[Bildauflösung|px]]) für seine Dimensionen gestaltet, dadurch kann sich dieser Layouttyp nicht an unterschiedlich große Anzeigefenster von Endgeräten anpassen.<ref name="ErtelLaborenz">{{Literatur |Autor=Andrea Ertel, Kai Laborenz |Titel=Responsive Webdesign – Anpassungsfähige Website programmieren und gestalten |Auflage=2. |Verlag=Galileo Computing (jetzt Rheinwerk Verlag) |Ort=Bonn |Datum=2015 |ISBN=978-3-8362-3200-5 |Seiten=29–32, 75, 170 ff.}}</ref> |
||
Als Lösung für diese Eigenschaft skalieren die Endgeräte linear die Webseite so klein, dass diese vollständig auf dem Endgerät angezeigt wird oder es erscheinen horizontale Scrollbalken im Anzeigefenster,<ref name=" |
Als Lösung für diese Eigenschaft skalieren die Endgeräte linear die Webseite so klein, dass diese vollständig auf dem Endgerät angezeigt wird oder es erscheinen horizontale Scrollbalken im Anzeigefenster,<ref name="ErtelLaborenz" /><ref name="Rohles">{{Literatur |Autor=Björn Rohles |Titel=Gutes Webdesign – Grundkurs |Auflage=1. |Verlag=Galileo Press (jetzt Rheinwerk Verlag) |Ort=Bonn |Datum=2014 |ISBN=978-3-8362-1992-1 |Seiten=136–137}}</ref> um die Webseite durch Verschieben des Anzeigebereiches vollständig lesen zu können. Viele Endgeräte haben eine größere Anzeigefläche als eigentlich maximal benötigt, wodurch ungenutzter Weißraum (englisch „Whitespace“) entstehen kann.<ref>{{Internetquelle |autor=Jonas Hellwig |url=https://blog.kulturbanause.de/2012/10/die-layout-typen-einer-website-fixed-fluid-elastic/ |titel=Die Layout-Typen einer Website: Fixed, Fluid & Elastic |werk=blog.kulturbanause.de |datum=2016-06-07 |sprache=de |abruf=2020-04-07}}</ref> |
||
=== Fluides Layout === |
=== Fluides Layout === |
||
[[Datei:Fluides Webseiten Layout Visualisierung.svg|alternativtext= |
[[Datei:Fluides Webseiten Layout Visualisierung.svg|mini|alternativtext=|Fluides Webseiten-Layout. Visualisierung: (1) zeigt die Ausgangsvariante, (2) die erste Vergrößerung und (3) die zweite Vergrößerung]] |
||
Fluide Layouts ( |
Fluide Layouts (englisch „fluid layout“) werden durch Prozentwerte ([[Prozentzeichen|%]]) in ihrer Größe an das Anzeigefenster angepasst, dies wird auch als Anpassung an die Sichtöffnung (englisch: [[Viewport]]) bezeichnet. Somit passt sich das Layout flexibel unterschiedlichen Anzeigeflächen an, deswegen auch das Wort „fluide“ für „fließend bzw. kontinuierlich verformend“ oder eine weitere mögliche Bezeichnung „flexibles Layout“.<ref name="ErtelLaborenz" /> Dadurch gleicht sich bei einer Änderung der Dimensionen eines Anzeigefensters die Positionen der Inhalte mit der Veränderung des Layouts mit an. Dabei bleiben jedoch Inhalte (z. B. Texte, Bilder) in ihrer Größe erhalten.<ref name="ErtelLaborenz" /><ref name="Rohles" /> |
||
=== Elastisches Layout === |
=== Elastisches Layout === |
||
Dieser Layouttyp wird im englischen als „elastic layout“ bezeichnet und basiert auf typografischen Angaben, wodurch das Hauptaugenmerk auf den Text einer Webseite gelegt werden soll. Die Größenangaben für die Schriftgröße werden in der relativen Einheit [[Em (Schriftsatz)|em]] |
Dieser Layouttyp wird im englischen als „elastic layout“ bezeichnet und basiert auf [[Typografie für digitale Texte|typografischen]] Angaben, wodurch das Hauptaugenmerk auf den Text einer Webseite gelegt werden soll. Die Größenangaben für die Schriftgröße werden in der relativen Einheit [[Em (Schriftsatz)|em]] angegeben (1 em = 16 px als Standard im Webbrowser). Deswegen passt sich dieser Layouttyp immer in seinen Eigenschaften der aktuell eingestellten Schriftgröße an.<ref name="Rohles" /> Dieses Verhalten setzen die meisten Webbrowser, auch vom Prinzip her, durch die [[Digitalzoom|Seitenzoomfunktion]] (englisch: „Page-Zoom“) bereits um.<ref name="ErtelLaborenz" /> Als alternative Größeneinheit wird bei diesem Layouttyp auch ''[[rem]]'' eingesetzt. |
||
Das Wikipedia-Webdesign nutzt zum Beispiel ein elastisches Weblayout für die Darstellung der Artikel |
Das Wikipedia-Webdesign nutzt zum Beispiel ein elastisches Weblayout für die Darstellung der Artikel. Dieser Layouttyp wird in der Fachliteratur und durch Webdesigner unterschiedlich eingeordnet, entweder als Mischform aus festem und fluidem Layout,<ref name="ErtelLaborenz" /> oder als Standardform. Aufgrund der Verwendung nur einer Größeneinheit ist das elastische Layout in diesem Artikel bei den Standardtypen eingeordnet. |
||
== Mischformen == |
== Mischformen == |
||
Layouttypen können in Mischformen kombiniert werden,<ref name=" |
Layouttypen können in Mischformen kombiniert werden,<ref name="Rohles" /> um die Nachteile des jeweiligen Layouttypes auszugleichen und damit sich die einzelnen Vorteile ergänzen. Dabei können gleichzeitig verschiedene Größeneinheiten der einzelnen Layouttypen (z. B. px, em, rem, %, …) innerhalb einer Mischform eingesetzt werden. |
||
=== Adaptives Layout === |
=== Adaptives Layout === |
||
[[Datei:Adaptives Webseiten Layout Visualisierung.svg|alternativtext= |
[[Datei:Adaptives Webseiten Layout Visualisierung.svg|mini|alternativtext=|Adaptives Webseiten-Layout. Visualisierung: (1) zeigt die Ausgangsvariante, (2) den ersten Umbruch und (3) den zweiten Umbruch.]] |
||
Das adaptive Layout bzw. anpassungsfähige Layout ist ein festes Layout mit mehreren Darstellungsversionen für unterschiedliche Größen von Anzeigefenstern.<ref name=" |
Das adaptive Layout bzw. anpassungsfähige Layout ist ein festes Layout mit mehreren Darstellungsversionen für unterschiedliche Größen von Anzeigefenstern.<ref name="Hellwig">{{Internetquelle |autor=Jonas Hellwig |url=https://blog.kulturbanause.de/2012/11/adaptive-website-vs-responsive-website/ |titel=Adaptive Website vs. Responsive Website |werk=blog.kulturbanause.de |hrsg= |datum=2018-11-19 |sprache=de |abruf=2020-04-07}}</ref> Das Layout „springt“ ab einer bestimmten Breite des Anzeigefensters automatisch auf eine andere Darstellung der Webseite um. Diese vorher definierten Breitengrößen werden auch als Umbruchpunkte (englisch ''[[Breakpoint (CSS)|Breakpoints]]'') bezeichnet.<ref name="ErtelLaborenz" /> Dabei kann die Anzahl der Darstellungsversionen frei gewählt werden, wodurch beliebig viele Umbruchpunkte verwendet werden können. |
||
=== Responsives Layout === |
=== Responsives Layout === |
||
{{Hauptartikel|Responsive Webdesign}} |
{{Hauptartikel|Responsive Webdesign}} |
||
Ein responsives Layout, auch als reaktionsfähiges Layout bezeichnet, verbindet die Eigenschaften eines fluiden Layouts mit einem adaptiven Layout.<ref name=" |
Ein responsives Layout, auch als reaktionsfähiges Layout bezeichnet, verbindet die Eigenschaften eines fluiden Layouts mit einem adaptiven Layout.<ref name="Hellwig" /> Innerhalb des Layouts werden feste Umbruchpunkte definiert, in denen sich Teile oder das gesamte Layout deutlich verändern. Zwischen diesen Umbruchpunkten verhält sich dieser Layouttyp wie ein fluides Layout.<ref name="ErtelLaborenz" /> Die Inhalte (z. B. Texte, Bilder) eines responsiven Layouts passen sich durch Skalierung dem zur Verfügung stehenden Platz innerhalb des Layouts an. |
||
== Layoutansätze == |
|||
Durch die unterschiedlichen Bildschirmauflösungen und aufgrund der historischen Entwicklung der Darstellungsformen bzw. des [[Webdesign]]s haben sich zwei Layoutansätze aus praktischer Sicht durchgesetzt. Der eine wird als Mobile First und der andere als [[Desktop (grafische Benutzeroberfläche)|Desktop]] First bezeichnet. Diese Namen beziehen sich auf den jeweiligen Ausgangspunkt einer ungefähren Displaygröße der Endgeräte für das erste Layout einer Webseite. |
|||
Es sollen die Inhalte einer Website durch diese Ansätze in den Fokus rücken, damit diese übersichtlich und lesbar für die Besucher einer Website sind.<ref name="Wolf" /> |
|||
=== Desktop First === |
|||
Dieser Begriff wird auch als [[Graceful degradation|Graceful Degradation]]<ref name="ErtelLaborenz" /> Ansatz oder Desktopsite (d.: Desktopseite) bezeichnet. Es wird der Entwicklungsansatz für das Layouts aus der Perspektive der Computerbildschirme gewählt, sodass von Desktop-Breite zur Tablet-Breite und dann zur Smartphone-Breite skaliert wird. Dies kann bei relativ komplexen Websites von Vorteil sein.<ref name="Wolf">{{Literatur |Autor=Jürgen Wolf |Titel=HTML5 und CSS3 – Das umfassende Handbuch |Auflage=1. |Verlag=Rheinwerk Verlag |Ort=Bonn |Datum=2015 |ISBN=978-3-8362-2885-5 |Seiten=567 ff.}}</ref> |
|||
=== Mobile First === |
|||
Dabei steht dieser Begriff für die Erstellung eines Layouts zuerst für [[Mobilgerät|mobile Endgeräte]] (z. B. Smartphones) mit anschließender Skalierung für die breiteren Endgeräte wie Tablet und Desktop.<ref name="Wolf" /> Diesen Begriff prägte [[Luke Wroblewski]] bereits 2009 und veröffentlichte mit dem Buch „Mobile First“ sehr früh neue Strategien und Ansätze.<ref>{{Internetquelle |autor=Luke Wroblewski |url=https://www.lukew.com/resources/mobile_first.asp |titel=Mobile First |werk=lukew.com |datum=2011-10 |sprache=en |abruf=2020-05-06}}</ref> Der Schwerpunkt soll auf die priorisierten Inhalte gelegt werden, wodurch dieser Ansatz auch als ''Content First'' bezeichnet wird.<ref name="ErtelLaborenz" /> |
|||
== Einbindung in eine Webseite == |
== Einbindung in eine Webseite == |
||
Für die Beschreibung und Ausrichtung eines Layouttyps kann ein [[Cascading Style Sheets#Kombination mit HTML oder XHTML|Cascading Style Sheet (CSS)]] oder „In einer Zeile |
Für die Beschreibung und Ausrichtung eines Layouttyps kann ein [[Cascading Style Sheets#Kombination mit HTML oder XHTML|Cascading Style Sheet (CSS)]] mithilfe von [[Breakpoint (CSS)|Breakpoints]] oder „In einer Zeile – CSS“ (englisch: „inline-CSS“) direkt im HTML-Code verwendet werden, welches die benötigten [[Parameter (Informatik)|Parameter]] dem Webbrowser für die Darstellung im Anzeigefenster mitteilt. Dabei gelten die Standard-CSS-Stile (englisch: Default-CSS-Styles) für den jeweiligen Ausgangspunkt des ersten Webseitenlayouts. Dieser wäre beim Ansatz ''Mobile First'' für den kleinstmöglich betrachteten Bildschirm und beim ''Desktop First'' Ansatz für die größtmöglich betrachtete Auflösung innerhalb des Layouts gewählt.<ref name="ErtelLaborenz" /> |
||
== Umrechnung zwischen Layouttypen == |
== Umrechnung zwischen Layouttypen == |
||
Die Standardtypen werden meist für die Mischformen, wie zum Beispiel Responsive Webdesign, weiterentwickelt und dann zum Beispiel von fixen Größenwerten mit Pixeln in flexible Größenwerte mit Prozent umgerechnet. Dafür werden [[Rastersystem|CSS-Rastersysteme]] ( |
Die Standardtypen werden meist für die Mischformen, wie zum Beispiel Responsive Webdesign, weiterentwickelt und dann zum Beispiel von fixen Größenwerten mit Pixeln in flexible Größenwerte mit Prozent umgerechnet. Dafür werden [[Rastersystem|CSS-Rastersysteme]] (englisch: CSS-Grids) genutzt<ref name="ErtelLaborenz" /> und die Inhalte somit von starren Strukturen in flexible Strukturen umgewandelt, damit diese sich gesteuert an ihre verändernde Umgebung anpassen können. |
||
== Literatur == |
== Literatur == |
||
| ⚫ | |||
| ⚫ | |||
* Jürgen Wolf: ''HTML5 und CSS3 – Das umfassende Handbuch''. 1. Auflage. Rheinwerk Verlag, Bonn 2015, ISBN 978-3-8362-2885-5 |
|||
* Martin Han: ''Webdesign – Das Handbuch zur Webgestaltung''. 3. Auflage. Rheinwerk Verlag, Bonn 2020, ISBN 978-3-8362-7216-2 |
|||
== Weblinks == |
|||
| ⚫ | |||
* Luke Wroblewski: [https://mobile-first.abookapart.com/ Mobile First], veröffentlicht 2020 |
|||
| ⚫ | |||
== Einzelnachweise == |
== Einzelnachweise == |
||
<references /> |
<references /> |
||
[[Kategorie:Grafikdesign]] |
[[Kategorie:Grafikdesign]] |
||
[[Kategorie:Web-Entwicklung]] |
[[Kategorie:Web-Entwicklung]] |
||
Aktuelle Version vom 27. August 2024, 14:22 Uhr
Ein Webdesign-Layouttyp (auch Webseitenlayout oder Web-Layout) legt grundlegende grafische Eigenschaften bzw. Anzeigeparameter (Layout) einer Webseite fest. Diese Parameter geben einem Webbrowser Informationen darüber, wie die Inhalte (z. B. Bilder, Text, Videos, …) auf der Anzeige eines Geräts dargestellt werden sollen.
Für die visuellen Darstellungen innerhalb eines Designprozesses soll ein Layout einen Eindruck darüber geben, wie zwischenzeitlich oder am Ende das Ergebnis aussehen wird. Dabei kann ein Layout von reinen Texten, über hinzugefügten Bildern oder bis hin zu aufwendigen Animationen, die Funktionalitätsdarstellung der späteren Webseite als Endergebnis zeigen.
Standard-Layouttypen
[Bearbeiten | Quelltext bearbeiten]Beim Gestalten einer Website mit ihren einzelnen Webseiten, gibt es unterschiedliche Ansätze bzw. Eigenschaften wie sich ein Design nach der Fertigstellung auf einem Endgerät verhalten soll. Diese werden in den Standard Layouttypen zusammengefasst. Für Standardlayouts wird nur eine Größeneinheit für die Darstellung in der Horizontalen innerhalb des Anzeigefensters verwendet.
Festes Layout
[Bearbeiten | Quelltext bearbeiten]
Ein festes Layout (englisch fixed layout) wird mit vorher festgelegten Pixelwerten (px) für seine Dimensionen gestaltet, dadurch kann sich dieser Layouttyp nicht an unterschiedlich große Anzeigefenster von Endgeräten anpassen.[1]
Als Lösung für diese Eigenschaft skalieren die Endgeräte linear die Webseite so klein, dass diese vollständig auf dem Endgerät angezeigt wird oder es erscheinen horizontale Scrollbalken im Anzeigefenster,[1][2] um die Webseite durch Verschieben des Anzeigebereiches vollständig lesen zu können. Viele Endgeräte haben eine größere Anzeigefläche als eigentlich maximal benötigt, wodurch ungenutzter Weißraum (englisch „Whitespace“) entstehen kann.[3]
Fluides Layout
[Bearbeiten | Quelltext bearbeiten]
Fluide Layouts (englisch „fluid layout“) werden durch Prozentwerte (%) in ihrer Größe an das Anzeigefenster angepasst, dies wird auch als Anpassung an die Sichtöffnung (englisch: Viewport) bezeichnet. Somit passt sich das Layout flexibel unterschiedlichen Anzeigeflächen an, deswegen auch das Wort „fluide“ für „fließend bzw. kontinuierlich verformend“ oder eine weitere mögliche Bezeichnung „flexibles Layout“.[1] Dadurch gleicht sich bei einer Änderung der Dimensionen eines Anzeigefensters die Positionen der Inhalte mit der Veränderung des Layouts mit an. Dabei bleiben jedoch Inhalte (z. B. Texte, Bilder) in ihrer Größe erhalten.[1][2]
Elastisches Layout
[Bearbeiten | Quelltext bearbeiten]Dieser Layouttyp wird im englischen als „elastic layout“ bezeichnet und basiert auf typografischen Angaben, wodurch das Hauptaugenmerk auf den Text einer Webseite gelegt werden soll. Die Größenangaben für die Schriftgröße werden in der relativen Einheit em angegeben (1 em = 16 px als Standard im Webbrowser). Deswegen passt sich dieser Layouttyp immer in seinen Eigenschaften der aktuell eingestellten Schriftgröße an.[2] Dieses Verhalten setzen die meisten Webbrowser, auch vom Prinzip her, durch die Seitenzoomfunktion (englisch: „Page-Zoom“) bereits um.[1] Als alternative Größeneinheit wird bei diesem Layouttyp auch rem eingesetzt.
Das Wikipedia-Webdesign nutzt zum Beispiel ein elastisches Weblayout für die Darstellung der Artikel. Dieser Layouttyp wird in der Fachliteratur und durch Webdesigner unterschiedlich eingeordnet, entweder als Mischform aus festem und fluidem Layout,[1] oder als Standardform. Aufgrund der Verwendung nur einer Größeneinheit ist das elastische Layout in diesem Artikel bei den Standardtypen eingeordnet.
Mischformen
[Bearbeiten | Quelltext bearbeiten]Layouttypen können in Mischformen kombiniert werden,[2] um die Nachteile des jeweiligen Layouttypes auszugleichen und damit sich die einzelnen Vorteile ergänzen. Dabei können gleichzeitig verschiedene Größeneinheiten der einzelnen Layouttypen (z. B. px, em, rem, %, …) innerhalb einer Mischform eingesetzt werden.
Adaptives Layout
[Bearbeiten | Quelltext bearbeiten]
Das adaptive Layout bzw. anpassungsfähige Layout ist ein festes Layout mit mehreren Darstellungsversionen für unterschiedliche Größen von Anzeigefenstern.[4] Das Layout „springt“ ab einer bestimmten Breite des Anzeigefensters automatisch auf eine andere Darstellung der Webseite um. Diese vorher definierten Breitengrößen werden auch als Umbruchpunkte (englisch Breakpoints) bezeichnet.[1] Dabei kann die Anzahl der Darstellungsversionen frei gewählt werden, wodurch beliebig viele Umbruchpunkte verwendet werden können.
Responsives Layout
[Bearbeiten | Quelltext bearbeiten]Ein responsives Layout, auch als reaktionsfähiges Layout bezeichnet, verbindet die Eigenschaften eines fluiden Layouts mit einem adaptiven Layout.[4] Innerhalb des Layouts werden feste Umbruchpunkte definiert, in denen sich Teile oder das gesamte Layout deutlich verändern. Zwischen diesen Umbruchpunkten verhält sich dieser Layouttyp wie ein fluides Layout.[1] Die Inhalte (z. B. Texte, Bilder) eines responsiven Layouts passen sich durch Skalierung dem zur Verfügung stehenden Platz innerhalb des Layouts an.
Layoutansätze
[Bearbeiten | Quelltext bearbeiten]Durch die unterschiedlichen Bildschirmauflösungen und aufgrund der historischen Entwicklung der Darstellungsformen bzw. des Webdesigns haben sich zwei Layoutansätze aus praktischer Sicht durchgesetzt. Der eine wird als Mobile First und der andere als Desktop First bezeichnet. Diese Namen beziehen sich auf den jeweiligen Ausgangspunkt einer ungefähren Displaygröße der Endgeräte für das erste Layout einer Webseite.
Es sollen die Inhalte einer Website durch diese Ansätze in den Fokus rücken, damit diese übersichtlich und lesbar für die Besucher einer Website sind.[5]
Desktop First
[Bearbeiten | Quelltext bearbeiten]Dieser Begriff wird auch als Graceful Degradation[1] Ansatz oder Desktopsite (d.: Desktopseite) bezeichnet. Es wird der Entwicklungsansatz für das Layouts aus der Perspektive der Computerbildschirme gewählt, sodass von Desktop-Breite zur Tablet-Breite und dann zur Smartphone-Breite skaliert wird. Dies kann bei relativ komplexen Websites von Vorteil sein.[5]
Mobile First
[Bearbeiten | Quelltext bearbeiten]Dabei steht dieser Begriff für die Erstellung eines Layouts zuerst für mobile Endgeräte (z. B. Smartphones) mit anschließender Skalierung für die breiteren Endgeräte wie Tablet und Desktop.[5] Diesen Begriff prägte Luke Wroblewski bereits 2009 und veröffentlichte mit dem Buch „Mobile First“ sehr früh neue Strategien und Ansätze.[6] Der Schwerpunkt soll auf die priorisierten Inhalte gelegt werden, wodurch dieser Ansatz auch als Content First bezeichnet wird.[1]
Einbindung in eine Webseite
[Bearbeiten | Quelltext bearbeiten]Für die Beschreibung und Ausrichtung eines Layouttyps kann ein Cascading Style Sheet (CSS) mithilfe von Breakpoints oder „In einer Zeile – CSS“ (englisch: „inline-CSS“) direkt im HTML-Code verwendet werden, welches die benötigten Parameter dem Webbrowser für die Darstellung im Anzeigefenster mitteilt. Dabei gelten die Standard-CSS-Stile (englisch: Default-CSS-Styles) für den jeweiligen Ausgangspunkt des ersten Webseitenlayouts. Dieser wäre beim Ansatz Mobile First für den kleinstmöglich betrachteten Bildschirm und beim Desktop First Ansatz für die größtmöglich betrachtete Auflösung innerhalb des Layouts gewählt.[1]
Umrechnung zwischen Layouttypen
[Bearbeiten | Quelltext bearbeiten]Die Standardtypen werden meist für die Mischformen, wie zum Beispiel Responsive Webdesign, weiterentwickelt und dann zum Beispiel von fixen Größenwerten mit Pixeln in flexible Größenwerte mit Prozent umgerechnet. Dafür werden CSS-Rastersysteme (englisch: CSS-Grids) genutzt[1] und die Inhalte somit von starren Strukturen in flexible Strukturen umgewandelt, damit diese sich gesteuert an ihre verändernde Umgebung anpassen können.
Literatur
[Bearbeiten | Quelltext bearbeiten]- Andrea Ertel, Kai Laborenz: Responsive Webdesign – Anpassungsfähige Website programmieren und gestalten. 2. Auflage. Galileo Computing (jetzt Rheinwerk Verlag), Bonn, 2015, ISBN 978-3-8362-3200-5
- Björn Rohles: Gutes Webdesign – Grundkurs. 1. Auflage. Galileo Design (jetzt Rheinwerk Verlag), Bonn, 2014, ISBN 978-3-8362-1992-1
- Jürgen Wolf: HTML5 und CSS3 – Das umfassende Handbuch. 1. Auflage. Rheinwerk Verlag, Bonn 2015, ISBN 978-3-8362-2885-5
- Martin Han: Webdesign – Das Handbuch zur Webgestaltung. 3. Auflage. Rheinwerk Verlag, Bonn 2020, ISBN 978-3-8362-7216-2
Weblinks
[Bearbeiten | Quelltext bearbeiten]- Luke Wroblewski: Mobile First, veröffentlicht 2020
Einzelnachweise
[Bearbeiten | Quelltext bearbeiten]- ↑ a b c d e f g h i j k l Andrea Ertel, Kai Laborenz: Responsive Webdesign – Anpassungsfähige Website programmieren und gestalten. 2. Auflage. Galileo Computing (jetzt Rheinwerk Verlag), Bonn 2015, ISBN 978-3-8362-3200-5, S. 29–32, 75, 170 ff.
- ↑ a b c d Björn Rohles: Gutes Webdesign – Grundkurs. 1. Auflage. Galileo Press (jetzt Rheinwerk Verlag), Bonn 2014, ISBN 978-3-8362-1992-1, S. 136–137.
- ↑ Jonas Hellwig: Die Layout-Typen einer Website: Fixed, Fluid & Elastic. In: blog.kulturbanause.de. 7. Juni 2016, abgerufen am 7. April 2020.
- ↑ a b Jonas Hellwig: Adaptive Website vs. Responsive Website. In: blog.kulturbanause.de. 19. November 2018, abgerufen am 7. April 2020.
- ↑ a b c Jürgen Wolf: HTML5 und CSS3 – Das umfassende Handbuch. 1. Auflage. Rheinwerk Verlag, Bonn 2015, ISBN 978-3-8362-2885-5, S. 567 ff.
- ↑ Luke Wroblewski: Mobile First. In: lukew.com. Oktober 2011, abgerufen am 6. Mai 2020 (englisch).