Außerdem: Animationen im Responsive Webdesign

Fast Forward Spezial: Responsive Images, Google Fonts & One-Page-Webdesign
Kommentare

Weiter geht’s im Fast Forward Spezial, heute mit dem Thema Webdesign. Wir haben insgesamt fünf Artikel zusammengetragen, die von Grundlagen zu Detailfragen alle Ebenen der Webseitengestaltung abdecken. Wir starten bei Responsive Images, sprechen Google Fonts an und versuchen, Animationen per Style-Sheet unter Kontrolle zu bringen. Abschließend kann man sich über die Grundsätze des One-Page-Webdesigns sowie Animationen im Responsive Webdesign informieren.

Responsive Images mit <srcset>, <sizes> und <picture>

An Responsive Design ist heutzutage kein Vorbeikommen mehr. Bei Bildern ist es allerdings nicht immer einfach, sie auf optisch geschickte und dateneffiziente Weise einzubinden, d.h. die beste Form der Bilder für das jeweilige Device zu finden. Wie Saurabh Kirtani darlegt, muss dabei besonders auf folgende Parameter geachten werden: physikalische Bildschirmgröße, die Auflösung des Geräts und Browserunterstützung für verschiedene Image-Formate. In seinem sehr empfehlenswerten und detaillierten Text führt er weiter aus, wie Responsive Images mit dem srcset-Attribut, dem sizes-Attribut sowie dem picture-Element implementiert werden können.

Tipps und Tricks für Google Fonts

Roboto, Lato, Raleway: Mehr als 700 Schriftsätze stehen Entwicklern über die Google Fonts zur Verfügung. Ihre Verwendung ist grundsätzlich schon ziemlich einfach, mit ein paar kleinen Tricks lässt sich jedoch noch mehr herausholen. So können beispielsweise mehrere Fonts auf einmal geladen werden; auch die Eingrenzung auf die gerade benötigten Teile einer Schriftart ist möglich. Was viele außerdem nicht wissen: Sogar Effekte sind mit Google Fonts umsetzbar!

Fast Forward Spezial im Überblick

Alle Beiträge aus unserer Reihe Fast Forward Spezial finden Sie hier.

Kohärentes Webdesign mit Animationen dank Style Guide

Der ein oder andere wird sich noch an die herrlich mit Gifs überfrachteten Homepages – meist von Privatleuten – aus der Anfangszeit des Internets erinnern. Auch wenn man heute gelernt hat, vorsichtiger mit Animationen umzugehen, sind sie weiterhin ein mitunter heikles ästhetisches Element, das mit einem Fingerstreich das Designkonzept einer Webseite zerschießen kann. Donovan Hutchinson zeigt, wie man mit Style Sheets den Einsatz von Animationen regulieren kann und dabei am günstigsten vorgeht. In seinem lesenswerten Artikel schildert er einige der möglichen Herangehensweisen beim Aufbau eines Style Guides und gibt hilfreiche Link- sowie Praxistipps für den fortlaufenden Betrieb.

One-Page-Website-Design

War in den 2000ern noch das klassische Drei-Spalten-Layout der Renner, hat in den letzten fünf Jahren das One-Page-Design den Siegeszug angetreten. Portale wie Squarespace oder One Page Love versammeln die Möglichkeiten dieser Webdesign-Spielart. Doch wieso ist das One-Page-Website-Design so beliebt? Gabrielle Gosha zeigt in ihrem Artikel die Grundsätze dieses Designs und gibt Tipps zum Erstellen von Webseiten mit One-Page Design.

Animationen im Responsive Webdesign

Wer auf Responsive Designs setzt, muss nicht notwendigerweise auf Animationen verzichten. Warum sich die beiden Kategorien nicht gegenseitig ausschließen, erklärt Val Head in ihrem Artikel. Sie stellt drei unterschiedliche Techniken vor, die dabei helfen, im Bereich der responsiven Gestaltung mit Animationen kreativ zu arbeiten. Auf diese Weise können Designer ihren Projekten den letzten Schliff geben, um sich von der Konkurrenz abzusetzen.

Aufmacherbild: Set of clean vector black modern devices for responsive layout (modifziert) von Shutterstock / Urheberrecht: Filip Dokladal

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -