Responsive Webdesign – Grundlagen

Conditional Loading

Testen Sie unsere 1984 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Eine gute Strategie, um die Performance beim RWD zu verbessern ist das Conditional Loading: Inhalte werden auf kleinem Bildschirm nur nach Anforderung geladen.

Transkript

Bei kleinem Viewport steht weniger Platz zur Verfügung. Oft werden deswegen in diesen Situationen dann weniger wichtige Inhalte mit display: none ausgeblendet. Das ist jedoch ungünstig. Besser ist das Conditional Loading. Warum ist display: none an sich schlecht? Also, display: none ist ja ein CSS-Befehl, über den können Sie Elemente ausblenden, sodass sie nicht mehr sichtbar sind. Das hat jedoch zwei prinzipielle Nachteile. Erst einmal werden die Inhalte ja trotzdem geladen. Also, wenn Sie display: none auf ein Element anwenden, dann wird das Element trotzdem geladen. Also, ist das Performance technisch schon einmal ungünstig. Und der andere Nachteil ist, dass dadurch natürlich die Inhalte wirklich nicht erreichbar sind auf kleinen Bildschirmen. Das heißt, nehmen wir an, jemand verschickt einen Link, weil er die Kommentare interessant findet zu einem Produkt. Und die andere Person schaut das auf dem Smartphone an, wo eben die Kommentare gerade, weil sie nicht zentral sind, ausgeblendet sind. Dann versteht die natürlich nicht warum sie den Link überhaupt erhalten hat und kommt an die Information nicht dran. Besser ist das Conditional Loading. Schauen wir einmal an wie das funktioniert. Ich habe hier aufgerufen eine Demo-Seite von Brad Frost. Und da geht es um irgendwelche Produkte. Und zu diesen Produkten gibt es zusätzliche Informationen. Schauen wir hier mal bei viel Platz an wie das aussieht über ähnliche T-Shirts, also, ähnliche Produkte und hier sind die Besprechungen. Das ist natürlich eine Reihe von Informationen und bei kleinem Viewport wird das ein bisschen viel. Und was ist dann hier? Hier sehen Sie die ähnlichen T-Shirts werden erst einmal nicht angezeigt und auch die Besprechungen werden nicht angezeigt, sondern die kommen erst, wenn der Benutzer sie anfordert. Da muss er hier auf den Link klicken. Und genau das ist das Prinzip von Conditional Loading. Das heißt, es wird eben nur unter einer Bedingung geladen. Beim ersten Aufruf mit kleinem Viewport hingegen sind diese Inhalte noch nicht geladen, das heißt die Seite lädt schnell. Aber wenn der Benutzer es möchte, kann er an die Inhalte heran und damit haben wir natürlich zwei Vorteile auf einmal: Gute Performance und Platz sparend. Schauen wir uns einmal im Grundprinzip an wie dieses Conditional Loading funktioniert. Und ich habe hierfür ein kleines Beispiel vorbereitet. Das sieht jetzt so aus, dass hier irgendwelche Informationen da sind, die werden immer angezeigt. Und dann gibt es hier ein Element, wo ein Link da ist. Und bei großem Viewport werden die Informationen, die in dieser externen Datei stehen, direkt eingebunden und angezeigt. Bei kleinem Viewport sind sie hingegen erst einmal nicht da und man kriegt die Inhalte, nur wenn man auf den Link klickt. Schauen wir einmal an wie das hier im Browser aussieht und gehen wir hier einmal... Das ist jetzt erst einmal die Variante bei kleinen Screens. Sie sehen, hier sind die normalen Informationen, die Zusatzinfos sind erst einmal nicht da, sondern sie erscheinen erst, wenn man darauf klickt. Hier sind wir jetzt bei den Zusatzinfos. Wenn wir das Ganze jetzt hier beim großem Viewport anschauen und noch einmal aktualisieren, dann sehen Sie, die Zusatzinfos werden automatisch sofort eingeblendet. Für solche Sachen braucht man natürlich JavaScript. Wie funktioniert das im Prinzip? Gehen wir mal hierhin. Hier ist natürlich JavaScript involviert und ich setze hier auf jQuery. Das muss ich natürlich zuerst einmal einbinden. Hier frage ich den Viewport ab und im Beispiel, wenn der größer ist als 440 Pixel, dann lasse ich eine Funktion ausführen, die ich hier Laden genannt habe. In dieser Funktion werden zuerst einmal paar Variablen definiert. Zusatz verweist auf das Element mit der Klasse zusatz. Typisch für jQuery wieder die Auswahl, wie man es von CSS her kennt. Die Variable zusatzLink greift auf das darin befindliche A-Element zu. Und dann haben wir noch zusatzFragment. Das holt sich den bei href angegebenen Pfad. Jetzt fehlt nur noch der Ladevorgang an sich. Dafür erstellen wir ein neues div-Element und dafür rufen wir dann die Funktion Load auf, die kommt von jQuery. Und dieser Funktion übergeben wir den Pfad zum Dokument mit dem Identifier für den Ausschnitt. Dieses Content steht drinnen in diesem Dokument Zusatz.html, was wir uns gleich auch ansehen. Und wenn das geladen wurde, dann hänge ich das einfach an. Das ist jetzt hier eine sehr einfache Variante, die man natürlich noch verbessern könnte. Schauen wir uns aber erstmal das Dokument Zusatz.html an. Öffnen das einmal kurz. Dann sehen Sie hier, kommt dieses Content-Element her, auf das ich mich bei diesem Load hier beziehe, weil ich sage: ich möchte den Inhalt des Elements mit ID Content. Und durch diese Funktion lade ich bei großem Viewport die ganzen Inhalte direkt hier rein, sodass sie direkt im Dokument zu finden sind. Und bei kleinem Viewport hingegen ist es so, dass sie erstmal nicht geladen werden, sondern erst in dem Moment, wenn der Benutzer das anfordert, das heißt, auf den Link klickt. Sehen wir uns nochmal an was wir dadurch gewonnen haben. Bei großem Viewport hier, die ganzen Informationen sind direkt da. Bei kleinem Viewport... ich muss immer aktualisieren, weil das nicht abgefangen wird, dass es sich bei einer Änderung des Browser-Fensters automatisch ändert. ...sind die Informationen bei kleinem Viewport nicht da. Aber ich kann sie jederzeit anfordern. Das Beispiel lässt sich natürlich noch erweitern und verbessern. Man könnte natürlich überprüfen, ob die Inhalte nicht schon geladen sind. Das wäre sinnvoll, da können wir uns zum Beispiel das kennzeichnen durch eine bestimmte Klasse. Und wir haben derzeit auch einen Link auf die Zusatzinfos bei großem Viewport. Den könnte man natürlich deaktivieren mit JavaScript. Derzeit ist es so, dass wenn man bei kleinem Viewport auf diesen Link klickt, dass man dann zu einem weiteren Dokument kommt. Hier wäre es natürlich schöner, man würde das so verbessern, dass mit Ajax die Inhalte direkt in das Dokument geladen werden, so wie Sie es auch beim Beispiel von Brad Frost gesehen haben. Also, es gibt dann noch mehrere Verbesserungsmöglichkeiten. Aber mir wäre wichtig hier jetzt das Grundprinzip des Conditional Loadings zu zeigen. Wenn Sie sich für dieses Thema interessieren, dann sollten Sie sich hier auch einmal ansehen welcher Vorschlag dazu von der Filament Group kommt. Die beschreiben das Feature noch einmal und stellen dafür dann auch ein Script zur Verfügung, was man nutzen kann genau für dieses Conditional Loading. Conditional Loading ist ein wichtiges Grundprinzip. Es garantiert die Inhaltsgleichheit. Das heißt, alle Inhalte stehen allen zur Verfügung, unabhängig davon, mit welchen Geräten die Personen gerade unterwegs sind. Aber da die Inhalte bei kleinem Viewport erst auf Anforderung angezeigt werden, wird Platz gespart und die Performance ist geschont. Das ist die richtige Strategie für weniger essentielle Inhalte. Ein gutes Beispiel sind eben die ähnlichen Produkte oder die Kommentare, wie wir es hier auf der Webseite von Brad Frost gesehen haben. Man sollte aber trotzdem natürlich nicht jetzt beginnen alle unwichtigen Informationen auf eine Webseite auf diese Art zu integrieren. Man muss sich natürlich immer auch fragen, wenn die Informationen nicht so essentiell sind, ob es nicht auch sinnvoll sein könnte in Hinsicht einer Fokussierung, also, wirklich einer Konzentration auf das Wesentliche, die unwesentlichen Dinge gleich wegzulassen.

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...
 
Exklusiv für Abo-Kunden
Ihr(e) Trainer:
ISBN-Nummer:978-3-99032-060-0
Erscheinungsdatum:10.09.2013
Aktualisiert am:26.09.2016
Laufzeit:5 Std. 47 min (59 Videos)

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!