Kategorie: HTML5

Retina- & Resolution-Detection auf Serverseite (PHP)

Mobile Geräte mit Retina / HDPI Display sind heutzutage Standard. Ein Grund mehr auf einer neuen Website Bildmaterial zur verfügung zu stellen, welches diese Technik bedienen kann – macht man dies nicht, wirken Grafiken und Bilder unscharf. Aber wie zum Teufel soll man das vernünftig anstellen?

Es ist egal ob man ein CMS wie TYPO3 verwendet oder eine einfache statische HTML Seite hat, das Problem bleibt gleich. Die ausgelieferten Bilder sollten zugunsten der Ladegeschwindigkeit nur so groß sein, wie sie tatsächlich benötigt werden. Sind die Bilder größer verursacht das unnötige Datenübertragung, verlangsamt den Seitenaufbau / die Darstellung und wirkt sich ebenfalls negativ auf ein Google Page Speed Ranking aus.

CSS

Innerhalb CSS hat man diese Problematik nicht. Durch Media-Querys können wir ganz einfach zwischen normalem und Retina- / HDPI-Display unterscheiden und so andere Hintergrundgrafiken verwenden.

@media only screen and (-webkit-min-device-pixel-ratio: 1.3),
       only screen and (-o-min-device-pixel-ratio: 13/10),
       only screen and (min-resolution: 120dpi) {
          /* Retina / HDPI Background Images */ 
}

Doch wie sollte man normale Bilder (<img>) ausliefern?

Serverseitig mit PHP?

Aktuell gibt es keine richtige Möglichkeit um auf Serverseite herauszufinden ob es sich um ein hochauflösendes Gerät handelt. An dieser Stelle frage ich mich allerdings: Warum wird das nicht über den User-Agent oder einem anderen Parameter übermittelt? Der Stand der Technik würde genau diese Informationen (Auflösung in DPI, Screengröße in Pixel) dringend benötigen um sofort entscheiden zu können, welches Bild in welcher Größe ausgeliefert werden muss.

So ist es leider – derzeit gibt es keine Möglichkeit dazu. Auch wenn ich (wie viele andere sicher auch) lange darüber nachdenken wie man das Zustande bekommen könnte.

Weiterlesen

HTML5 Tags – Die Website inhaltlich auszeichnen

HTML5 kennt neue Tags wie header, section, article oder nav. Mit diesen ist es möglich, Website-Abschnitte für Crawler von Suchmaschinen wie Google und Co erkennbar auszuzeichnen. Bisher konnten wir diese Bereiche lediglich optisch für den User kenntlich machen. Jetzt definieren wir mit den HTML5 Tags, welcher Bereich unserer Website die entsprechende Aufgabe hat. Und so verstehen ebenfalls die Suchmaschinen diese Segmente und deren Aufgaben. Außerdem sind die HTML5 Tags ein deutlicher Fortschritt in der Barrierefreiheit. Blinde erkennen nun, wo sich eine Navigation und der eigentliche Inhalt befinden – auch ohne die Website komplett zu verstehen. Wir nutzen dazu die folgenden Tags:

<header>

Das <header>-Tag dient dazu, den Kopf sowie die Überschrift einer Seite zu definieren. Es fungiert praktisch als erster Einblick in das Thema. Das <header>-Tag umschließt den gesamten Kopfbereich (Logo, Titel, Überschrift, Navigation) einer Webseite.

<article>

In das <article>-Tag von HTML5 kommt der eigentliche, themenrelevante Inhalt einer Seite. Die Suchmaschine erkennt somit, dass hier der „wichtige“ Bereich dargestellt wird, um den sich die Webseite dreht. Blinden ermöglicht die HTML-Auszeichnung den direkten Sprung mit dem Ausgabegerät in diesen Bereich. Sie lesen so den entsprechenden Artikel – ohne den Anfang zu suchen.

<section>

Mit <section>-Tags teilen wir unseren Inhalt (article) in unterschiedliche Sektionen auf. Jede <section> erhält eine passende Überschrift zu ihrem eigenen Teilthema. Somit können Blinde sofort in den nächsten Abschnitt eines Artikels springen und erhalten direkt die gewünschten Informationen und Inhalte.

Weiterlesen