Kategorien
Design HTML/CSS Inspiration Showcases UI/UX

404: Die Top 50 der kreativsten Fehlerseiten im Weltennetz (Ausgabe 2018)

Jede Website liefert ab und an einen 404-Fehler aus. Ein Besucher hat vielleicht eine Adresse falsch eingegeben, oder ein Link existiert unter Umständen nicht mehr. Diese Fehlerseiten kannst du designen, um deinen Besuchern auf die richtige Fährte zu helfen.

Kategorien
(Kostenlose) Services Editoren Essentials Freebies, Tools und Templates HTML/CSS Webdesign

Kostenlose HTML-Editoren: Die 16 Besten für Webentwickler unter Windows

Webdesigner und Webentwickler, die mit Windows arbeiten, finden durchaus einige kostenlose HTML-Editoren vor. Nur, welcher eignet sich und welcher eher nicht. Wir sagen es dir.

Kategorien
Design Editoren HTML/CSS

Zeta Producer: Einfacher kann ein Homepage-Baukasten kaum sein

Homepage-Baukästen, auch Website-Builder genannt, erfreuen sich steigender Beliebtheit. Das ist verständlich, denn sie erlauben es auch Design-Laien schnell zu ansprechenden Webseiten zu gelangen. Der Zeta Producer nimmt im Wettbewerb in verschiedener Hinsicht eine Sonderstellung ein.

Kategorien
Boilerplates & andere Tools Design HTML/CSS Programmierung Responsive Design UI/UX

Atomic Design: So gestaltest du deine Website modular

Begrifflichkeiten im Webdesign sind häufig nicht viel mehr als Worthülsen. Der Begriff „Atomic Design” darf zu diesen Hülsen gezählt werden. Denn er dient nur seinem Erfinder dazu, seine Philosophie unter einprägsamem Namen verbreiten zu können. Dennoch lohnt es, sich mit den Inhalten auseinander zu setzen.

Kategorien
Design HTML/CSS

Layouts mit CSS: Flexbox oder Grid?

Wie wir Websites gestalten, hat sich in den vergangenen Jahren immer wieder mal mehr, mal weniger radikal geändert. Mit der Einführung von CSS Flexbox hat eine entscheidende Erneuerung stattgefunden. Kurz darauf ist mit CSS Grid ein weiteres Layoutmodell hinzugekommen. Welches ist nun wofür besser geeignet? Muss ich mich für ein Modell entscheiden?

Kategorien
(Kostenlose) Services Design Essentials HTML/CSS

Helfer-Duo für Webdesigner: Htmlreference.io und CSSreference.io

Wir alle haben dicke Referenzen unserer Lieblings-Technikverlage im Regal stehen und wir kennen die monumentalen Ratgeber-Seiten im Stile von SelfHTML und anderen. Vielfach bräuchten wir aber nicht den dicken Wälzer, sondern den schlanken Helfer. Nur mal kurz nachschauen. Wie war das nochmal?

Kategorien
Design HTML/CSS Webdesign

CSS in 30 Sekunden: Das versteht jeder

Anstatt deine Zeit mit Candy Crush zu vertun oder dich durch unwichtige Tweets zu fräsen, könntest du die Zeit in der S-Bahn oder auf dem Klo oder im langweiligen Teammeeting nutzen, um CSS zu lernen oder deine Kenntnisse aufzufrischen. 

Kategorien
Design HTML/CSS

Das neue Dialog-Element von HTML 5.2

Der neue Standard HTML 5.2 bringt uns ein neues Element namens <dialog>. Damit lassen sich modale Dialogboxen erstellen, denen du mit etwas JavaScript zu Interaktivität verhelfen kannst.

Kategorien
Design E-Business HTML/CSS Responsive Design SEO & Online-Marketing UI/UX

7+ SEO-Tipps, die nur der Designer umsetzen kann

Bevor du anfängst, in die muffigen Tiefen des SEO-Gewerbes abzusteigen, solltest du wissen, dass das Design deiner Seite an sich bereits erheblichen Einfluss auf die Suchmaschinentauglichkeit hat. Wenn da geschlampt wurde, läufst du dem optimalen Ergebnis stets hinterher.

