Kategorien
(Kostenlose) Services Design Essentials Freebies, Tools und Templates HTML/CSS Responsive Design

HTML5: Dekorative WebGL-Shader für jedermann mit pavoq

Bewegte Grafik auf Websites ist in. Dabei stehen dir verschiedene Methoden zur Verfügung. Der Marktplatz pavoq.com konzentriert sich auf WebGL als Werkzeug der Attraktivitätssteigerung. Schauen wir uns das mal genauer an.

Kategorien
Design HTML/CSS

CSS- und HTML-Vokabular: Wörterbücher für Anfänger und Vergessliche

Selbst als erfahrener Entwickler hat man nicht, wo man geht und steht, CSS-Vokabular vor Augen. Oder murmelst du etwa kontinuierlich CSS-Syntax vor dich hin? Sollte dem so sein, wundere dich nicht, wenn die Menschen beginnen, dich zu meiden. Hast du in letzter Zeit derlei Anzeichen bemerkt, weißt du ja jetzt, woran es liegen könnte. Schon gut, danke mir nicht.

Möglicherweise hilft dir das Projekt, das ich dir heute vorstellen möchte, den Anschein beginnenden Wahnsinns zu widerlegen. Also, anstelle CSS murmelnd durch die Straßen zu ziehen, bookmarke einfach das kleine Projekt „CSS Vokabular“ und mach den Kopf frei…

CSS Vocabulary: Not More To It
CSS Vokabular: Viel mehr gibt es nicht zu sehen

CSS Vokabular: Wissen, was was ist

Das kleine Helferlein namens CSS Vocabulary, das mit der Hilfe einiger engagierter Zeitgenossen inzwischen nicht nur in englischer, sondern auch in deutscher Sprache, sowie einigen weiteren, verfügbar ist, ist im Grunde komplett selbsterklärend. Es besteht aus nicht mehr als einem einzelnen Quelltext-Beispiel und und einer Sidebar mit Begriffen. Wählst du einen beliebigen Teil des Quelltextes per Klick aus, wird der dazu passende Begriff in der Sidebar farblich hervorgehoben.

Umgekehrt funktioniert es genau so. Klickst du auf einen Begriff in der Sidebar, werden die dazu passenden Code-Teile im Quelltext-Beispiel farblich hervor gehoben. Mehr gibt es nicht zu sehen.

CSS Vocabulary: Code Example
CSS Vocabulary: das Quelltext-Beispiel

Klar, CSS Vocabulary bringt dir nicht wirklich CSS bei. Aber, wenn es dir wenigstens manchmal so geht wie mir, dann wirst du an dir selbst bemerkt haben, dass die genauen Begrifflichkeiten im Kopf nicht immer sicher abrufbar sind. Das ist besonders dann ungünstig, wenn du gerade einen Text über CSS schreibst. Du weißt genau, was du schreiben wolltest, aber wie hieß jetzt dieser verflixte Begriff noch gleich genau? Mir passiert das auch gerne, wenn ich einen Style Guide dokumentiere. Da freue ich mich über eine schnelle unkomplizierte Nachschlagemöglichkeit wie CSS Vocabulary.

CSS Vocabulary: Sidebar
CSS Vocabulary: Sidebar

CSS Vocabulary ist ein Projekt der Finnen Ville Vanninen, Pasi Jokinen und Timo Moilanen, das inzwischen in einem größeren Projekt namens Vocabs aufgegangen ist. Neben CSS findest du auf Vocabs einen in gleicher Weise aufbereiteten Wortschatz für HTML, eben das HTML Vocabulary.

Vocabs kann völlig frei unter einer MIT-Lizenz genutzt werden und ist zuhause bei Workflower.fi. 

(Der Beitrag erschien zuerst im Sommer 2014 und wird seitdem aktuell gehalten. Das letzte Update erfolgte im April 2019.)

Beitragsbild: MikesPhotos auf Pixabay

Kategorien
Design HTML/CSS Webdesign

Natives Lazy-Loading kommt in Chrome

Ab der Version 75 wird Chrome das sogenannte “Lazy-Loading” nativ unterstützen. Das kündigt Addy Osmani, einer der führenden Entwickler hinter dem Browser in seinem Blog an. Aktuell ist allerdings noch die Version 73.

Damit wird Chrome voraussichtlich ab Juni 2019 das nachrangige Laden von Bildern und iFrames unterstützen, die einen bestimmten HTML-Tag zugeordnet bekommen haben, nämlich:

<img src="mein-suesser-spatzfratz.jpg" loading="lazy" alt="..." />

Dabei zeigt loading="lazy" dem Browser an, dass dieses Bild nachrangig geladen werden kann. Es lohnt sich also, fortan diesen Wert für alle Bilder auf einer Seite hinzuzufügen.

Es wird sich sicher auch eine Entwicklerin finden, welche dafür eine WordPress-Plugin erstellt, so dass dieser Vorgang rückwirkend und für alle bereits bestehenden Bilder per einmaligem Knopfdruck vorgenommen werden kann. Sobald wir da fündig werden, werden wir den Namen dieses Plugins nachliefern. Falls ihr schon fündig geworden sein solltet, könnt ihr das auch gerne in den Kommentaren bekunden!

Dasselbe Prinzip des loading="lazy" wird auch für die iFrames dieser Welt gelten, sodass die HTML-Tags wie folgt aussehen sollten:

<iframe src="https://www.youtube.com/embed/einhuebschesvideo" loading="lazy"></iframe>

Nun, wozu das Ganze eigentlich?

Eine Vielzahl von Webseiten enthalten oft eine hohe Anzahl von Bildern, welche oftmals noch nicht einmal für die Darstellung am Bildschirm optimiert sind. Das führt dazu, dass alle Bilder zusammengenommen meist mehr Ladevolumen und -zeit beanspruchen als die eigentlichen textbasierten Inhalte. Wir schrieben unter anderem diesen Beitrag dazu.

Die Crux des Ganzen ist dabei, dass viele dieser Bilder sich nicht im sichtbaren Bereich des Bildschirms befinden, sondern oft erst im weiteren Bildlauf zu sehen sind, sobald man also nach unten scrollt.

Von daher müssten diese zunächst nicht sichtbaren Bilder anfangs gar nicht erst geladen werden, solange sie nicht zu sehen sind. Die Bilder zu laden, kurz bevor sie in den sichtbaren Bildschirmbereich kommen, würde völlig genügen.

Diese Problem soll nun mit der Einführung des Tags und Attributs loading="lazy" behoben werden.

Bisher ist es gängige Praxis, extra ein JavaScript zu laden, nur um die Auswirkungen von Offscreen-Bildern auf die Seitenladezeiten zu begrenzen, und um den Abruf dieser Bilder solange zu verzögern, bis die Nutzer in die Nähe der zu ladenden Bilder kommen.

Addy Osmani zeigt in seiner Ankündigung sehr gut auf, welchen Effekt die Benutzung des Lazy-Loadings auf die Seitenladezeit haben kann.

Eine Visualisierung von der Ladezeit einer Seite mit 211 Bildern.
Eine Visualisierung von der Ladezeit einer Seite mit 211 Bildern. Die Lazy-Loading-Version lädt nur 250 KB beim initialen Ladevorgang. Andere Bilder werden erst dann abgerufen, wenn die Benutzer weiter nach unten scrollen.

Folglich kann das nativ-verzögerte Laden dazu beitragen, dass alle Inhalte, welche sich oben im sichtbaren Bereich befinden, deutlich schneller angezeigt werden. Sowohl die Gesamtladezeit als auch das Ladevolumen einer Website werden dadurch erheblich reduziert.

Damit die Bilder (und Videos) aber nicht erst geladen werden, wenn sie sich bereits im sichtbaren Bereich befinden, eine Sache die eher als störend empfunden wird, werden die mit dem loading="lazy" Tag versehenen Bilder bereits im Hintergrund geladen, bevor sie in den sichtbaren Bereich kommen. Somit bleibt der Gesamteindruck einer Seite auch in dieser Hinsicht ungetrübt.

Welche Bild-Tags werden unterstützt?

Für Entwickler ist es wichtig zu wissen, dass nicht nur die ordinären <img> und <iframe> Tags unterstützt werden, sondern auch die responsiven Bildformate à la <srcset> und <picture>.

Zum Abschluss noch eine Liste mit Beispielen:

<!-- Hier das Standard-Schnipsel, welches das Bild erst dann lädt, wenn die Nutzer in die Nähe des Bildes scrollen: -->

<img src="mein-suesser-spatzfratz.jpg" loading="lazy" alt="Eine süße Katz hat eine süße Fratz und zeigt dem Spatz ihre Tatz"/>

