Kategorien
Design HTML/CSS UI/UX Webdesign

Farben finden: 5 Tools für gute Farbkombinationen

Farben spielen im Design natürlich eine große Rolle. Doch stimmige und passende Farbkonzepte zu erstellen, ist nicht jedermanns Sache. Daher gibt es eine Reihe von Webanwendungen, die dir helfen, gute Farbkombinationen zu finden. Monochromatische Farben lassen sich ebenso zusammenstellen wie Komplementärfarben. Dabei unterscheiden sich die Tools teils bereits im Ansatz.

Kategorien
Design Icons & Fonts

Google Fonts 2018: Diese Schriften sind im Trend

Wie fast alles im Grafik- und Webdesign sind auch Schriften immer wieder Trends ausgesetzt. Die Auswahl an Schriften wächst stetig – auch bei Google Fonts – und Neues ist daher immer wieder schnell gefunden. Folgende Schriften und Schriftkombinationen solltest du 2018 bei einem deiner nächsten Projekte einmal ausprobieren.

Kategorien
Icons & Fonts Webdesign

Typografisches Einmaleins für Websites

War Typografie zu den Anfängen des World Wide Webs etwas Nebensächliches, hat es in den letzten Jahren zunehmend an Bedeutung gewonnen. Vor allem dank CSS sind zahlreiche typografische Features möglich, die vor einigen Jahren noch undenkbar oder nur auf Umwegen zu realisieren waren. Doch alles, was möglich ist, muss auch gut umgesetzt werden. Dieses kleine Einmaleins zeigt dir, worauf du achten solltest und wie du deine Website typografisch in den Griff bekommst.

Webfonts statt Systemschriften

Eigentlich versteht es sich mittlerweile ja von selbst: Der Einsatz von Systemschriften ist keine Option mehr, wenn es um zeitgemäße und individuell gestaltete Websites geht. Neben den vielen kommerziellen Anbietern gibt es ebenso viele, bei denen du kostenlos Webfonts für deine Website findest. Allen voran sei da Google Fonts genannt. Aber auch Fontsquirrel hat eine große Auswahl hochwertiger Schriften.

Um keine Probleme mit dem Datenschutz zu bekommen, solltest du allerdings darauf verzichten, Schriften durch Google hosten zu lassen. Lade sie dir herunter und stelle sie über deinen eigenen Webspace bereit. Dann gibt es keinen Ärger bezüglich der DSGVO. Denn Google Fonts erfasst über die JavaScript-Einbindung personenbezogene Daten.

Google Fonts

Das mittlerweile etablierte Dateiformat WOFF2 für Webfonts schafft es zudem, Schriften deutlich besser zu komprimieren als sein Vorgänger. Über zu große Dateien musst du dir also auch keine Sorgen machen.

Schriften richtig kombinieren

In der Regel kommt auf einer Website mehr als eine Schrift zum Einsatz. Für ein abwechslungsreiches Design ist eine gewisse typografische Abwechslung auch durchaus sinnvoll. Hier solltest du natürlich zwei Schriften finden, die gut zueinander passen. Auf der sicheren Seite bist du, wenn du Schriften derselben Familie kombinierst.

So lassen sich die „Source Sans“ und die „Source Serif“ von Adobe aus nachvollziehbaren Gründen immer kombinieren. Ansonsten gilt: Je ähnlicher zwei Schriften sind, desto schwieriger wird es. Wenn du eine Serifenlose ausschließlich in Versalien (Großbuchstaben) verwendest, kannst du fast jede andere Serifenschrift damit kombinieren. Je ähnlicher sich die Schriften sind, desto mehr musst du unter anderem darauf achten, dass die x-Höhe – also der Abstand zwischen Grund- und Mittellinie – der beiden Schriften ähnlich ist.

Auch hier hilft ein Blick zu Google Fonts. Dort werden dir passende Schriftkombinationen zu einer Schriftart angeboten. In jedem Fall gilt: Mehr als zwei Schriften solltest du in der Regel nicht kombinieren. Variationen kannst du durch verschiedene Styles – zum Beispiel fett oder kursiv – erreichen.

Die richtige Größe wählen

Wichtig für die Lesbarkeit einer Schrift ist natürlich die Größe. Eine perfekte Größe lässt sich pauschal für eine Schrift nicht festlegen. Letztendlich muss eine Schriftgröße immer für das jeweilige Gerät passen. Auf Smartphones ist mitunter eine andere Schriftgröße notwendig als auf einem großen Monitor am Schreibtisch.

Per Media Queries solltest du also unterschiedliche Größen definieren, die sich je nach Auflösung des Displays beziehungsweise Größe des Browserfensters richten.

Immer wieder gibt es Diskussionen, welche Einheit für die Angabe einer Schriftgröße denn die passende ist. Meist bietet sich die Einheit „em“ an. „1em“ entspricht bei den meisten Browsern einer Größe von 16 Pixeln. Der Vorteil der „em“-Einheit besteht darin, dass sie relativ ist. Wer Überschriften zum Beispiel immer doppelt so groß dargestellt haben möchte wie Fließtext, wählt „2em“. Ändert sich die Größe des Fließtextes, werden auch Überschriften entsprechend größer dargestellt. Während „em“ immer relativ zum jeweiligen Elternelement definiert ist, gibt es mit „rem“ eine Einheit, die immer relativ zum „<body>“-Element definiert ist.

