Responsive Design. Gestaltung einer mobilen Webseite.

Responsive Webdesign Berlin

„Responsive“ ist einfach zu erklären. Es bedeutet eine automatische Anpassung, einer Webseite oder einer Applikation, auf die Displaygröße verschiedener Endgeräte. Es sind hier nicht nur Handys, sondern auch Notebooks, Monitore, Tablets und Smartphones mit unterschiedlichen Auflösungen, gemeint – also alle mobilen Geräte.

Noch vor ein paar Jahren, Internetseiten mit Handys zu betrachten, gehörte nicht unbedingt zur Selbstverständlichkeit. Von Webdesignern wurde nicht erwartet entsprechende Webseiten zu gestalten. Dies solle sich jedoch drastisch ändern … im 2015 solle es mehr Benutzer geben, die das Internet mit Hilfe von Smartphones und Tablets durchforschen, als mit Desktop-Komputer und Laptops.

Eine Webseite responsive zu gestalten ist inzwischen Pflicht. Internetseite, die sich heutzutage nicht an die mobilen Geräte anpasst, gehört in die Kategorie einer amateurhaften,  stark veralteten Lösung.

Responsive Webdesign gehört zu Standards, deswegen ist wichtig zu wissen, wie dieser Mechanismus funktioniert und wie man es (zumindest in Grundversion) in eine Webseite implementiert.

Responsive Webdesign – Gestaltungsmethoden

Bevor Responsive Design so populär wurde, erstellten viele Unternehmen getrennte Versionen ihrer Handy-Homepage, auf Subdomänen, zum Beispiel mit Präfix „.m“. Danach wurde ein einfaches Skript im Head der Internetseite eingefügt, das für die Erkennung eines Endgerätes verantwortlich war. In der Praxis sah es so aus, dass die Website „beispiel.de“ für „normale“ Komputer geladen wurde, und sobald ein Endgerät mit entsprechend kleiner Auflösung erkannt wurde, auf die Adresse „m.beispiel.de“ weiterleitete.

Solch eine Lösung brachte mit sich gleichzeitig Vorteile wie auch Nachteile. Der größte Vorteil lag in der Möglichkeit der Einführung einer komplett neuen (mobilen) Website, parallel zu der schon existierenden Desktop-Version, ohne Angst über die Verfügbarkeit-Pausen oder Implementierungsprobleme zu haben. Da damals das mobile Internet nicht so weit verbreitet war, eventuelle Fehler die kleinere Bildschirmauflösungen betrafen, waren auch akzeptabel.

Die Notwendigkeit der Erstellung einer Kopie der ganzen Website unter einer Subdomäne, führte zu großen Belastung der Server-Ressourcen. Dies und und die Tatsache, dass es auch keine Möglichkeit gab, getrennte Subdomänen für verschiedene Auflösungen (Bildschirmbreiten: 480px, 640px, 960px, 1080px, etc. …) zu erstellen, gehörte zu den größten Nachteilen.

CSS3 Zeiten

Anpassung einer modernen Website an die mobilen Geräte, funktioniert heute durch präzise Angaben (in CSS) betreffend verschiedener Bildschirmauflösungen.  Um die Grundidee zu verstehen, betrachten wir den unteren Beispiel.

@media screen and (min-width: 769px) and (max-width: 1280px) {
/* Browserfenster mit der Auflösung zwischen 769px und 1280px */
}

Attribut @media in der .css-Datei einer Website erlaubt uns präziser zu beschreiben wann bestimmte CSS-Eigenschaften geladen werden. In dem Beispiel für eine minimale Bildschirmauflösung von 769px und maximale von 1280px. Für alle andere Auflösungen werden die Eigenschaften übersprungen.

Einfacher Beispiel eines Responsive Webdesigns

HTML-Aufbau …

<body>
<div class = "mobile-box">Box sichtbar nur für Handys.</div>
<div class = "non-mobile-box">Box für Handys nicht sichtbar.</div>
<div class = "box">Box für alle Geräte sichtbar</div>
</body>

… und jetzt die entsprechende CSS-Anpassung …


.box {
display: block;
}

@media screen and (max-width: 480px) {
/* Browserfenster-Breite zwischen 0px und 480px */
.mobile-box {
  display: block;
}
.non-mobile-box {
  display: none;
}
}

@media screen and (min-width: 480px){
/* Browserfenster-Breite zwischen 480px und Unendlichkeit */
.mobile-box {
  display: none;
}
.non-mobile-box {
  display: block;
}
}

Das Html-Element mit der Klasse „.box“ wird immer sichtbar sein, unabhängig von der Auflösung. Die Elemente „.mobile-box“ und „.non-mobile-box“ erscheinen immer abhängig von der jeweiligen Auflösung des Browserfensters.

Responsive Frameworks – bootstrap

bootstrap

Sehr umfangreiche Internetseiten geschrieben mit php, java oder python bestehen aus Tausenden oder sogar Millionen Code-Zeilen. Um die Arbeit bei der Stilisierung solcher Webseiten zu vereinfachen ist man auf die Idee gekommen, fertige CSS, HTML und JS Frameworks anzubieten. Solche „Style-Pakete“ sind schon vordefiniert und stehen jedem Webdesigner zu verfügung. Das einzige was zu tun ist, ist den eigenen Quellcode mit den vordefinierten Framework-Klassen entsprechend zu füllen.

Eine auf dem Gebiet führende Lösung ist bootstrap. Auf der bootstrap-Homepage kann man fertige .css- und .js-Dateien herunterladen, die auf sehr einfache Weise in die eigene Webseite zu implementieren sind. Auf dem Wege ist es möglich in relativer kürzer Zeit ein hochwertiges responsives Grundgerüst eine Website zu erstellen.

Bootstrap ist von professionellen Programmierer geschrieben, sehr übersichtlich und einfach zu editieren, damit man auch eine individuell Note eigener Website verschaffen kann. Dazu ist diese Lösung auch kostenfrei. Auf der bootstrap-Website findet sich umfangreiche Dokumentation, Tutorien und Beispiele.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.