<!-- Hier das responsive <picture> Bildformat, dass meist nur von versierten Entwicklern eingesetzt wird. Der <img> im Beispiel wird dabei nur für ältere Browser, die mit den neuen responsiven Bildformaten nichts anfangen können, beibehalten. -->
<picture>
  <source media="(min-width: 40em)" srcset="ein-grosses-bild.jpg 1x, ein-grosses-bild-in-hd.jpg 2x">
  <source srcset="ein-kleines-bild.jpg 1x, ein-kleines-bild-in-hd.jpg 2x">
  <img src="das-bild-für-alte-browser.jpg" loading="lazy">
</picture>

<!-- Hier das Beispiel mit dem srcset Format, bei welchem nur die Bildgröße spezifiziert wird -->
<img src="small.jpg"
     srcset="ein-grosses-bild.jpg 1024w, ein-mittelgrosses-bild.jpg 640w, ein-kleines-bild.jpg 320w"
     sizes="(min-width: 36em) 33.3vw, 100vw"
     alt="Mein süsser Spatzfratz" loading="lazy">

<!-- Hier ein Beispiel für ein iFrame. Das kann z.B. eine Karte von Google Maps oder ein eingebettetes Video sein -->
<iframe src="video-player.html" loading="lazy"></iframe>

Zu guter Letzt sei noch gesagt, dass Browser, die den loading="lazy" Tag nicht unterstützen, diesen einfach ignorieren. Das ist das Schöne an HTML: Nicht unterstützte Attribute werden einfach ignoriert und tun keinem weh.

Probieren geht über Studieren

Wer das neue Feature schon heute probieren möchte, kann dies tun, indem er/sie chrome://flags in die URL-Leiste eingibt, und dann “Enable lazy frame loading” sowie “Enable lazy image loading” aktiviert. Danach gilt es noch, den Chrome-Browser neu zu starten und los geht es.

Als weiterführenden Artikel und für mehr Details dazu, wie die Implementierung im Detail erfolgt, lohnt es sich, Addy Osmanis Beitrag zu lesen.

Beitragsbild: Depositphotos

Kategorien
Design HTML/CSS

HTML5: Videos untertiteln mit dem Track-Element

Seit der Einführung der HTML5-Videos ist das Abspielen von Videos ganz ohne Plug-ins möglich. Doch HTML5-Videos bieten weit mehr, als Videos nativ im Browser darzustellen. Mit der Track-Funktion lassen sich sogar Untertitel innerhalb von Videos einblenden. Diese werden in seiner separaten Textdatei abgelegt und können per Knopfdruck im Video ausgegeben werden. So machst du Videos für Hörgeschädigte und alle, die gerade keine Lautsprecher zur Verfügung haben, zugänglich.

Kategorien
Design HTML/CSS JavaScript & jQuery Programmierung Webdesign

HTML5-APIs im Einsatz: So misst du Geschwindigkeiten mit User Timing und Navigation Timing

Gerade komplexe Webanwendungen setzen der Rechenleistung des Clients häufig zu. Vor allem auf mobilen Geräten ist es wichtig, besondere Vorsorge dafür zu treffen, dass alles flott läuft. Mit der neuen User-Timing-API können Ladezeiten einfach und vor allem präzise per JavaScript getestet werden. Denn die Messwerte beziehen ihre Werte der High-Resolution-Time-API, welche Zeiten auf die Mikrosekunde genau messen kann. Mit der Navigation-Timing-API ist es zudem möglich, Ladezeiten einer Website anhand vordefinierter Messpunkte zu ermitteln. Dank der komplexen und teils präzisen Messmöglichkeiten können Entwickler gut feststellen, an welchen Stellen innerhalb einer Anwendung es hakt.

Kategorien
Apps Bilder & Vektorgrafiken bearbeiten Design Freebies, Tools und Templates HTML/CSS Icons & Fonts Plugins Programmierung Responsive Design

SVG für alle: Icons, Tools und andere Ressourcen

Im Rahmen des Siegeszugs mobiler Geräte entwickelt sich kontinuierlich neue Technologie für die schönere Gestaltung von Webseiten und Apps. Eine dieser fantastischen mobilen Technologien ist SVG, die Scalable Vector Graphics. SVG erweitert das Konzept von Vektoren über das Niveau von bloßen skalierbaren Bildern hinaus. Tatsächlich ist ein SVG eigentlich XML-basiert, was heißt, dass ein SVG und seine Verhaltensweisen in Sachen Interaktion und Animation mittels CSS und/oder Javascript definierbar sind.