Kategorien
Design HTML/CSS JavaScript & jQuery Programmierung UI/UX

Einfache Lösungen für dynamisches Webdesign mit HTML5-Data-Attributen

Lebendige Effekte auf Websites können dir im Wettbewerb um die Aufmerksamkeit der Nutzer gute Dienste leisten. Du denkst vielleicht direkt an parallaxes Scrolling. Das aber ist nicht die einzige Option für dynamisches Webdesign.

Kategorien
HTML/CSS Webdesign

CSS3: Texte unterstreichen – endlich mit anderer Farbe und weiteren Effekten

Typografie spielt im Webdesign zunehmend eine wichtige Rolle – vor allem mit der Einführung von Webfonts. Das Unterstreichen von Texten hingegen war immer ein eher eintöniges Unterfangen. Nur auf Umwegen ließen sich Farbe und Art der Unterstreichung beeinflussen. Die erweiterte CSS3-Eigenschaft „text-decoration“ gibt dir nun zusätzlichen Spielraum für die Gestaltung von Texten.


Über die neuen Möglichkeiten zur Textunterstreichung schrieb ich erstmals exklusiv im Dr. Web-Newsletter. Hier kannst du dich kostenlos registrieren.

„text-decoration“ um Features erweitert

Bisher konnte man der Eigenschaft „text-decoration“ lediglich festlegen, wie ein Text unter- beziehungsweise durchgestrichen werden sollte. Erlaubt waren die Werte „underline“, „overline“ und „line-through“. Das entspricht also der typischen Formatierung, wie man sie auch aus der Textverarbeitung kennt.

Dass diese Möglichkeiten im Webdesign nicht ausreichen, zeigt sich daran, dass Webdesigner immer wieder mit Workarounds nach Möglichkeiten gesucht haben, Unterstreichungen eine andere Farbe zu geben. Häufig ist einem Text ein Rahmen („border-bottom“) zugewiesen worden anstatt ihn per „text-decoration“ zu unterstreichen. So ließen sich Farbe und Linienstärke beeinflussen.

Dieser Ansatz hat jedoch durchaus seine Nachteile. So ist die Unterstreichung per „border-bottom“ immer etwas weiter vom Text entfernt als eine echte Unterstreichung.

In anderer Farbe unterstrichener Text

Die CSS-Eigenschaft „text-decoration“ ist nun um einige Features erweitert worden, die es unter anderem erlauben, die Farbe von Unterstreichungen unabhängig der Textfarbe festzulegen. Dazu gibt es die neue Eigenschaft „text-decoration-color“. Erlaubt sind hierbei alle gängigen CSS-Farbangaben, auch Angaben per „rgb()“ und „rgba()“.

h1 {
  text-decoration-color: purple;
}

Weißraum bei Unterstreichungen definieren

Es gibt eine weitere neue Eigenschaft: „text-decoration-skip“. Hiermit definierst du, wann eine Unterstreichung unterbrochen werden soll. Der Wert „ink“ legt fest, dass Unterlängen wie bei dem kleinen „g“ und „j“ bei der Unterstreichung ausgespart werden.

Gerade diese Möglichkeit dürfte vielen Webdesignern gefallen. Denn das brachiale Durchschneiden von Unterlängen durch Unterstreichungen ist vor allem für typografisch begeisterter Webdesigner und -entwickler kein schöner Anblick.

Unterstrichener Text, bei dem Unterlängen ausgespart sind

Der Wert „spaces“ hingegen sorgt dafür, dass Satz- und Leerzeichen nicht unterstrichen werden. So ist es beispielsweise möglich, bei Aufzählungen die Unterstreichung ausschließlich auf die Wörter anzuwenden.

h1 {
  text-decoration-skip: ink;
}

Inline-Block-Elemente wie zum Beispiel Bilder innerhalb eines Textes werden dann nicht unterstrichen, wenn die Eigenschaft den Wert „objects“ besitzt. Und der Wert „edges“ legt fest, dass bei zwei nebeneinander liegenden Textelementen ein Abstand zwischen den Unterstreichungen dargestellt wird.

Position der Unterstreichung ändern

