Responsivität von Webseiten
Das Internet nutzten wir zunächst nur am Computer. Heute haben wir es in der Hosentasche auf Smartphones immer griffbereit. Smartphones und Computer sind unterschiedlich groß und werden anders bedient. Diese Unterschiede beeinflussen das Design von Websites.
"Mobile-first" ist ein wichtiger Begriff im Webdesign. Es bedeutet, Websites werden zuerst für Smartphones und Tablets optimiert. Der Grund ist, dass viele Menschen lieber das Smartphone als den Computer benutzen. Smartphones haben kleinere Bildschirme und funktionieren mit Touch-Gesten. Deshalb müssen auf mobilen Endgeräten die Elemente und Texte größer sein.
Responsives Webdesign sorgt dafür, dass Websites sich an verschiedene Bildschirmgrößen und Zoom-Vorgänge anpassen. Inhalte dürfen nicht verdeckt oder weggeschnitten werden. Websites müssen sowohl im Hoch- als auch im Querformat dieselben Funktionalitäten besitzen. Dies ist wichtig für Menschen mit körperlichen Einschränkungen, die ihr Gerät nur in einer Position mithilfe eines Ständers nutzen.
Am Ende profitiert wieder die Gemeinschaft, wenn wir mit jedem Endgerät in jeder Ausrichtung, dieselbe Website und Funktionen ohne fremde Hilfe nutzen können.
Website auf verschiedenen Endgeräten simulieren
Um die Responsivität ihrer Website auf verschiedenen Endgeräten zu prüfen, können Sie die Entwicklertools ihres Browsers nutzen. Unter Nutzung des Chrome-Browser funktioniert dies wie folgt:
- Zu untersuchende Website im Browser aufrufen
- Taste F12 auf der Tastatur drücken ODER Rechtsklick auf die Website im Browser und im Kontextmenü zum Punkt "Untersuchen" scrollen und diesen auswählen
Es öffnen sich die Entwicklertools, hier gibt es viele Inhalte, die für Nicht-Entwickler wie eine Fremdsprache wirken. Dennoch gibt es eine Funktion, die leicht zu bedienen ist und verschiedene mobile Geräte simuliert:
- Icon mit dem Laptop und Handy auswählen - ist dann blau hinterlegt (Abb. 1 - Punkt 1)
- Im Drop-Down-Menü kann zwischen verschiedenen Handy-und Tablet-Modellen umgeschaltet werden. Auf diese Weise lässt sich simulieren, ob die Seite auch auf diesen Geräten gut nutzbar ist (Abb. 1 - Punkt 2)
- Optional lässt sich die Ansichtsgröße verändern
Inhalte je nach Desktop-/Mobilversion aktivieren oder deaktivieren
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Mehr zum Thema in unseren TYPO3-Schulungsmaterialien
Typo3-Schulungsmaterial Inhalte je nach Desktop/mobil aktivieren/deaktivieren (Video gibt es noch nicht!)