Kategorien
Design HTML/CSS

SVG & CSS: Was geht, was nicht in der Gestaltung per Stylesheet

SVG hat sich als Format für Vektorgrafiken im Browser etabliert. Grafikprogramme wie Adobes Illustrator unterstützen das Speichern in diesem Format und moderne Browser können sie problemlos darstellen. Da SVG-Grafiken wie auch HTML-Dokumente über eine Auszeichnungssprache erstellt werden, ist die Erstellung und Bearbeitung per Texteditor möglich. Für die Gestaltung von SVG-Grafiken kann man zudem auf Stylesheets zurückgreifen. Was den Einsatz von CSS betrifft, gibt es neben vielen Gemeinsamkeiten zu HTML jedoch auch einige Unterschiede zu beachten.

Kategorien
Design HTML/CSS

HTML5: Wie das Template-Element komplexe Vorlagen ermöglicht

Zwar gibt es mit document.createElement() und anderen entsprechenden Methoden eine Möglichkeit, um per JavaScript HTML-Elemente zu erzeugen und dem DOM-Baum hinzuzufügen – komfortabel und übersichtlich ist das jedoch in der Regel nicht. Gerade ab einer gewissen Komplexität der zu erstellenden Elemente kann man schon mal den Überblick verlieren. Das HTML5-Template-Element soll für Abhilfe sorgen.

Kategorien
HTML/CSS

Gewusst wo: Wissensquellen zu HTML und CSS

Die beiden Auszeichnungssprachen HTML und CSS sind unverzichtbar für das World Wide Web und jede Website. Auch wenn du mit Anwendungen wie Dreamweaver arbeitest, kommst du ohne Kenntnisse in diesen Sprachen nicht sehr weit. Aber natürlich musst du nicht jedes Element und jede Eigenschaft kennen. Du solltest nur wissen, wo du dich schlau machen kannst. Daher haben wir hier ein paar nützliche Wissensquellen zu HTML und CSS für dich.

Kategorien
Design HTML/CSS

HTML5: Moderne Layouts mit CSS-Grids

Als es noch kein CSS und keine Trennung zwischen Inhalt und Gestaltung einer Website gab, war es üblich, Weblayouts als Tabelle zu gestalten. Mit der steigenden Bedeutung einer semantischen HTML-Auszeichnung waren Tabellen fortan nur noch für die Auszeichnung von Inhalten gedacht, die auch tatsächlich tabellarisch dargestellt werden sollen.

Kategorien
Design HTML/CSS

CSS3: So einfach hübscht du deine Tabellen auf (2/2)

Egal ob Umsatzzahlen, Marktanalysen oder Bundesliga-Ergebnisse: Tabellen sind auch im Internet gefragt. Allerdings lassen sie sich dort lange nicht so schön gestalten, wie das mit Illustrator oder  Excel und Co. möglich ist. Mit CSS3 kannst du deine Tabellen nun aber auch im Internet grafisch ansprechend aufbereiten. Im heutigen Teil 2 des Beitrags zur Tabellenaufhübschung mit CSS3 erläutere ich, wie du Spalten aufpeppen und bestimmten Zeilen automatisch ein anderes Aussehen gibst als dem Rest der Tabelle.

Kategorien
Design HTML/CSS

CSS3: So einfach hübscht du deine Tabellen auf (1/2)

Auch wenn Tabellen als Layout fürs Webdesign dank CSS passé sind, gibt es nach wie vor jede Menge Inhalte, deren Präsentation im Internet einer Tabelle bedarf. Seien es Preislisten im Online-Shop, Tarife für Flüge oder Hotelbuchungen oder Ergebnisse von Sportvereinen. Wie du solche Tabellen mit CSS3 ansprechend und dynamisch gestaltest, zeige ich dir in einem zweiteiligen Tutorial, dessen ersten Teil du gerade liest.

Kategorien
Design HTML/CSS

CSS-Transitions: Timing ist alles

Mit CSS3 kannst du Animationen ohne Flash und Javascript erstellen. Dabei beeinflusst du den zeitlichen Ablauf deiner Animation recht komfortabel. Unter Verwendung der Eigenschaft „transition-timing-function“ definierst du unterschiedliche Abläufe – mit und ohne Beschleunigung.