Auch die Position einer Unterstreichung kannst du definieren – mittels „text-underline-position“. Normalerweise liegt sie im Bereich der Unterlängen. Der Wert „under“ sorgt jedoch dafür, dass die Linie unterhalb der Unterlängen dargestellt wird.

Unterstrichener Text, bei dem die Unterstreichung unterhalb der Unterlängen liegt

Diese Positionierung ist zum Beispiel bei der Darstellung mathematischer Formeln sinnvoll. So wird verhindert, dass tiefgestellte Zahlen von der Unterstreichung nicht verdeckt und somit schlecht bis gar nicht lesbar sind.

h1 {
  text-underline-position: under;
}

Verschiedene Stile zur Unterstreichung

Wem eine einfache Linie als Unterstreichung nicht reicht, kann dank „text-decoration-style“ auch zwischen verschiedenen Stilen für die Darstellung der Linien wählen. Während der Wert „solid“ eine gewohnt einfache Linie zeichnet, gibt es mit „double“ die Möglichkeit, eine doppelte Unterstreichung zu erzielen.

Unterstreichung mit geschwungener Linie

Für geschwungene Linien setzt du den Wert für die Eigenschaft auf „wavy“ und für gepunktete Linien auf „dotted“.

h1 {
  text-decoration-style: wavy;
}

Unterstreichung per Kurzform auszeichnen

Wie für viele andere Eigenschaften gibt es auch für die neuen Eigenschaften eine Kurzform, die über die alte Eigenschaft „text-decoration“ ausgezeichnet wird. Die bisherige Nutzung von „text-decoration“, die ausschließlich das Unter- beziehungsweise Durchstreichen erlaubt hatte, ist in die Eigenschaft „text-decoration-line“ ausgegliedert worden, funktioniert aber nach wie vor als Kurzform.

h1 {
  text-decoration: underline wavy purple;
}

Die Auszeichnung „text-decoration: underline“ ist also die Kurzform von „text-decoration-line: underline“. Du kannst Werte für „text-decoration-line“, „text-decoration-style“ und „text-decoration-color“ als Kurzform kombinieren: „text-decoration: underline wavy purple“.
Im Beispiel wird also eine geschwungene Linie in violett als Unterstreichung dargestellt.

Browserunterstützung

Die Eigenschaft „text-decoration-skip“ wird von Chrome und Safari unterstützt, wobei Chrome nur die Werte „ink“ und „objects“ kennt. „text-decoration-color“ und „text-decoration-style“ werden zudem vom Firefox mit unterstützt.

Die Eigenschaft „text-decoration-position“ wird derzeit nur von Chrome unterstützt.

Andere Browser werden sicher schnell nachziehen. Schließlich sind typografische CSS-Eigenschaften wie auch das Beschneiden von Texten oder ihre Ausrichtung an anderen Elementen mittlerweile aus modernem Webdesign nicht mehr wegzudenken.

Kategorien
Design HTML/CSS

Instagram.css: 42 Instagram-Filter mit CSS nachgebaut

Irgendwas müssen die Filter von Instagram ja haben, wenn sie so beliebt sind. Mit dem kostenlosen Instagram.css kannst du nun eben jene Filter auf beliebige Bilder deiner Website loslassen.

Kategorien
Boilerplates & andere Tools Design HTML/CSS JavaScript & jQuery Programmierung UI/UX

Perfekt für Webentwickler: Die Front-End Checklist sorgt für Code-Qualität

Das Abarbeiten von Checklisten hilft nachgewiesenermaßen dabei, die Qualität dessen zu verbessern, für das die jeweilige Checkliste entworfen wurde. Die Front-End Checklist von David Dias widmet sich dem Thema Webentwicklung und lässt keine Aspekte vermissen.

Kategorien
Apps HTML/CSS JavaScript & jQuery Responsive Design Webdesign

Progressive Web Apps: Mit HTML5 und JavaScript zur fast nativen App

Native Apps für Android- und iOS-Geräte haben in vielerlei Hinsicht große Vorteile gegenüber per HTML5 und JavaScript entwickelter Webanwendungen.

Kategorien
Boilerplates & andere Tools Design Essentials Freebies, Tools und Templates HTML/CSS Programmierung

Shards: Modernes UI-Kit auf Basis von Bootstrap 4 als Open Source

