Webdesign-Layouttyp - Versionsgeschichte

Mario Fux: Typo

2024-08-27T12:22:30Z

Typo

← Nächstältere Version		Version vom 27. August 2024, 14:22 Uhr
Zeile 40:		Zeile 40:

	=== Desktop First ===		=== 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 ~~Dektop~~-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>		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 ===		=== Mobile First ===

APPERbot: Bot: Dateieinbindungen: mini und rand nicht gemeinsam (rand entfernt), Parameter sortiert

2024-06-02T01:22:46Z

Bot: Dateieinbindungen: mini und rand nicht gemeinsam (rand entfernt), Parameter sortiert

← Nächstältere Version		Version vom 2. Juni 2024, 03:22 Uhr
Zeile 15:		Zeile 15:

	=== Fluides Layout ===		=== Fluides Layout ===
	[[Datei:Fluides Webseiten Layout Visualisierung.svg\|alternativtext=~~\|rand\|mini~~\|Fluides Webseiten-Layout. Visualisierung: (1) zeigt die Ausgangsvariante, (2) die erste Vergrößerung und (3) die zweite Vergrößerung]]		[[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 (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" />		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" />

Zeile 27:		Zeile 27:

	=== Adaptives Layout ===		=== Adaptives Layout ===
	[[Datei:Adaptives Webseiten Layout Visualisierung.svg\|alternativtext=~~\|rand\|mini~~\|Adaptives Webseiten-Layout. Visualisierung: (1) zeigt die Ausgangsvariante, (2) den ersten Umbruch und (3) den zweiten Umbruch.]]		[[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="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.		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.

Invisigoth67: typo

2023-12-28T08:00:31Z

typo

← Nächstältere Version		Version vom 28. Dezember 2023, 10:00 Uhr
Zeile 32:		Zeile 32:
	=== 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="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 ~~responsives~~ Layouts passen sich durch Skalierung dem zur Verfügung stehenden Platz innerhalb des Layouts an.		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 ==		== Layoutansätze ==

Ichigonokonoha: eine Seite der deWP ist nicht relevant genug für die Nennung im Artikel, zudem unerwünschte Verlinkung in anderen Namensraum.

2023-12-27T12:50:04Z

eine Seite der deWP ist nicht relevant genug für die Nennung im Artikel, zudem unerwünschte Verlinkung in anderen Namensraum.

← Nächstältere Version		Version vom 27. Dezember 2023, 14:50 Uhr
Zeile 21:		Zeile 21:
	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.		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~~. Die deutschsprachige Wikipedia fasst Erläuterungen für die Benutzung des Wikipedia-Layouts in Artikeln unter dem Artikel [[Hilfe:Textgestaltung/Layoutfluss]] zusammen~~. 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.		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 ==

Aka: /* Weblinks */ https

2023-12-08T19:06:56Z

Weblinks: https

← Nächstältere Version		Version vom 8. Dezember 2023, 21:06 Uhr
Zeile 58:		Zeile 58:

	== Weblinks ==		== Weblinks ==
	* Luke Wroblewski: [~~http~~://mobile-first.abookapart.com/ Mobile First], veröffentlicht 2020		* Luke Wroblewski: [https://mobile-first.abookapart.com/ Mobile First], veröffentlicht 2020

	== Einzelnachweise ==		== Einzelnachweise ==

Engcobo: gege

2022-10-13T15:29:53Z

gege

← Nächstältere Version		Version vom 13. Oktober 2022, 17:29 Uhr
Zeile 19:		Zeile 19:

	=== Elastisches Layout ===		=== Elastisches Layout ===
	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]] ~~angeben~~ (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.		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. Die deutschsprachige Wikipedia fasst Erläuterungen für die Benutzung des Wikipedia-Layouts in Artikeln unter dem Artikel [[Hilfe:Textgestaltung/Layoutfluss]] zusammen. 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.		Das Wikipedia-Webdesign nutzt zum Beispiel ein elastisches Weblayout für die Darstellung der Artikel. Die deutschsprachige Wikipedia fasst Erläuterungen für die Benutzung des Wikipedia-Layouts in Artikeln unter dem Artikel [[Hilfe:Textgestaltung/Layoutfluss]] zusammen. 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.

Conan174: Änderungen von Mentosuncle (Diskussion) auf die letzte Version von Aka zurückgesetzt

2022-08-10T18:53:56Z

Änderungen von Mentosuncle (Diskussion) auf die letzte Version von Aka zurückgesetzt

← Nächstältere Version		Version vom 10. August 2022, 20:53 Uhr
Zeile 58:		Zeile 58:

	== Weblinks ==		== Weblinks ==
			* Luke Wroblewski: [http://mobile-first.abookapart.com/ Mobile First], veröffentlicht 2020

	* Katleen Hinz: Interactive [https://f5.design/interaktives-webdesign/ WebDesign], August 3, 2022

	== Einzelnachweise ==		== Einzelnachweise ==

Mentosuncle: /* Weblinks */ replaced a deadlink

2022-08-10T16:40:21Z

Weblinks: replaced a deadlink

← Nächstältere Version		Version vom 10. August 2022, 18:40 Uhr
Zeile 58:		Zeile 58:

	== Weblinks ==		== Weblinks ==

	* Luke Wroblewski: [http://mobile-first.abookapart.com/ Mobile First], veröffentlicht 2020
			* Katleen Hinz: Interactive [https://f5.design/interaktives-webdesign/ WebDesign], August 3, 2022

	== Einzelnachweise ==		== Einzelnachweise ==

Aka: generisches Maskulinum, Links optimiert

2021-06-25T14:30:33Z

generisches Maskulinum, Links optimiert

← Nächstältere Version		Version vom 25. Juni 2021, 16:30 Uhr
Zeile 1:		Zeile 1:
	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.		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 [[Animation~~\|Animationen~~]], die Funktionalitätsdarstellung der späteren Webseite als Endergebnis zeigen.		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}}
Zeile 37:		Zeile 37:
	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.		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 ~~BesucherInnen~~ einer Website sind.<ref name="Wolf" />		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 ===		=== Desktop First ===

PerfektesChaos: tk k

2021-02-15T16:29:18Z

tk k

Änderungen zeigen