Mit der Einheit „vw“ (für „view width“) kannst du Schriften auch direkt an der Breite des Browserfensters beziehungsweise Viewports ausrichten. „1vw“ entspricht dabei ein Prozent der Breite des Viewports. Der Vorteil dieser Einheit besteht darin, dass Texte bei veränderter Breite immer mit skalieren – ähnlich wie Bilder, die sich immer an der Breite des Viewports orientieren. Vor allem für Überschriften und kurze Texte bietet sich diese Einheit prima an.

OpenType-Features nutzen

Im klassischen Desktop-Publishing werden OpenType-Features wie Ligaturen, Mediävalziffern und andere typografischen Besonderheiten und Raffinessen bereits lange eingesetzt. Aber dank CSS verwendest du die verschiedenen Möglichkeiten von OpenType-Schriften auch im Webdesign – vorausgesetzt natürlich, die jeweilige Schrift unterstützt diese Features.

Um bestimmte OpenType-Merkmale zu nutzen, musst du diese per CSS aktivieren. Die entsprechenden Eigenschaften beginnen mit „font-variant“. Um zum Beispiel Ligaturen zu verwenden, nutzt du die Eigenschaft „font-variant-ligatures“. Der Wert „common-ligatures“ aktiviert die Standard-Ligaturen einer Schrift. Dazu zählen klassische Ligaturen, bei denen Buchstabenpaare wie „fi“, „fl“ und „ff“ durch entsprechende Ligaturen ersetzt werden.

Daneben gibt es noch sogenannte bedingte Ligaturen, welche oft zur Verschnörkelung verwendet werden. Diese werden mit dem Wert „discretionary-ligatures“ aktiviert. Es gibt zahlreiche weitere Features – zum Beispiel für Zahlenformate und Kapitälchen. Nicht immer unterstützt eine Schrift jedoch alle OpenType-Merkmale.

Interpunktion und Sonderzeichen richtig einsetzen

Wer typografisch alles richtig machen will, achtet natürlich auf die korrekte Interpunktion und die Verwendung richtiger Zeichen. Das fängt bei Anführungszeichen an, die im Deutschen entweder „so“ oder »so« aussehen, aber niemals „so“.

Wenn du Zitate per „<cite>“ oder „<blockquote>“ auszeichnest, kannst du die Anführungszeichen auch per CSS definieren, indem du per „::before“ und „::after“ und der „content“-Eigenschaft die öffnenden beziehungsweise schließenden Anführungszeichen hinterlegst.

Außerdem solltest du den Unterschied zwischen Trenn- und Gedankenstrich berücksichtigen – letzterer ist deutlich länger als der Trennstrich. Dank UTF-8 müssen all diese Zeichen nicht mehr per HTML-Entitys ausgezeichnet werden.

Die hier erwähnten Beispiele zählen schon zur sogenannten Detailtypografie, mit denen ganze Bücher gefüllt sind. Aber wer die hier vorgestellten Regeln und Tipps beachtet, macht schon eine Menge richtig, wenngleich es in der Typografie ziemlich viel gibt, was man falsch machen kann.

Kategorien
E-Business Freelance

Mein liebster Kunde: Kundentypen und wie man damit umgeht

Um es vorwegzunehmen: Mir macht die Arbeit als Grafik- und Webdesigner unglaublich viel Spaß. Sie ist abwechlungsreich, oft anspruchsvoll und gelegentlich sogar großartig. Dabei spielt es für mich keine große Rolle, für welche Branche ich arbeite. Ob Dienstleistung, Handwerk, Industrie oder Kultur – alles kann gleichermaßen spannend und herausfordernd sein. Oft gibt es nur ein großes Hindernis und das nennt sich: Kunde

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Responsive Design Webdesign

Responsives Webdesign: So wählst du die richtigen Fotos für unterschiedliche Formate

Für dich als Webdesigner ist das mobile Internet eine Herausforderung. Websites müssen auf unterschiedlich großen Displays mit verschiedenen Seitenverhältnissen gut aussehen. Zu deinen Aufgaben gehört dabei auch die Auswahl geeigeneter Fotos für responsives Webdesign.

Kategorien
Design Essentials Icons & Fonts Webdesign

Fonts für jedermann: Diese Schriften gehen immer

Die Suche nach geeigneten Schriften für ein Webprojekt gestaltet sich nicht immer einfach. Viele Schriften haben einen ganz individuellen Charakter und passen daher nicht immer und überall. Es gibt jedoch eine Reihe von kostenlosen Schriften, die sehr allgemein gestaltet sind und daher für nahezu jedes Webprojekt eingesetzt werden können.

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 Essentials Inspiration

ShapeFactory: Design-Tools für Logos, Farben und Verläufe

Als Grafik- und Webdesigner stellt man sich täglich zahlreichen Aufgaben und Herausforderungen. Dazu zählen unter anderem die Gestaltung von Logos sowie die stimmige Kombination von Farben und Verläufen. Ob man diese Aufgaben einem Online-Tool überlassen sollte, ist fraglich. Mit der ShapeFactory hast du zumindest diese Möglichkeit – und es macht durchaus Spaß.

Kategorien
Essentials Icons & Fonts

Future Fonts: Schriften kaufen, bevor sie fertig sind

Das Angebot an kommerziellen Schriften wächst stetig. Neben den großen Anbietern, wie Linotype und MyFonts, entstehen auch immer wieder neue Foundrys mit eigenen Schriften von jungen, meist unbekannten Designern. Auch wenn die Preise von Schriften je nach Anbieter und Gestalter stark schwanken, kannst du schon einiges investieren, um dir ein gewisses Repertoire an Schriften anzulegen.

Schriften während der Entwicklung erwerben

Das Foundry Future Fonts geht hier einen ganz eigenen, interessanten Weg. Denn der Anbieter bietet Schriften bereits während der Entwicklung zum Kauf an. So kannst du also für wenig Geld eine Schrift erwerben, die zwar noch nicht fertig, aber schon einsatzfähig ist.

Anhand der Versionsnummer siehst du, in welchem Entwicklungsstand sich eine Schrift befindet. Eine Schrift in der Version 0.1 steht somit in der Regel noch ganz am Anfang, während bei Schriften mit der Version 1.0 die Entwicklung abgeschlossen ist.

Aktueller Stand des Ausbaus einer Schrift

Außerdem gibt es eine detaillierte Auflistung, welche genau darüber informiert, was du alles vom aktuellen Stand der Schrift zu erwarten hast. So wird über den Ausbau der verschiedenen Schnitte ebenso informiert, wie über den Zeichensatz.

Beim Zeichensatz erfährst du unter anderem auch, ob die Schrift bereits für spezielle Sprachen einsatzbereit ist. Ist eine Schrift für das Deutsche bereits ausgebaut, sind Umlaute und Eszett also enthalten.

Welche Sprachen zuerst unterstützt werden, hängt vom Gestalter der Schrift ab. In der Regel wird er zunächst seine Muttersprache mit allen nötigen Sonderzeichen ausstatten, bevor andere Sprachen unterstützt werden.

Auch Angaben zum Kerning und Hinting der Schrift werden gemacht. Das Kerning sorgt für ausgewogene Abstände zwischen einzelnen Buchstaben. Diese Abstände werden in der Schrift für alle Buchstabenpaare hinterlegt. Das Hinting sorgt für eine optimale Darstellung der Schrift am Monitor.

Gerade am Anfang können diese wichtigen Eigenschaften einer Schrift noch fehlen, da sie eher zum Feinschliff gehören und somit erst am Ende der Entwicklung in die Schrift einfließen.

Ein weiterer Punkt in der Auflistung ist die Zeichenqualität der Schrift. Diese gibt an, wie gut die einzelnen Zeichen bereits gezeichnet sind und ob hier noch Verbesserungen zu erwarten sind. Gerade am Anfang wird es bei Schriften sicher öfter vorkommen, dass einzelne Buchstaben noch nicht optimal aufeinander abgestimmt sind und es somit noch Veränderungen geben wird.

Vorteile des frühen Kaufens

Jetzt stellt sich natürlich die Frage, warum man eine Schrift kaufen sollte, die noch gar nicht fertig ist – möglicherweise sogar eine Schrift, bei der etliche Zeichen fehlen oder die vorhandenen Zeichen noch nicht optimal gezeichnet sind.

Entscheidest du dich zu einem frühen Entwicklungsstand der Schrift zum Kauf, erhältst du die Schrift nicht nur zu einem günstigen Preis. Du erhältst auch alle Updates bis hin zur finalen Version ohne zusätzliche Kosten.

Wenn dir also eine Schrift von Future Fonts gefällt, kann es sich auf jeden Fall lohnen, diese schon sehr frühzeitig zu erwerben, bevor sie zum Normalpreis als Vollversion bereitsteht. Natürlich besteht das Risiko, dass dir die Schrift in der Finalversion nicht mehr so zusagt. Aber dafür hast du auch nur einen Bruchteil des normalen Preises bezahlt.

Für den Entwickler hat dieses Konzept übrigens auch Vorteile. Er kann seine Schrift bereits während der Entwicklung von zahlreichen Gestaltern testen lassen und sich Feedback einholen. Dabei besteht natürlich auch die Möglichkeit, Wünsche der Testkäufer mit zu berücksichtigen.

Schriften von plakativ bis alltagstauglich

Derzeit ist die Auswahl an Schriften bei Future Fonts noch überschaubar. Derzeit sind gut 20 verschiedene Schriften im Angebot. Dazu gehören plakative Schriften wie die „Ohno Blaceface“ oder die „Macabre“. Beide Schriften stehen noch am Anfang der Entwicklung, zeichnen sich aber durch ihr frisches Design aus.

Auswahl an Schriften

Zudem gibt es ganz klassische Schriften, die sich für Fließtexte eignen und somit sehr alltagstauglich sind. Dazu gehören zum Beispiel die „Messer“ und die „Covik Sans Mono“.

Die „Messer” ist eine Serifenschrift, die in den Schnitten „regular“, „condensed“ und „italic“ vorhanden ist. Da diese bereits in der Version 1.0 vorliegt, wird sie zum Normalpreis für 99 US-Dollar angeboten. Aber auch das ist für eine Schrift mit drei Schnitten durchaus erschwinglich.

„Covik Sans Mono“

Die „Covik Sans Mono” hingegen ist erst in der Version 0.1 erhältlich und kostet bereits 90 US-Dollar. Hier ist zu erwarten, dass sich der Preis im Laufe der Entwicklung noch deutlich nach oben entwickelt.

Schriften einreichen

Wer selbst Schriften gestaltet und ein Foundry sucht, kann seine Entwürfe bei Future Fonts einreichen. Das Foundry prüft deinen Entwurf und entscheidet, ob er qualitativ und von der Gestaltung ins Angebot passt.

Im Übrigen gibt es seitens Future Fonts keine Verpflichtung, eine Schrift fertigzustellen. Theoretisch kann eine Schrift auch dauerhaft in Version 0.1 verharren. Allerdings fühlen sich die Schriftgestalter zumeist – wohl auch aufgrund des Feedbacks der Community – verpflichtet, eine Schrift in den Endzustand zu überführen.

In jedem Fall lohnt sich ein Besuch bei Future Fonts – sei es als Käufer oder Gestalter von Schriften.

Kategorien
Webdesign

Tipps für Webdesigner: Was gehört alles in deinen HTML-HEAD

Der HTML-Kopf ist ein wichtiger Bestandteil eines jedes HTML-Dokumentes. Dort wird der Titel festgelegt und JavaScript- sowie CSS-Dateien eingebunden. Aber das „<head>“-Element hat in den letzten Jahren zunehmend an Bedeutung gewonnen. Denn auch die Einbindung anderer Webdienste wie Suchmaschinen und soziale Netzwerke erfolgt hier.

Die Website gethead.info gibt dir eine sehr umfangreiche Übersicht an die Hand, in der alle notwendigen und wichtigen Elemente des HTML-Kopfs aufgelistet sind.


Einen HEAD über dieses Thema machte ich mir übrigens zuerst exklusiv im Dr. Web-Newsletter. Hier kannst du dich kostenlos registrieren.

Das allerwichtigste zuerst

Zunächst trägt die Website zusammen, was in keinem „<head>“-Element fehlen darf. Dazu gehören das „<title>“-Element ebenso selbstverständlich wie einige „<meta>“-Elemente. So erfordert HTML5 immer die Angabe des Zeichensatzes über eine Meta-Angabe. Und der sollte mittlerweile nichts anderes als UTF-8 sein.

Außerdem empfiehlt dir gethead.info einige weitere Meta-Angaben, die ganz grundsätzlich für eine optimierte Darstellung deiner Website wichtig sind. Zum Beispiel sollte über ein „<meta>“-Element der Viewport deiner Website angegeben werden. Und dieser sollte so gewählt sein, dass die Breite des Displays immer auch die Breite deiner Website darstellt und die Seite nicht skaliert wird.

Diese Einstellung setzt natürlich voraus, dass deine Website responsiv und für Mobilgeräte gestaltet ist. Aber dies versteht sich mittlerweile ja eigentlich von selbst.

Darüber hinaus gehören die Einbindung von Stylesheets und JavaScripts in den HTML-Kopf, insofern diese vor dem HTML-Body geladen werden sollen. In vielen Fällen ist es sinnvoll, CSS- und JavaScript-Dateien am Ende des „<body>“-Elementes zu laden. Denn alles, was im Head geladen wird, verlangsamt das Laden und Darstellen des eigentlichen Inhaltes.

Meta-Angaben für Suchmaschinen

Soll eine Suchmaschine ein HTML-Dokument und darin verlinkte Seiten bei der Indizierung berücksichtigen? Auch die Beantwortung dieser Frage gehört in den HTML-Head und wird über die Meta-Angabe „robots“ und den Werten „index“, „noindex“, und „follow“ sowie „nofollow“ festgelegt.

Meta-Angaben für Suchmaschinen

Aber gethead.info listet dir noch weitere „<meta>“-Elemente auf, mit denen du zum Beispiel diverse Suchmaschinen verifizieren kannst. Das ist zum Beispiel nötig, um Googles Such-Konsole nutzen zu können – gilt aber auch für andere Suchmaschinen wie Bing oder Dienste wie Pinterest.

Verweise im HTML-Kopf festlegen

Neben Stylesheets werden zahlreiche andere Verweise über das „<link>“-Element im HTML-Kopf eingebunden. Zur Vermeidung von doppeltem Inhalt gibst du zum Beispiel über die „<link>“-Angabe „canonical“ einen Link an, der auf ein inhaltlich identisches Dokument verweist, welches einfach nur über eine andere URL erreichbar ist.

Auch RSS-Feeds und die Einbindung von Open Search erfolgen über jeweilige Verlinkungen im „<head>“-Element.

Ebenfalls Verweise auf Archive, Autoren- und Indexseiten legst du hiermit fest. Bei Seiten mit Paginierung verlinkst du auf die jeweils vorherige und nachfolgende Seiten. Das ist für Suchmaschinen ebenso interessant wie für einige Browser, die den Aufbau deiner Website so besser nachvollziehen können.

Soziale Netzwerke zum Teilen einbinden

Soziale Netzwerke spielen eine große Rolle. Willst du Artikel oder andere Dokumente deiner Website auf Facebook oder Twitter teilen, ist es ratsam, entsprechende Tags im Head zu platzieren, damit Titel, Bild und Beschreibung des Dokumentes korrekt wiedergegeben werden können.

Einbindung von Open-Graph-Angaben für Facebook

Neben dem Open-Graph-Standard, welches Facebook unterstützt und auch von anderen Diensten wie Google+ und LinkedIn interpretiert wird, gibt es für Twitter mit den sogenannten Twitter-Cards eigene Tags zu Einbindung.

Besonderheiten für Browser und Betriebssysteme

Wenn es darum geht, eine Website als Favorit zu speichern und irgendwo abzulegen, haben jeder Browser und jedes Betriebssystem so ihre Besonderheiten.

So lassen sich unter Windows 10 spezielle Icons und Farben festlegen, mit der ein Favorit als Kachel abgelegt wird. Apple hingegen hinterlegt einen Verweis mit speziellen Icons, die du in verschiedenen Größen einbindest.

Gibt es für deine Website eine eigene App? Dann kannst du auch dies über eigene Angaben im HTML-Kopf angeben. Sowohl Apple als auch Android bieten für ihre jeweiligen App-Stores entsprechende Verlinkungen an. Ruft man deine Website mit einem jeweiligen Smartphone oder Tablet auf, werden Besucher auf die App hingewiesen.

Fazit

Die Website gethead.info ist nicht nur für Einsteiger eine interessante Anlaufstelle, sondern auch für Fortgeschrittene. Die Liste ist recht umfangreich und bietet eine Menge Informationen in Kurzform.