UI-Kits gibt es viele, auch kostenlose. Shards von Designrevision ragt dennoch aus der Masse, weil es nicht nur kostenlos, sondern auch ausgesprochen ansehnlich und modern ist.

Kategorien
Design HTML/CSS Responsive Design Webdesign

HTML5 & CSS3: mache deine Website fit für hochauflösende Displays

Als Apple vor einigen Jahren anfing, seine iPhones, iPads und MacBooks mit hochauflösenden Displays – den sogenannten Retina-Displays – auszustatten, hat das zu einer deutlichen Verbesserung der Darstellungsqualität geführt. Einzelne Pixel sind auf diesen Displays nicht mehr als solche zu erkennen. Mittlerweile sind hochauflösende Displays längst keine Besonderheit mehr. Vor allem aktuelle Mobilgeräte sind schon in der Mittelklasse hochauflösend. Während viele Apps für Mobilgeräte schon länger auf die hohe Auflösung ausgerichtet sind, lassen sich mittlerweile auch per HTML5, CSS3 und JavaScript hochauflösende Websites realisieren – ohne zusätzliche JavaScript-Bibliotheken.

Doppelt so scharf dank doppelter Pixeldichte

Als Standardbreite für Mobilgeräte haben sich – historisch bedingt – 320 Pixel etabliert. Viele mobile Websites sind auf diese Breite ausgerichtet. Hochauflösende Displays haben doppelt so viele oder noch mehr Pixel. Damit eine Website auf diesen Displays nicht halb so groß erscheint, wird die Seite quasi hochskaliert. Bei Schriften und Vektorgrafiken ist das kein Problen. Bitmap-basierte Formate wie JPEG- und PNG-Dateien sehen hingegen unscharf und pixelig aus.

Da solche Displays immer häufiger werden, wird es natürlich für Webdesigner und -entwickler zunehmend wichtiger, Webprojekte in hochauflösender Qualität bereitzustellen.

HTML5 und die „srcset“-Eigenschaft

Lange wurde darum gerungen, wie man in HTML5 Bilder für hochauflösende Displays bereitstellen kann. Mittlerweile herrscht Gewissheit und das „srcset“-Attribut hat sich etabliert. Über das Attribut können mehrere Dateiquellen für verschiedene Pixeldichten angegeben werden. Die Pixeldichte wird per Leerzeichen getrennt hinter den Dateiverweis notiert – zum Beispiel „2x“ für die doppelte Pixeldichte.

<img srcset="bild.jpg, bild@2x.jpg 2x" src="bild.jpg" width="320" height="160" alt="HTML5 & CSS3: mache deine Website fit für hochauflösende Displays" />

Im Beispiel werden per „srcset“ zwei Dateien angegeben. Die erste Datei wird bei Displays mit einfacher Pixeldichte geladen. Der Wert „1x“ kann bei einfachen Pixeldichten weggelassen werden. Es folgt eine Datei für Displays mit doppelter Pixeldichte. Als Fallback für ältere Browser sollte man immer auch das bekannte „src“-Attribut angegeben. Dort sollte dann das „normale“ Bild referenziert werden.


HTML5 & CSS3: mache deine Website fit für hochauflösende Displays
Vergleich zwischen Bild mit doppelter Pixeldichte (oben) und einfacher Pixeldichte (unten) auf einem hochauflösenden Display

Statt die Pixeldichte anzugeben, gibt es auch die Möglichkeit, die physische Breite oder Höhe eines Bildes an die jeweiligen Dateiquellen innerhalb des „srcset“-Attributes anzuhängen.

<img srcset="bild-320w.jpg 320w, bild-640w.jpg 640w" src="bild-640w.jpg" alt="HTML5 & CSS3: mache deine Website fit für hochauflösende Displays" />

Entscheidet man sich für diese Variante, wird das Bild immer auf die gesamte  Browser- beziehungsweise Fensterbreite skaliert – vorausgesetzt, es werden keine „height“- und „width“-Attribute gesetzt.Der Browser wählt dann jeweils die Datei aus, die für die Darstellung benötigt wird. Wird das Bild im Beispiel in einer Breite von bis zu 320 Pixel dargestellt, wird die Datei „bild-320w.jpg“ genommen. Bei Auflösungen darüber wird die Datei „bild-640w.jpg“ verwendet.