Beschleunigen und abbremsen

Neben der Einstellung „linear“, bei der eine Animation kontinuierlich dieselbe Geschwindigkeit hat, lassen sich Animationen auf unterschiedliche Weise beschleunigen und abbremsen. Die Standardeinstellung für eine Animation ist „ease“. Sie sorgt für einen langsamen Start der Animation mit Beschleunigung zur Mitte und anschließendem Abbremsen zum Ende hin.

Neben der einfachen „ease“-Beschleunigung gibt es weitere Varianten. Der Wert „ease-in“ sorgt für einen langsamen Start der Animation, die dann linear fortgesetzt wird. Bei „ease-out“ wird die Animation linear gestartet, am Ende erfolgt ein Abbremsen der Animation.

Zu guter Letzt sorgt der Wert „ease-in-out“ für einen langsamen Start mit nachfolgender Beschleunigung und Abbremsen am Ende der Animation.

Individueller Ablauf

Statt auf vorgegebene Abläufe mit den genannten „ease“-Werten zurückzugreifen, kannst du Animationsabläufe auch individuell festlegen. Hierzu dient die Einstellung „cubic-bezier“. Wie der Name zutreffend vermuten lässt, wird hierbei eine Bézierkurve angegeben, die den zeitlichen Ablauf der Animation definiert. Eine Bézierkurve definierst du über verschieden viele Punkte. Die kubische Bezierkurve, die hier verwendet wird, habe ich über vier Punkte definiert.


Bezíerkurven aller vorgegebenen Werte für die Timing Function

Der erste Punkt P0 gibt die Startposition der Kurve an. Die Richtung, die die Kurve einschlägt, wird  mit dem zweiten Punkt P1 definiert. Der dritte Punkt P2 gibt die zweite Richtung der Kurve an, die schließlich im vierten Punkt P3 mündet. Zur Definition einer Bézierkurve für den Animationsablauf werden lediglich die beiden Richtungen angegeben. Der Startpunkt liegt immer bei 0/0 und der Endpunkt immer bei 1/1.


Vier Punkte einer kubischen Bézierkurve

Einen individuellen Ablauf definierst du beispielsweise so:

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

Die resultierende Kurve entspricht dem Verhalten des Wertes „ease“.  Angegeben sind die Werte für P1 (0,25/0,1) sowie für P2 (0,25/1).

Der Wert „ease-in-out“ stellt sich als Bézierkurve wie folgt dar:

transition-timing-function: cubic-bezier(0.42, 0.1, 0.58, 1);

Mit „cubic-bezier“ lassen sich also ganz unterschiedliche Beschleunigungs- und Abbremsverhalten festlegen. Mit der „Maximaleinstellung“ für eine kubische Bézierkurve erhältst du eine Animation, die nach dem Start stark abbremst, sich linear weiterbewegt und anschließend zum Ende stark beschleunigt:

transition-timing-function: cubic-bezier(0, 1, 1, 0);


Individuelle Bézierkurve

Derzeit unterstützen alle Browser mit Ausnahme des Internet Explorer CSS-Transitions und auch die Eigenschaft „transition-timing-function“.

Fazit: Gerade das individuelle Anlegen von Bézierkurven für Animationsabläufe ist eine schöne Sache, um jenseits der Standardwerte eigene Vorstellungen zu verwirklichen. Dabei ist die Verwendung relativ einfach.

(Artikelbild: Depositphotos)

Kategorien
Bilder & Vektorgrafiken bearbeiten Design HTML/CSS Webdesign

SVG: So verwendest du es richtig

Das SVG-Format hat sich in vielerlei Hinsicht zu einer zeitgemäßen Alternative zu Flash entwickelt. Denn es ist nicht nur vektorbasiert, sondern ermöglicht auch Animationen und Interaktionen. Aufgrund der unterschiedlichen Möglichkeiten, Animationen zu erstellen und SVGs in ein Webprojekt einzubinden, solltest du folgende Tipps beachten, damit auch alles so funktioniert, wie es soll.

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 E-Business Essentials Freebies, Tools und Templates Freelance HTML/CSS

Pro und Contra: Design mit fertigen Templates

“Echte” Designer schlagen schon die Hände über dem Kopf zusammen, wenn einer bloß das Wort “Template” oder “Theme” in den Mund nimmt. Schauen wir uns das Ganze mal objektiver an.