Neben den kurz vorgestellten Angaben gibt es noch viele weitere, die teils sehr speziell sind. So werden unter anderem auch Meta-Angaben für recht unbekannte Browser angeboten.

Außerdem gibt es auch noch einige Tipps, wie man durch entsprechende Auszeichnung die Performance deiner Website verbessern kann, sowie Links zu verwandten Projekten.

Die Website gethead.info steht unter der Public-Domain-Lizenz und wird auch auf GitHub gehostet. Dort kannst du dir verschiedene Snippets als Vorlage für deine eigenen Webprojekte herunterladen.

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
Programmierung

HTML5-Canvas oder SVG?

Mit der Einführung von HTML5 ab 2004 wurde auch die JavaScript-basierte Zeichenmethode Canvas eingeführt. Bereits seit 2001 gibt es das vektorbasierte SVG-Format, welches allerdings erst in den letzten Jahren parallel zu HTML5 ein wirklicher Erfolg wurde. Beide Formate haben ihre Vor- und Nachteile. Aber welches ist wann besser geeignet? Wo liegen die Vor- und Nachteile?

JavaScript gegen XML-Syntax

Der größte Unterschied zwischen HTML5-Canvas und SVG ist die der Auszeichnung beziehungsweise Programmierung. Per HTML5 wird letztlich nur ein einziges Element („<canvas>“) ausgezeichnet. Der komplette Inhalt der Leinwand wird per JavaScript realisiert.

Entsprechende Methoden ermöglichen es, Formen wie Rechtecke, Kreise und auch komplexe Polygone und Bögen zu zeichnen sowie miteinander zu kombinieren. Für das Aussehen – Füllfarbe sowie Konturenstärke und -farbe – wird ebenfalls JavaScript verwendet.

var leinwand = document.getElementById("leinwand");
var zeichnung = leinwand.getContext("2d");
zeichnung.moveTo(0, 0);
zeichnung.lineTo(200, 200);
zeichnung.lineWidth = 2;
zeichnung.strokeStyle = "red";
zeichnung.stroke();

Im Beispiel wird eine Linie von der Position „0, 0“ zur Position „200, 200“ gezeichnet und rot eingefärbt.

Per SVG würde dieselbe Linie über ein entsprechendes SVG-Element ausgezeichnet.

<line x1="0" y1="0" x2="200" y2="200" stroke-width="2" stroke="red" />

Obwohl das Ergebnis in beiden Fällen identisch ist, erkennt man, dass die SVG-Variante deutlich kürzer ausfällt und aufgrund der XML-Syntax für die Meisten vermutlich deutlich intuitiver auszuzeichnen ist.

Ein weiterer Vorteil im SVG-Format besteht darin, dass die Gestaltung auch per CSS erfolgen kann. Hier lassen sich einzelne Formen per ID oder Klasse einheitlich gestalten.

Bei der Auszeichnung liegt das SVG-Format also vorne. Es ist platzsparender und hat eine einfachere Syntax. Wer zudem grundsätzlich alle Inhalte auch ohne JavaScript anbieten möchte, hat mit HTML5-Canvas ohnehin schlechte Karten.

Pixel gegen Vektoren

Ein weiterer großer Unterschied besteht in der Darstellung der Formate. Während HTML5-Canvas ein pixelbasiertes Format (es wird jeweils ein PNG-Bild im Browser erzeugt) ist, ist das SVG-Format vektorbasiert.

Natürlich kannst du auch per HTML5-Canvas entsprechend Grafiken für hochauflösende Displays erstellen. Aber spätestens beim Hereinzoomen werden Canvas-Zeichnungen pixelig, während SVG-Zeichnungen ihre Schärfe beibehalten.

Auch hier hat das SVG-Format die Nase vorn – zumal du auch innerhalb eines SVG-Dokumentes Bitmaps einbinden kannst.

Interaktionen und Effekte

Da das SVG-Format auch CSS unterstützt, stehen einem alle Möglichkeiten von Stylesheets zur Verfügung. Neben der einfachen Gestaltung lassen sich auch interaktive Effekte einbeziehen.

So kannst du zum Beispiel Hover-Effekte auf einzelne SVG-Formen anwenden, um diese beim Herüberfahren mit der Maus hervorzuheben, farblich zu verändern oder zu vergrößern. Auch Animationen dank der „transition“-Eigenschaft sind auf diese Weise möglich.

Da das SVG-Format auch Verlinkungen erlaubt, kannst du Formen mit einem Verweis versehen und somit aus einzelnen Formen Links erstellen.

Darüber hinaus besteht auch die Möglichkeit, SVG-Elemente per JavaScript anzusprechen und zu manipulieren.

document.getElementsByTagName("rect")[0].setAttribute("width", "200");

Im Beispiel wird ein SVG-Rechteck per JavaScript manipuliert.

Geschwindigkeit

Ein letzter großer Unterschied zwischen HTML5-Canvas und SVG besteht in der Geschwindigkeit, was das Rendern und somit die Darstellung der Zeichnungen im Browser betrifft. Hier hat pauschal erst einmal kein Format die Nase vorn.

Gerade bei weniger komplexen Zeichnungen kannst du den Geschwindigkeitsunterschied vernachlässigen. Aber bei komplexen beziehungsweise großen Zeichnungen werden Unterschiede deutlich.

So wird bei zunehmender Anzahl von Objekten – sowohl einfache Formen als auch komplexe Pfade – das SVG-Format langsamer. Es braucht länger um die Zeichnung zu rendern und somit darzustellen. Das Canvas-Format schneidet hier deutlich besser ab. Je mehr Objekte eine Zeichnung hat, desto performanter verhält sich HTML5-Canvas gegenüber SVG.