Über das „sizes“-Attribut hat man nun noch die Möglichkeit, die darzustellende Breite des Bildes zu beeinflussen. Dazu werden Media-Angaben in Kombination mit der gewünschten Darstellungsbreite des Bildes angegeben.

<img srcset="bild-320w.jpg 320w, bild-640w.jpg 640w" sizes="(min-width: 320px) 50vw, (max-width: 320px) 100vw" src="bild-640w.jpg" alt="" />

Im Beispiel wird das Bild bei einer Viewport-Breite von mindestens 320 Pixel („min-width: 320px“) so skaliert, dass es 50 Prozent der Breite des Viewports („50vw“) einnimmt. Bei einer Viewport-Breite von weniger als 320 Pixel nimmt das Bild den gesamten Viewport in der Breite ein („100vw“).

HTML5 & CSS3: mache deine Website fit für hochauflösende Displays
Unterschiedliche Darstellungsbreite: Im Portrait-Modus 100 Prozent und im Landscape-Modus 50 Prozent des Viewports

Innerhalb einer „srcset“-Dateireferenz kann immer nur die Pixeldichte (zum Beispiel „2x“) oder Breite und Höhe (zum Beispiel „320w 160h“) angegeben werden. Eine Kombination von Pixeldichte und Breite beziehungsweise Höhe ist nicht möglich.

Das „srcset“-Attribut funktioniert auch in Kombination mit dem neuen „<picture>“- und dem dazugehörigen „<source>“-Element. Über das „<picture>“-Element hat man die Möglichkeit, Bilder für verschiedene Display- beziehungsweise Fenstergrößen festzulegen. Auch hier können dann Quellen für unterschiedliche Pixeldichten hinterlegt werden.

<picture>
  <source srcset="bild-640w.jpg, bild-640w@2x.jpg 2x" media="(min-width: 320px)" />
  <source srcset="bild-320w.jpg, bild-320w@2x.jpg 2x" media="(max-width: 320px)" />
  <img src="bild-640w.jpg" width="320" height="160" alt="" />
</picture>

Im Beispiel werden über die beiden „<source>“-Elemente insgesamt vier Dateiquellen referenziert. Display- beziehungsweise Fensterbreiten bis 320 Pixel stellen die Dateien „bild-320w.jpg“ und „bild-320w@2x.jpg“ (je nach Pixeldichte) dar. Bei größeren Breiten werden die Dateien „bild-640w.jpg“ und „bild-640w@2x.jpg“ aufgerufen. Berücksichtigen muss man, dass das „<source>“-Element keine „width“- und „height“-Attribute kennt. Will man die Größenangaben festlegen, muss man dies per CSS machen.

Auch hierbei sollte man wieder ein „<img>“-Fallback bereitstellen, um ältere Browser nicht außen vor zu lassen.

Das „srcset“- und „sizes“-Attribut sowie das „<picture>“-Element werden von Chrome und Firefox jeweils ab Version 38 unterstützt. Der Internet Explorer unterstützt die Attribute und das Element derzeit noch nicht. Android-Chrome ist ab Version 40, iOS-Safari ab Version 8.1 dabei. Letzterer unterstützt „sizes“ aber nur eingeschränkt.

Wer das „srcset“-Attribut auch für Browser verwenden möchten, die es noch nicht unterstützen, kann sich mit einem Polyfill behelfen, welches die Funktionalität für ältere Browser nachbildet.

CSS3 und „image-set()“

Auch per CSS3 gibt es mittlerweile eine Möglichkeit, unterschiedliche Bildquellen für verschiedene Pixeldichten anzugeben. Hierfür steht die „image-set()“-Notation zur Verfügung. In dieser lassen sich ähnlich wie beim HTML5-Attribut „srcset“ mehrere Dateien per „url()“ referenzieren. Die Notation „image-set()“ kann überall dort eingesetzt werden, wo eine Bildquelle per „url()“ angegeben wird.

body {
  background-image: url("hg.jpg");
  background-image: image-set(
    url("hg.jpg") 1x,
    url("hg@2x.jpg") 2x
  );
}

