Denis Potschien

Bevor eine Website an die Öffentlichkeit geht, sollte man sie testen. Gerade bei responsivem Layout ist es wichtig, abzuklären, ob Bilder bei verschiedenen Browserauflösungen beziehungsweise auf Mobilgeräten richtig dargestellt werden. Wird die richtige Datei ausgegeben? Wie verhält sich das Laden von Bildern bei langsamer Internetverbindung? Satyr.io ist ein Dienst, der Dummy-Bilder erstellt, mit denen du deine Webprojekte in dieser Hinsicht einmal prüfen kannst.

Animierte Übergänge sind dank CSS3-Transitions mit wenig Aufwand möglich und werden mittlerweile ganz selbstverständlich eingesetzt. Dabei kannst du verschiedene Eigenschaften gleichzeitig verändern. Es gibt aber auch die Möglichkeit, die zu animierenden Eigenschaften zu unterschiedlichen Zeiten und mit unterschiedlicher Länge abzuspielen.

Unter Unsplash.com findet man alle zehn Tage jeweils zehn neue kostenlos verwendbare Fotos. Mit Unsplash.it kann man diese Fotos bequem und unkompliziert als Platzhalter in Webprojekten beziehungsweise für Entwürfe verwenden. Dabei lässt sich die Auflösung der Platzhalterfotos frei definieren. Außerdem sind weitere nützliche Funktionen vorhanden, die den Dienst interessant machen.

Während man in den Anfängen der Webfonts noch mehrere Dateiformate zur Verfügung stellen musste, hat sich das WOFF-Format mittlerweile zum Standard entwickelt, der von allen modernen Browsern unterstützt wird. Ältere Formate wie das EOT-Format braucht man nur noch, wenn man den Internet Explorer vor Version 9 unterstützen möchte. Nachdem das WOFF-Format im Jahr 2012 offizieller Standard wurde, gibt es mittlerweile mit WOFF 2.0 eine Weiterentwicklung, die vor allem über eine bessere Kompression verfügt und somit für kleinere Dateien sorgt.

Native Apps für Smartphones und Tablets sind nach wie vor beliebt, aber nicht immer notwendig. Vieles lässt sich als Webapplikation mit HTML5, CSS3 und JavaScript realisieren. Dank entsprechender JavaScript-APIs hat man beispielsweise Zugriff auf den Orientierungssensor und kann auch Gesten erkennen und entsprechend darauf reagieren. Mit dem WebApplication Manifest ist es zudem möglich, weitere klassische App-Eigenschaften für Webapplikationen zu übernehmen. Dazu gehört unter anderem das Bereitstellen spezieller Launcher-Icons oder eines gesonderten Launcher-Namens, der sich vom häufig langen Titel des HTML-Dokumentes unterscheiden kann.

Seit CSS3 sind Animationen in HTML-Dokumenten kein Problem mehr. Mit der „@keyframes“-Regel werden verschiedene Eigenschaften wie Position oder Größe eines HTML-Elementes definiert. Die dazugehörige „animation“-Eigenschaft sorgt dafür, dass die in den Keyframes festgelegten Eigenschaften in Bewegung geraten. Ganz ohne JavaScript und Plug-ins erstellen Sie so auch durchaus komplexe Animationen, die in allen modernen Browsern problemlos laufen. Problematisch wird es, wenn JavaScript ins Spiel kommen soll, um CSS3-Animationen zu erzeugen. Dabei ist JavaScript gerade für Animationen ein oft unverzichtbares Werkzeug. Denn manchmal müssen oder sollen einzelne Werte oder ganze Animationsabläufe errechnet werden.

Dank prozentualer Angaben ist es ein Leichtes, Webdesigns zu entwickeln, die sich der Breite und bei Bedarf auch der Höhe des Browserfensters anpassen. Gerade wenn es darum geht, eine Website für verschiedene Medien wie Tablets und Smartphones zu entwickeln, ist dies eine gängige Praxis. Textblöcke, Bilder und andere Elemente passen sich so automatisch jeder Größe an.