Hallo, wenn wir beginnen, Wir werden uns den Unterschied zwischen ansehen Responsives und adaptives Website-Design, sowie wie man Websites gestaltet die suchmaschinentauglich und optimiert sind. In dieser Lektion Wir werden das Konzept des responsiven Webdesigns untersuchen. Website-Designer und -Entwickler, haben eine enorme Herausforderung mit all den verschiedenen Arten, in denen Menschen auf Informationen zugreifen können. Von Computern mit großen Monitoren bis hin zu kleinen tragbaren IoT-Geräten, Designer müssen all diese Variationen berücksichtigen. Website-Designer und -Entwickler zwei Frameworks zur Auswahl: Responsive Design oder adaptives Design. Wir werden zuerst das Beispiel des responsiven Designs untersuchen, sowie die Vor- und Nachteile dieser Art von Design zu überprüfen. Wenn wir uns die Website von Knowledge City ansehen in einem normalen Browser, Wir können alle Elemente auf der Website sehen sind gut aufgestellt. Wenn ich jetzt die Größe des Browsers ändere, der Inhalt bewegt sich dynamisch an die neue Größe des Browsers anzupassen. Das ist responsives Webdesign. Mit der allgegenwärtigen Natur mobiler Geräte, Designer müssen eine Vielzahl von Bildschirmgrößen berücksichtigen. Responsive Websites zeigen Webinhalte an basierend auf dem verfügbaren Browser-Speicherplatz. Auf Mobilgeräten geschieht dies automatisch. Die Website sucht nach verfügbarem Speicherplatz und stellt den Inhalt entsprechend dar. Dies sorgt für ein nahtloses Erlebnis für den Endbenutzer, damit sie möglichst viel von Ihrer Website genießen können wie sie möchten. Schauen wir uns nun dieselbe Website an mit einem Simulator-Plug-in für mobile Geräte für Google Chrome und wie es basierend auf dem verfügbaren Browser-Speicherplatz gerendert wird. Ich werde den iPhone 11-Simulator wählen. Während wir uns durch die Site bewegen, werden die Komponenten dimensioniert entsprechend den verfügbaren Browserabmessungen. Wir können sehen, dass die Website angemessen gerendert wird, basierend auf der Größe des Geräts. Wenn wir ein anderes mobiles Gerät wählen, wie ein iPad Air 4, wir können sehen, dass sich die Seite wieder anpasst um den verfügbaren Browserspeicherplatz zu berücksichtigen. Und während wir uns durch die Seite bewegen, alle Elemente werden entsprechend angezeigt. Mit responsivem Webdesign, Die visuelle Hierarchie muss über alle Geräte hinweg beibehalten werden. Dies ist die Anordnung der Elemente um ihre Wichtigkeitsreihenfolge anzuzeigen. Zum Beispiel die Überschriften, Bilder und Links sind alle am gleichen Ort, egal welches Gerät verwendet wird. Einige Vorteile dieser Art von Webdesign sind: die einfache Gestaltung, der Zeitaufwand für die Implementierung ist deutlich geringer, und es ist heute die bevorzugte Methode für die Erstellung von Websites. Einige der Nachteile: Sie haben weniger Kontrolle über das Design in Bezug auf die Bildschirmgröße, und unterschiedliche Download-Geschwindigkeiten zwischen den Geräten kann sich auf Ihr Design auswirken da mobile Geräte möglicherweise langsamer herunterladen. Danke fürs zuschauen. Seien Sie gespannt auf die nächste Lektion wo wir uns mit adaptivem Webdesign befassen werden.