Im Beispiel wird per „image-set()“ eine Hintergrundgrafik für zwei Pixeldichten definiert. Derzeit sollte man die Notation mit entsprechenden Vendor-Präfixen auszeichnen – zum Beispiel „-webkit-image-set()“. Außerdem ist es auch hier ratsam, für ein Fallback zu sorgen. Wichtig ist, dass das Fallback wie im Beispiel vor der „image-set()“-Variante notiert wird. Browser, die „image-set()“ nicht kennen, werden die zweite „background-image“-Eigenschaft ignorieren. Alle anderen Browser werden die zweite Eigenschaft ausführen und somit die erste damit überschreiben.

html5-css3-pixeldichte-hg
Hochauflösender Hintergrund (oben) und normal aufgelöster Hintergrund (unten)

Die „image-set()“-Notation wird derzeit vom Chrome ab Version 31 unterstützt. Firefox und Internet Explorer unterstützen sie nicht. Außerdem kennen der iOS-Safari ab Version 7.1 und der Android-Chrome ab Version 40 diese Notation.

Neben der „image-set()“-Notation, welche unterschiedliche Pixeldichte nur bei Bildern berücksichtigt, gibt es auch noch die Media-Query-Angaben „min-resolution“ und „max-resolution“. Hier können beliebige CSS-Eigenschaften für verschiedene Pixeldichten berücksichtigt werden.

@media screen and (min-resolution: 2dppx) {
  body {
    background: url("hg@2x.jpg");
  }
}

Im Beispiel wird per „min-resolution“ eine Hintergrundgrafik für Displays mit doppelter Pixeldichte definiert. Die Einheit „dppx“ steht für „dot per pixel“ und somit für die Pixeldichte. Es stehen aber auch andere Einheiten zur Verfügung. So kann man beispielsweise „dpi“ für „dots per inch“ verwenden. Damit ist es beispielsweise möglich, Bilder in Druckauflösung bereitzustellen. Als letzte Einheit gibt es noch „dpcm“, was für „dots per centimeter“ steht. Für die Darstellung auf Monitoren sollte man die Einheit „dppx“ verwenden.

Das „resolution“-Feature wird von Chrome ab Version 31 und Firefox ab Version 35 unterstützt. Der Internet Explorer unterstützt das Feature ab Version 9, aber nur mit der Einheit „dpi“. Android-Chrome kennt das Feature seit Version 40 und iOS-Safari ab Version 7.1 – allerdings nur in der veralteten Schreibweise „min-device-pixel-ratio“ beziehungsweise „max-device-pixel-ratio“.

Alternative: Bitmaps grundsätzlich in hoher Auflösung bereitstellen

Die neuen HTML5-Elemente und -Attribute ermöglichen es zwar, Bilder für verschiedene Auflösungen und Pixeldichten bereitzustellen. Allerdings müssen meist mehrere unterschiedliche Dateien für ein Bild generiert werden. Content-Management-Systeme wie TYPO3 automatisieren dies zwar. Aber bei handgemachten Webprojekten, die ohne serverseitige Programmiersprache auskommen müssen, steht man vor der Aufgabe, all diese Dateivarianten manuell zu generieren.

Wer diesen Aufwand scheut, aber dennoch auch hohe Pixeldichten berücksichtigen möchte, kann einen Zwischenweg gehen, bei dem man mit jeweils einer Datei für alle Pixeldichten auskommt. Dazu wird die Bilddatei direkt in doppelter Auflösung erstellt – am Besten in reduzierter Qualität –, dann aber mit halber Auflösung in ein HTML-Dokument eingebunden. Ein Bild mit 640 mal 320 Pixel Größe würde dann also in dieser Weise verwendet.

<img src="bild-640w.jpg" width="320" height="160" alt="" />

Während hochauflösende Displays die volle physische Auflösung darstellen, wird auf „normalen“ Displays das Bild auf die Hälfte der Größe herunter skaliert. Bei normaler Pixeldichte wird die schlechte Qualität durch die verkleinerte Darstellung wett gemacht. Bei doppelter Pixeldichte hat man immer noch eine bessere Qualität als bei der Verwendung eines Bildes in normaler Auflösung.