Anders sieht es aus, wenn man die Größe der Fläche berücksichtigt. Das SVG-Format kommt mit großen Flächen deutlich besser zurecht und rendert Elemente darauf wesentlich schneller als das Canvas-Format.

Wer also großformatige Zeichnungen einsetzen will, die vielleicht sogar seitenfüllend sind, sollte auf das SVG-Format setzen. Wer hingegen besonders komplexe Elemente rendern muss – beispielsweise komplexe Diagramme –, sollte eher das Canvas-Format nutzen.

Pixelmanipulation

Da es sich nur bei HTML5-Canvas um ein pixelbasiertes Format handelt, kommt Pixelmanipulation beim SVG ohnehin selten in Frage. Allerdings gibt es auch beim SVG-Format die Möglichkeit, mit verschiedenen Filtern zum Beispiel die Farbe eines eingebundenen Bitmaps zu manipulieren.

Aber an sich bietet sich vor allem HTML5-Canvas zur Pixelmanipulation an. Denn das pixelbasierte Format macht es recht einfach möglich, jedes einzelne Pixel eines Bilder über eine entsprechende Funktion zu verändern.

Auf diese Weise lassen sich nicht nur statische Manipulationen realisieren, sondern auch animierte Effekte. Selbst die Echtzeitmanipulation von Videos ist mit HTML5-Canvas möglich.

So lässt sich die Farbe in einem Video – zum Beispiel per Greenscreen-Verfahren – dynamisch durch eine andere Farbe oder Hintergrundgrafik ersetzen. Dazu kannst du per JavaScript auf die Frames eines Videos zugreifen und in diesen beispielsweise eine Farbe durch ein anderes Bild ersetzen.

Fazit

Die genannten Beispiele zeigen, dass sowohl HTML5-Canvas als auch das SVG-Format jeweils ihre Vor- und Nachteile haben. Bei der Kombination verschiedener hier vorgestellter Möglichkeiten muss man sicher auch immer im Einzelfall abwägen, welches Format die bessere Wahl ist.

Aber grundsätzlich lässt sich Folgendes sagen: Wenn es um statische Zeichnungen geht, bei denen es vor allem auf Skalierbarkeit und die Darstellung auf großer Fläche ankommt, ist das SVG-Format die richtige Wahl.

Bei komplexen Darstellungen, die permanent neu berechnet werden müssen – Echtzeitdaten einer Wetterkarte oder ein Video zum Beispiel –, ist HTML5-Canvas performanter und daher vorzuziehen.

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
Design Illustrator Photoshop Webdesign

Variable Schriften: Einsatzbereit in Adobe und Chrome

Die Idee variabler Schriften gibt es schon länger. Statt mehrerer verschiedener Schriftschnitte sollten Strichstärke und Schriftweite einer Schrift zukünftig variabel in einer einzelnen Schriftdatei vereint werden. Mit der neuen Creative Cloud von Adobe und dem neuen Chrome von Google lassen sich variable Schriften nun auch in der Praxis anwenden.

Eine Schrift, aber beliebige Strichstärken und Schriftweiten

Bislang mussten unterschiedliche Strichstärken und Weiten einer Schrift in einzelne Schnitte aufgeteilt werden. Bei gut ausgebauten Schriften findet man Schnitte, deren Strichstärke von „thin“ bis „heavy“ geht. Dazu kommen Schnitte mit unterschiedlichen Schriftweiten wie „condensed“, „compressed“ oder „wide“. In Kombination entstehen nicht selten dutzende einzelne Schnitte pro Schrift – vor allem wenn man die kursiven Schnitte in verschiedenen Variationen auch noch dazu rechnet.

Bei den neuen variablen Schriften sind alle diese einzelnen Merkmale in einem einzelnen Schnitt vereint. Besser noch: Die Strichstärke und die Schriftweite können stufenlos angepasst werden. Bislang war man auf festgelegte Werte angewiesen. Mit variablen Schriften ist man wesentlich flexibler unterwegs und kann die Strichstärke passgenau für verschiedene Schriftgrößen anpassen.

Formal handelt es sich bei den neuen variablen Schriften um OpenType-Schriften der Version 1.8. Bei dem Format werden Eigenschaften für das Aussehen einer Schrift definiert – einschließlich der möglichen Strichstärken und Schriftweiten. Die jeweilige Darstellung der Schrift mit bestimmten Werten wird über die Anwendung – zum Beispiel Adobes Illustrator oder Googles Chrome – interpoliert.

Creative Cloud 2017 unterstützt variable Schriften

Dass es bislang kaum variable Schriften gibt, liegt natürlich auch daran, dass man sie bislang einfach nicht einsetzen konnte. Mit der neuen Version der Creative Cloud hingegen lassen sich die neuen Schriften endlich auch anwenden.

So unterstützen jetzt zum Beispiel Illustrator und Photoshop variable Schriften. Hat man eine solche Schrift ausgewählt, gibt es im „Zeichen“-Fenster ein zusätzliches Icon, welches ein Fenster mit drei Schieberegler öffnet. Dort kannst du dann die Stärke, Breite und Neigung der Schrift definieren.

Variable Schriften in Adobe Illustrator

Darüber hinaus besteht auch weiterhin die Möglichkeit, vordefinierte Schnitte wie “Bold Condensed Italic” auszuwählen, ohne die Einstellungen selbst vorzunehmen.

