Responsive Webdesign
Was bedeutet responsive?
Responsive Webdesign bedeutet, dass die Webseite oder der Shop gestalterisch und technisch so aufgebaut ist, dass diese auf die Eigenschaften des jeweils benutzten Endgeräts - Desktop-PC, Tabletcomputer oder Smartphones - reagieren kann. Hierfür bedient man sich verschiedener Klassen des genutzten Frameworks - in unserem Fall Bootstrap. In der Grafik sehen Sie übersichtlich dargestellt die verschiedenen Endgerätgrößen, deren maximale Anzeigebreite und die zugehörigen CSS-Klassen.
Was kann ich damit anstellen?
Nehmen wir an, dass Sie eine neue Contentseite mit Informationen in Form von Text und Bildern befüllen möchten. Generell ist das kein Problem, aber was ist wenn Ihre Grafik für die Anzeige auf einem Tablet oder einem Smartphone viel zu detailreich und nicht mehr gut erkennbar ist? In diesem Fall können Sie die unten abgebildeten Klassen nutzen, um eine Contentseite für verschiedene Responsivegrößen speziell aufzubauen. So haben Sie die Möglichkeit detailreiche Bilder ausschließlich für große Endgeräte anzugeben und für die kleineren andere Bilddateien zu nutzen.
Beispiele
Im Folgenden finden Sie ein Beispiel für die Contentpflege bei Shopseiten. Im System3 wurde die Seite bereits im HTML-Code mit CSS-Klassen versehen, um für die unterschiedlichen Endgerätegrößen eine bestimmte Darstellung für den anzuzeigenden Content vorzugeben. Genau genommen befindet sich das folgende Beispiel zwei Mal in der Contentseite, Beispiel 1 mit Einschränkung auf Desktop und Tablet und Beispiel 2 mit Einschränkung auf Smartphones.
Beispiel 1:
Grafik und Text ist auf Desktop-PC und Tablet sichtbar, auf dem Smartphone allerdings nicht. Das Beispiel sitzt aufgrund von Verwendung der Klasse "row" um das gesamte Element nebeneinander.
Beispiel 2:
Grafik und Text ist nur in Smartphonegröße sichtbar. Das Beispiel sitzt standardmäßig untereinander, da hier die Klasse "row" nicht verwendet wurde. Diese Anzeige entspricht der Eigenschaft des Smartphones am besten, da es nur eine kleine Anzeigefläche besitzt.
Die obigen Beispiele in HTML-CSS-Code-Ansicht inkl. farbigen Kommentaren für ein besseres Verständnis:
Um diese Inhalte ohne fremde Zuhilfe verstehen zu können, empfehlen wir bereits den voran gegangenen Kontakt mit der Sprache HTML. Die Sprache CSS, die hier für die responsive Darstellung von Inhalten hinzugenommen wird, beinhaltet genauso diverse Tags und Klassen, die verwendet werden müssen, und die sich nur auf die Shopdarstellung auswirken. Im HTML-Editor des Mauve System3 ist die Spaltigkeit des Shop-Gitternetzes nicht sichtbar.
Gerne können wir Ihnen in diesem Rahmen auch CSS-Crashkurs anbieten, der Sie mit den notwendigen Tags und Klassen bekannt macht und Ihnen den Einstieg in die Verwendung von CSS in Kombination mit HTML erleichtert.
Weitere Informationen zum Selbstlernen finden Sie zu diesem Thema in Englisch unter https://www.w3schools.com/html/html_responsive.asp