Responsive Webdesign – Grundlagen

Weitere Techniken für hochauflösende Displays

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Schrift skaliert besser als Bilder. Deswegen empfiehlt sich der Einsatz von UTF-8-Icons, Webfonts und IconFonts. Neben diesen Techniken gibt es auch JavaScript-Lösungen, die automatisch hochauflösende Dateien nachladen.

Transkript

Schrift skaliert prinzipiell besser als Bilder. Deswegen empfiehlt sich für hochauflösende Displays der Einsatz von UTF 8 Icons von Web fonts und Icon fonts. Neben diesen Techniken gibt es natürlich auch spezielle JavaScript-Lösungen, die automatisch hochauflösende Bilder zusätzlich laden. Beginnen wir mal mit den UTF 8 Icons. Bin hier auf der Demo-Seite vom Projekt von Brad Frost. Und Sie sehen hier so kleine Icons. Und wenn Sie sich dann im Code anschauen wie diese erstellt sind, so sieht man ganz deutlich: das sind jetzt keine Bilder oder sonst was, sondern es sind einfach UTF 8 Icons. UTF 8 beinhaltet nämlich nicht nur Zeichen aller möglichen Sprachen, sondern auch jede Menge an Symbolen. Wenn Sie zum Beispiel hier mal auf diese Seite gehen, hier sieht man schon den Stern, den wir gleich verwenden wollen, finden Sie auf dieser Seite viele viele Icons, die es direkt in UTF 8 gibt. Und wenn Ihnen da ein Icon gefällt, ein Symbol, dann können Sie draufklicken und erhalten zum einen den HTML-Code und erhalten auch zusätzlich den Code, den Sie brauchen, wenn Sie das per CSS einfügen wollen. Schauen wir uns das einmal praktisch an. Ich habe hier ein kleines Beispiel vorbereitet. Und Sie sehen, Sie können diesen Code für das Icon hier, UTF 8 Icon, direkt in den HTML-Code reinschreiben. Oder aber man kann natürlich das mit CSS einblenden lassen. Das habe ich mal hier in diesem Beispiel gemacht, über erzeugte Inhalte, dann gebe ich bei content an was da eingeblendet werden soll und hier über before sage ich, dass es am Anfang des Elementes geschehen soll. Wenn wir das dann hier einmal ansehen, dann sehen Sie, der Stern ist jetzt hier einmal rot und groß noch mit Schatten und hier ist einmal klein. Das ist diese Einblendung per CSS. Das Beispiel zeigt auch noch einen anderen Vorteil dieser UTF 8 Icons. Im Gegensatz zu normalen Icons, Sie können, weil das ja Schrift ist, die auch ganz leicht in der Größe verändern. Ich habe die hier auf 4 em gesetzt. Sie können die Farbe verändern, Sie können einen Schatten ergänzen. Das funktioniert alles und es ist ein großer großer Vorteil von diesen UTF 8 Symbolen, wenn sie die direkt einsetzten. Schriften sind heute natürlich mehr als die Standardschriften, die man früher hatte. Schriften heißt heute auch: man kann auf Web fonts zugreifen. Das sind diese herunterladbaren Schriften. Bin hier beispielsweise beim Dienst von Google, wo man das machen kann. Und da haben sie eine ganz große Anzahl von Schriften, die Sie verwenden können. Und diese skalieren natürlich wesentlich besser, als wenn Sie ein Bild erstellen würden mit so einem Text drauf. Wichtig ist natürlich bei der Nutzung von Web fonts, dass Sie trotzdem daran denken, diese Web fonts müssen heruntergeladen werden. Das heißt, die sollten Sie sparsam einsetzen. Sehr sinnvoll finde ich hier den Hinweis bei Google, wo einem immer angezeigt wird, ob da schon negative Konsequenzen für die Ladezeit hat oder nicht, wenn man sich so eine Kollektion mit mehreren Web fonts zusammenstellt. Web fonts sind das Eine. Dann gibt es noch die sogenannten Icon fonts. Das sind fonts, wie Web fonts auch, die bestehen aber nur aus Icons. Und da haben Sie natürlich noch eine viel größere Anzahl als es an schönen Symbolen als beispielsweise bei UTF 8. Ein schönes Beispiel für so ein Icon font ist der Font Awesome. Wenn Sie hier dann auch herunterladen können, hier sehen Sie so kleine Beispiele was es da alles gibt. Und ein Vorteil steht natürlich auch hier direkt da. Das ist perfekt für Retina Displays und andere hochauflösende Displays. In dem Download-Paket finden Sie alles was Sie dafür brauchen für den Einsatz. Wenn Sie Awesome oder andere Icon fonts einsetzen, sollten Sie sich mal den Dienst IcoMoon anschauen, weil der erlaubt Ihnen beispielsweise selbst solche Icon fonts zu erstellen oder auch so Subsets zu definieren. Weil es ja nicht sinnvoll ist, wenn man nur ein Paar kleiner Icons einsetzt, dass man dann den ganzen Web font nutzt und den verwendet, das heißt nämlich ja auch immer, dass die Leute den herunterladen müssen. Diese vorgestellten Lösungen sind allgemein schöne Lösungen, von denen alle Nutzer profitieren, weil sie sich auch positiv auf die Performance auswirken. Auf jeden Fall sind sie besser, als wenn man für diese Geschichten Bilder einsetzen würde. Es gibt natürlich für Retina-Displays und andere hochauflösende Displays noch andere Lösungen, die ein bisschen zweischneidig sind. Das ist der Dienst hier retina.js Was macht das? Das Ganze ist eine JavaScript-Datei, die muss man unten einbinden. Und was geschieht dann? Wenn Sie ein Bild auf das verweisen in Ihrem HTML-Code, dann schaut das Script, ob es von diesem Bild noch eine Variante gibt, die zusätzlich die Ergänzung hat @2x Und wenn es diese Variante gibt, dann wird die auf einem hochauflösendem Display heruntergeladen im Hintergrund per Ajax. Das bedeutet aber natürlich, dass auf einem hochauflösendem Display beide Bilder geladen werden. Also, erst das normale und dann das hochauflösende. Und da muss man einfach schauen, ob das wirklich passt und ob man das den Leuten zumuten möchte, weil es kann ja immer doch sein, dass jemand, der ein hochauflösendes Display hat, trotzdem unterwegs ist und keine gute Verbindung hat und der möchte natürlich einfach dann eine Seite, die schnell lädt.

Responsive Webdesign – Grundlagen

Lernen Sie die Hintergründe von Responsive Webdesign kennen und sehen Sie, wie sich über diese Technik Webinhalte auf den unterschiedlichsten Geräten gleichwertig anzeigen lassen.

5 Std. 47 min (59 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!