Der Nachteil dieser Herangehensweise ist natürlich, dass bei Displays mit einfacher Pixeldichte eine unnötig große Datei heruntergeladen wird. Daher bietet es sich an, diese Möglichkeit nur mit etwas stärker komprimierten JPEG-Dateien einzusetzen.

html5-css3-pixeldichte-kompression
Stark komprimierte JPEG-Datei in halber Auflösung (oben)

Auch per CSS können Bilder in doppelter Auflösung eingebunden werden. Mit der Eigenschaft „background-size“ hat man hierbei die Möglichkeit, das Bild auf die Hälfte der Auflösung herunter zu skalieren.

body {
  background-image: url("hg.jpg");
  background-size: 32px 16px;

Hat das Hintergrundbild im Beispiel eine Auflösung von 64 mal 32 Pixel, wird es um 50 Prozent verkleinert dargestellt. Man erreicht somit denselben Effekt wie beim HTML-Beispiel.

SVG-Grafiken und Iconfonts verwenden

Alle aktuellen Browser unterstützen mittlerweile das vektorbasierte SVG-Format. Vor allem Logos und viele andere grafischen Elemente sind ja meist als Vektorgrafiken vorhanden und wurden bislang als GIF- oder PNG-Datei in eine Website eingebunden. Dank des SVG-Formates können diese auch direkt als Vektorgrafik in einer Website dargestellt werden – sei es per HTML über das „<img>“-Element oder per CSS über „url()“.

Der Vorteil des SVG-Formates liegt auf der Hand: Da es vektorbasiert ist, wird es stets in bester Auflösung dargestellt. Zudem schont es die Bandbreite und spart Arbeit, da es nicht für die verschiedenen Auflösungen und Pixeldichten bereitgestellt werden muss.

Alternativ zu SVG-Grafiken sind Iconfonts bestens für hochauflösende Displays geeignet. Schließlich sind ebenso Schriften vektorbasiert und werden daher immer in optimaler Auflösung dargestellt.

Wer bei SVG-Grafiken auf Nummer sicher gehen und ältere Browser ohne SVG-Unterstützung berücksichtigen will, kann mit einigen Kniffen hierfür Fallback-Lösungen einbauen.

Pixeldichte mit JavaScript feststellen

Gelegentlich werden Bilder per JavaScript geladen – zum Beispiel bei Galerien. Statt ein „<img>“-Element mit allen „srcset“-Referenzen per JavaScript zu generieren, kann auch direkt die richtige Bildquelle in der für das Gerät zutreffenden Pixeldichte geladen werden.

Denn JavaScript kennt die Eigenschaft „devicePixelRatio“, mit der die Pixeldichte abgefragt werden kann.

if (window.devicePixelRatio > 1) {
  document.getElementsByTagName("img")[0].src = "bild@2x.jpg";
}

Im Beispiel wird eine Bilddatei geladen, wenn die Pixeldichte größer 1 ist. Logischerweise kann die Eigenschaft nur ausgelesen werden.

Eine Sache sollte man bei der Verwendung von „devicePixelRatio“ beachten. Denn der durch diese Eigenschaft ermittelte Wert ist immer abhängig vom jeweiligen Zoomfaktor des Browsers. Wird ein Dokument per Browserzoom in einer Größe von 150 Prozent dargestellt, liefert „devicePixelRatio“ einen Wert von „1.5“ – bei einfacher Pixeldichte. Bei doppelter Pixeldichte würde bei diesem Zoomfaktor der Wert „3“ zurückgegeben werden.

Fazit und Links zum Beitrag

Webprojekte für hochauflösende Displays fit zu machen, kann eine recht umfangreiche Aufgabe sein. Allerdings sollte man – gerade bei neuen Projekten – hohe Pixeldichten immer berücksichtigen. Alle vorgestellten Lösungen können relativ einfach mit Fallbacks ausgestattet werden, sodass man nie Gefahr läuft, ältere Browser außen vor zu lassen.

(Der Artikel erschien erstmalig am 16. März 2015 und wurde von dem Autor vor seiner erneuten Veröffentlichung auf seine Aktualität hin geprüft.)
(dpe, DO)