Archiv

fest – flüssig – responsive – adaptive

Meine Erfahrung nach sind Layoutarten wie fest, flüssig, responsive oder adaptive gerade für Einsteiger schwer zuzuordnen. Deswegen habe ich jetzt einmal Minimalbeispiele gebastelt, die nur diese Begriffe verdeutlichen sollen. Um die Unterschiede nachvollziehen zu können, muss man das Browserfenster schmaler ziehen. Und ich habe eine Vereinfachung durchgeführt: ich zeige die unterschiedlichen Layouttypen nicht an vollständigen Layouts, sondern stelle jeweils zwei Bereiche gegenüber, die das unterschiedliche Verhalten deutlich machen. Weiterlesen

shrink-to-fit=no Ergänzung bei der viewport-Meta-Angabe

Bei einer Schulung zum Thema Responsive Webdesign bin ich über die folgende Viewport-Angabe gestolpert:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Neu war mir der Zusatz shrink-to-fit=no

Weiterlesen

Browser-Entwicklertools: Laden der Dateien untersuchen

Um die Performance von Webseiten zu verbessern, muss man wissen, welche Dateien wann geladen werden. Das sieht man einem Dokument nicht unbedingt direkt an … dafür verraten es die Entwicklertools zuverlässig. Wie man mit dem Netzwerk-Tab der Browser-Entwicklertools arbeitet, zeige ich in einem Video.
Weiterlesen

Videotraining Responsive Webdesign – Performance-Tuning

Responsive Webdesign – Performance-TuningHeutzutage müssen Webseiten responsiv sein. Ein Problem dabei kann aber die Ladegeschwindigkeit darstellen. Glücklicherweise gibt es eine Reihe von Techniken, um die Performance zu verbessern. Und wie das konkret geht, zeige ich in meinem Videotraining:

Responsive Webdesign – Performance Tuning – Online-Videotraining bei LinkedIn Learning

Laufzeit: 1 Std. 41 min

Weiterlesen

Besser als display: none – Inhalte auf Smartphones richtig ausblenden

Beim responsiven Webdesign geht man üblicherweise von einer HTML-Basis aus, die Anpassungen an die unterschiedlichen Viewportbreiten finden über Media Queries, d.h. über CSS statt. Das Problem dabei ist, dass auf einem klassischen Desktop-Monitor wesentlich mehr Platz zur Verfügung steht, als bei einem klassischen kleinen Smartphone-Screen.

Wenn Inhalte auf einem Smartphone einfach keinen Platz finden, greift man gerne zu display: none, um Inhalte gezielt auf einzelnen Endgerätegruppen auszublenden. Das hat jedoch so seine Nachteile. Wer sagt beispielsweise, dass Nutzer von kleinen Screens bestimmte Informationen nicht brauchen?

Weiterlesen

Für alle Endgeräte optimieren

Optimiert für alle Endgeräte

„optimiert für alle Endgeräte“ las ich gestern in einer Werbung für die digitale Ausgabe einer Printzeitschrift. So etwas liest man häufiger oder umgekehrt stellen Leute oft die Frage: „Wie kann man eine Webseite für alle mobilen Geräte optimieren?“

Weiterlesen