Inhalte am Bildschirm verstecken mit der Klasse »visually-hidden«

Auf Webseiten gibt es manchmal Elemente, die zwar im Quelltext und für Benutzer mit einem Screenreader sinnvoll sind, in einem visuellen Layout aber nicht benötigt werden.

Zu diesem Zweck kann man, wie in diesem Beitrag beschrieben, einen Hilfsklasse erstellen, die man z. B. visually-hidden nennt.

Weiterlesen

Meine Lesezeichen zu HTML

Raindrop.io ist ein phantastischer Dienst zum Sammeln von Bookmarks, der bei mir als Nachfolger von del.icio.us und Pinboard.in seinen festen Platz in meinem Workflow hat. Mit Raindrop kann man seine gesammelten Lesezeichen sogar veröffentlichen:

Auf dieser Webseite finden Sie alle Lesezeichen aus meiner Sammlung zu HTML, und zwar immer die aktuelle Version. Hier eine kleine Vorschau:

Weiterlesen

Beispiele aus der Praxis: H-T-M-Hell

H-T-M-Hell ist ein Projekt von Manuel Matuzović, und mit hell ist hier das englische Wort für Hölle gemeint, also wie in »Highway to Hell«, und nicht wie in »Auf dem Heimweg wird’s hell«.

Die Website hat zwei große Bereiche:

  • Hell ist die Hölle und enthält »a collection of bad practices in HTML, copied from real websites«, und Tips wie man es besser machen könnte.
  • Heaven ist der Himmel und zeigt interessante Tipps und Tricks zu HTML.

Wer nichts verpassen möchte, kann HTMLHell auf Twitter folgen und / oder einen Newsletter abonnieren.

Bilder optimieren: DPR 2 ist meist genug

HTML bietet mit dem Attribut srcset die Möglichkeit, je nach Auflösung des Bildschirms verschiedene Grafiken auszuliefern. Inzwischen gibt es jede Menge Geräte mit einer DPR 3 und einige sogar mit 4, Tendenz steigend. Muss man also jetzt von jedem Bild drei oder vier verschiedene Versionen ausliefern? Kurze Antwort: Nein, zwei sind fast immer genug.

Weiterlesen