Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Responsive Webdesign – Grundlagen

Schöne Effekte für Überschriften und Co.

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
SlabText und FitText sind zwei jQuery-Plug-ins, geeignet für fette Überschriften, die sich stets an die jeweilige Umgebung anpassen.

Transkript

Wenn Sie auf der Suche nach schönen Effekten für Überschriften im Responsive Web Design sind, dann sollten Sie einmal die beiden jQuery Plugins FitText und SlabText anschauen. Ich habe hier die Seite von FitText einmal aufgerufen. Und wenn Sie die Größe verändern, dann sehen Sie: die Überschrift passt sich immer an. Das könnte man natürlich auch über die Einheit 'vw' direkt machen, die eine neue Einheit in CSS 3 ist. Das funktioniert aber nicht browserübergreifend und FitText funktioniert browserübergreifend. Wie geht das Ganze, wenn man es einsetzen möchte? Sie finden hier den Link natürlich, wo Sie die Datei herunterladen können. Und das was man braucht ist eine jQuery-Datei. Sehen wir uns einmal an, wie das Ganze funktioniert. Wie bei allen jQuery Plugins müssen Sie zuerst einmal immer bevor Sie das Plugin einbinden können, jQuery selber einbinden. Das habe ich hier einmal gemacht. Und dann können Sie den Verweis auf das Plugin machen. Im Beispiel befindet sich das im selben Verzeichnis. Und was dann noch fehlt, ist dass Sie das Plugin starten. Und dafür müssen Sie erstmal das Element auswählen, das mit diesem Plugin bearbeitet werden soll. Im Beispiel habe ich hier zwei Überschriften, denen ich eindeutige IDs gegeben habe. Und die kann ich in jQuery, so wie in CSS gewohnt, einfach mit einem Selektor ansprechen mit dem Doppelkreuz, weil es eine ID ist. Und dann kann ich das Plugin starten mit FitText. Im zweiten Fall sehen Sie, dass ich noch ein bisschen zusätzliche Optionen angegeben habe. Ich kann zum Beispiel eine minimale und eine maximale Schrift et cetera, festlegen. Und dann sieht das hier aus folgendermaßen. Genau, und Sie sehen hier unterschiedlich... die zweite Überschrift passt sich nicht soweit an, wie die andere, weil ich eben eine minimale und eine maximale Schriftgröße festgelegt habe. Ein weiteres schönes Plugin ist SlabText. Nehme ich mal die Seite des Plugins und Sie sehen: das dauert immer einen kleinen Moment, dann springt das um. Das macht mehr, als nur die Schrift einfach so anzupassen, weil es hier auch so eine schöne Aufteilung bewirkt, dass wir hier so einen Blocksatz haben und da wird eben auch die Schriftgröße unterschiedlich und sie wird mehrzeilig angeordnet. Ist natürlich auch nett für bestimmte Effekte, wenn das passt. Schauen wir uns auch einmal an, wie das hier funktioniert. Es gibt natürlich wieder eine Seite, wo man das herunterladen kann. Und auf der Seite des Plugins selber wird auch beschrieben wie das Ganze funktioniert. Ich habe das jetzt schon vorbereitet, hier in dieser Datei. Es ist wieder ein jQuery Plugin. Das heißt, der erste Schritt ist genauso wie eben auch. Wir müssen erstmal jQuery einbinden. Dann müssen wir die JavaScript-Datei, also die jQuery Plugin-Datei selber einbinden, das SlabText. Und dann rufen wir das Ganze hier auf. Und ich lasse es hier einmal anwenden auf alle h1-Überschriften. Und wir sollten hier auch noch so eine Verzögerung einbauen, das stammt von der Beispielseite. Und wenn wir das hier dann ausführen, hier im Firefox, dann sehen Sie: dies ist dieser Text hier, der dann immer sich so anpasst. Genau, es dauert immer einen kleinen Moment, genau. FitText und SlabText sind schöne Überschrifteneffekte. Anstelle von FitText kann man natürlich für neuere Browser auch zur Einheit vw greifen. Wichtig ist aber immer wenn Sie das dann im echten Einsatz haben, dass Sie sich auch genau anschauen, wie es auf dem Smartphone und einem kleinerem Viewport aussieht, damit dort einfach nicht zu viel kostbarer Platz besetzt wird.

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!