Natürlich liefert Adobe auch gleich erste variable Schriften mit. So sind die „Myriad“, „Minion“, „Acumin“, und „Source“ fortan als variable Schriften in der Creative Cloud enthalten.

Auch Chrome 62 unterstützt variable Schriften

Fast zeitgleich mit Adobe hat auch Google eine neue Version seines Browsers Chrome herausgebracht, der variable Schriften unterstützt. Denn variable Schriften lassen sich auch als Webfonts bereitstellen und in gewohnter Weise in ein Stylesheet einbinden.

So kannst du dir in Chrome 62 mit den bekannten CSS-Eigenschaften „font-weight“, „font-stretch“ und „font-style“ deinen eigenen Schnitt zusammenstellen, ohne per „@font-face“ mehrere Schriftdateien einbinden zu müssen.

h1 {
  font-family: "Source Sans Variable";
  font-size: 2em;
  font-weight: 700;
  font-stretch: 75;
}

Im Beispiel wird für ein „<h1>“-Element die Strichstärke auf 700 und die Schriftweite auf 75 gesetzt.

Die genannten CSS-Eigenschaften unterstützen allerdings nur gängige Werte. So kennt „font-weight“ neben den Schlüsselwörtern „normal“ und „bold“ auch Zahlen wie „100“ und “900”. Die Bandbreite der Möglichkeiten ist mitunter jedoch größer als die Werte, welche die Eigenschaften „font-weight“, „font-stretch“ und „font-style“ kennen.

Mit der der CSS-Eigenschaft „font-variation-settings“ hast du jedoch Zugriff auf alle Eigenschaften einer OpenType-Schrift. Je nach Schrift stehen dir also zusätzliche Werte zur Verfügung, welche die normalen „font-*“-Eigenschaften nicht unterstützen.

So definierst du zum Beispiel per „wght“ die Strichstärke und per „wdth“ die Schriftweite einer Schrift.

h1 {
  font-family: "Source Sans Variable";
  font-size: 2em;
  font-variation-settings: “wght” 700, “wdth” 75;
}

Das zweite Beispiel enthält die identischen Werte für die Stärke und Weite, allerdings über die „font-variation-settings“-Eigenschaft definiert.

Die Eigenschaft „font-variation-settings“ hat im Übrigen noch den Vorteil, dass sie animierbar ist. Zusammen mit der CSS-Eigenschaft „transition“ oder „animation“ lassen sich auf diese Weise auch schöne bewegliche Texteffekte realisieren.

Zur Hervorhebung eines Textes kann dann zum Beispiel die Strichstärke oder die Schriftweite per Animation verändert werden.

Wie variable Schriften im Einsatz aussehen, kannst du dir auf der Seite Axispraxis anschauen. Du wählst zwischen verschiedenen variablen Schriften aus und hast dann die Möglichkeit, anhand von Schiebereglern die Strichstärke und Schriftweite anzupassen.

Variable Schriften auf Axispraxis

Per JavaScript werden dabei die entsprechenden CSS-Eigenschaften dynamisch verändert.

Ein weiterer Vorteil variabler Schriften – vor allem im Webdesign – ist die geringere Dateigröße. Statt mehrere Schriftdateien ist fortan nur noch eine Datei nötig, in welcher die Schriftinformationen wesentlich kompakter untergebracht sind.

Weitere Browserunterstützung und Einsatzmöglichkeiten

Neben dem Chrome unterstützt auch Apples Safari bereits variable Schriften. Das ist insofern nicht verwunderlich, weil das neue Schriftformat von Adobe, Microsoft und Apple entwickelt wurde. Aber auch andere Browser werden in naher Zukunft nachziehen.

Neben Schriften lassen sich mit dem neuen Format im Übrigen auch Iconfonts realisieren, bei denen sich dann zum Beispiel die Strichstärke der Icons dynamisch anpassen lässt.

Das neue Format der variablen Schriften wird für Grafik- und Webdesigner also eine große Bereicherung sein.

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)

Kategorien
HTML/CSS

CSS3 für Designprofis: Vier Eigenschaften, die du kennen und nutzen solltest

Mit der Einführung von CSS3 haben sich die Gestaltungsmöglichkeiten für Websites sehr verändert. Vor allem Animationen und Transparenzen werden seitdem häufig eingesetzt. Doch es gibt auch eine Reihe von Eigenschaften, die nur selten Verwendung finden. Dabei ist mangelnde Browserunterstützung meist kein Grund mehr, auf diese Möglichkeiten zu verzichten. Vier solcher zu Unrecht vernachlässigter CSS3-Eigenschaften solltet ihr bei eurem nächsten Projekt daher unbedingt mal ausprobieren.

CSS3-Tipp 1: Individuelle Rahmen mit „border-image“

Die individuelle Gestaltung von Rahmen war in den Zeiten vor CSS3 faktisch gar nicht möglich. Zwar gab es eine Auswahl vordefinierter Rahmen – zum Beispiel einfache, doppelte und gepunktete –, aber sehr viel mehr war nicht machbar.

CSS3 für Designprofis: Vier Eigenschaften, die du kennen und nutzen solltest
Rahmengrafik

Mit der CSS3-Eigenschaft „border-image“ hingegen lassen sich Rahmen ganz individuell über eine Grafik gestalten. Dazu wird die Grafik in neun Bereiche eingeteilt. Die acht äußeren Bereiche stellen dabei den Rahmen beziehungsweise die Rahmenecken dar.

p {
  border: 30px solid transparent;
  border-image: url("rahmen.png") 30 round;
}

Das Beispiel zeigt, wie ein Rahmen definiert wird. Zunächst wird per “url()” die Webadresse der Grafik angegeben. Der zweite Wert definiert, wie die Grafik in ihre neun Bestandteile zerlegt werden soll. Im Normalfall sind alle neun Flächen gleich groß (also eine Drittelteilung). Du kannst aber auch andere absolute Werte in Pixel (ohne Angabe einer Einheit) oder prozentuale Werte (dann mit Prozentzeichen) angeben.

Der letzte Wert gibt an, ob die Linien einfach nur wiederholt (repeat“), wiederholt und dabei gerundet („round“), oder ob sie nicht wiederholt und dafür einfach auf die gesamte Breite beziehungsweise Höhe gezogen werden sollen („stretch“).

CSS3 für Designprofis: Vier Eigenschaften, die du kennen und nutzen solltest
Rahmen gerundet, einfach wiederholt und langgezogen

Die Breite des Rahmens wird nach wie vor per „border“ beziehungsweise „border-width“ definiert. Um den Standardrahmen zu verbergen, solltest du die Rahmenfarbe wie im Beispiel auf „transparent“ setzen.

„border-image“ wird von allen gängigen Browsern wie dem Internet Explorer, Chrome, Firefox und Safari unterstützt.

CSS3-Tipp 2: Nummerierung mit „counter-reset“ und „counter-increment“

Nummerierte Listen mit dem „<ol>“-Element sind seit jeher kein Problem. Schwieriger wird es jedoch, wenn man jenseits dieses Elementes zum Beispiel Überschriften innerhalb eines Dokumentes automatisch nummerieren möchte. Hier kommen die verschiedenen „counter“-Eigenschaften zum Einsatz.

CSS3 für Designprofis: Vier Eigenschaften, die du kennen und nutzen solltest
Nummerierte Überschrift

Zunächst definierst du einen Counter für dein Dokument, indem du der Eigenschaft „counter-reset“ einen beliebigen Namen vergibst. Diese Eigenschaft setzt den definierten Counter also wieder auf Anfang. Du kannst beliebig viele unabhängige Counter definieren.

body {
  counter-reset: kapitel;
}

Anschließend wählst du ein Element, auf welches du den Counter anwenden möchtest und weist ihm die Eigenschaft „counter-increment“ mit dem Counternamen zu. Über die Funktion „counter()“ kannst du anschließend per „::before“ oder „::after“ die Nummerierung ausgeben lassen.

h2::before {
  counter-increment: kapitel;
  content: "Kapitel " counter(kapitel) ": ";
}

„counter-reset“ und „counter-increment“ werden von allen gängigen Browsern unterstützt.

CSS3-Tipp 3: Bilder einpassen mit „object-fit“

Statische Webdesigns findet man immer seltener. Zunehmend sind Layouts responsiv oder fluid, sodass sich Elemente immer dem zur Verfügung stehenden Platz anpassen.

Bei Bildern ist dies immer ein wenig problematisch. Häufig werden sie bei unzureichendem Platz einfach herunterskaliert. Mit der Eigenschaft „object-fit“ gibt es jedoch verschiedene Möglichkeiten, wie du sie anpasst. Dazu definierst du zunächst eine Breite und Höhe für das Bild. Wenn diese ein abweichendes Seitenverhältnis besitzen, kommt „object-fit“ zum Einsatz.

CSS3 für Designprofis: Vier Eigenschaften, die du kennen und nutzen solltest
Bild ohne „object-fit“ (oben) und mit: „cover“ und „contain“

Mit dem Wert „cover“ sorgt die Eigenschaft dafür, dass das Bild immer sein Seitenverhältnis beibehält und die gesamte Fläche der „“-Elementes ausfüllt. Dabei werden allerdings rechts und links beziehungsweise oben und unten Bereiche abgeschnitten, damit das Bild die gesamte Fläche ausfüllen kann.

Alternativ besteht mit dem Wert „contain“ die Möglichkeit, das Bild so zu skalieren, dass bei Beibehaltung des Seitenverhältnisses immer das gesamte Bild sichtbar ist. Im Gegensatz zu „cover“ entstehen Ränder am linken und rechten beziehungsweise oberen und unteren Rand.

Bis auf den Internet Explorer unterstützen alle gängigen Browser diese Eigenschaft.

CSS3-Tipp 4: Texte beschneiden mit „text-overflow“

Nicht nur Bilder müssen bei besonders kleinen Auflösungen beschnitten werden. Manchmal sind auch Texte zu lang. Bei Fließtext ist dies in der Regel kein Problem. Dieser wird einfach umbrochen. Aber gerade bei Überschriften mit langen Wörtern oder Texten, die ausschließlich einzeilig dargestellt werden, kann es problematisch werden.

CSS3 für Designprofis: Vier Eigenschaften, die du kennen und nutzen solltest
Text ohne und mit „text-overflow“

Die CSS3-Eigenschaft „text-overflow“ verhindert, dass Texte einfach über den zur Verfügung stehenden Platz hinausragen, indem sie abgeschnitten und mit Auslassungspunkten versehen werden.

Die Eigenschaft funktioniert aber nicht alleine, sondern in Kombination mit der Eigenschaft „overflow“ und dem Wert „hidden“.

h2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Im Beispiel wird der Text eines „<h2>“-Elementes per „text-overflow“ beschnitten. Der Wert „ellipsis“ sorgt dafür, dass der beschnittene Text mit Auslassungspunkten versehen wird. Per „white-space“ wird zudem verhindert, dass der Text mehrzeilig wird.

Wird statt „ellipsis“ der Wert „clip“ verwendet, erfolgt die Beschneidung ohne Auslassungspunkte.

Alle gängigen Browser unterstützen diese Eigenschaft.

(do)