Responsive-Webdesign-Tutorial
Zusammenfassung und Handlungsempfehlungen
10.1. Handlungsempfehlungen bei der Layout-Wahl (statisch / mobile / responsive)
Die nachfolgende Tabelle fasst die Ergebnisse aus Kapitel 9 noch einmal zusammen und soll grobe Handlungsempfehlungen geben.
Die Subkategorien aus Kapitel 9 dienen dabei als Kategorien bzw. Prioritäten / Schwerpunkte für den Einsatzzweck. Die drei Lösungsvarianten (Desktop / Mobile / Responsive) werden je Kategorie nach Eignung bewertet. Eine „hohe“ Eignung (grün) entspricht dabei einer Stärke, einem besonderen Vorteil der Lösung. Eine „geringe“ Eignung (rot) entspricht einer Schwäche, einem Nachteil, den es zu bedenken gilt. Alles dazwischen wird als „mittel“ (gelb) eingestuft. Dabei handelt es sich um Kompromisse bzw. Situationen, wo es stark auf den Einsatzzweck ankommt.
| Kategorie, Priorität / Eignung |
Statisches Desktop-Layout | Separate (statische) mobile Website | Responsive Webdesign |
|---|---|---|---|
| Flexibilität des Designs | gering | gering | hoch |
| Kontrolle über das Design | hoch | hoch | gering |
| User Experience | gering | hoch | mittel |
| Möglichkeiten im Inhaltsbereich | gering | hoch | mittel |
| Wirtschaftlichkeit | hoch | gering | mittel |
| Performance | hoch | hoch | mittel |
| Kompatibilität | hoch | hoch | mittel |
| Suchmaschinen- optimierung |
hoch | gering | hoch |
Es zeigt sich, dass Responsive Webdesign vor allem eine gute Allzweck-Lösung darstellt. Dieses hat am wenigsten „Stärken“ (2x), aber auch am wenigsten „Schwächen“ (1x). Die besonderen Vorzüge der anderen beiden Lösungen liegen in deren Spezialisierung. Das mobile Layout lässt sich exakt an mobile Endgeräte anpassen, d.h. bei Inhalt, User-Experience als auch im Design. Es werden keine unnötigen Daten geladen (hohe Performance), neue Technologien sind nicht notwendig (hohe Kompatibilität). Ein großer Nachteil ist der damit verbundene hohe Aufwand (zeitlich, finanziell).
Ausschließlich ein statisches Desktop-Layout zu entwerfen, stellt vor allem eine „Budget-Lösung“ dar, sofern mobile Endgeräte geringe Bedeutung haben (geringe Kosten, d.h. höchste Wirtschaftlichkeit).
10.2. Zusammenfassung des Tutorials
Websites wurden die letzten Jahre meist statisch in einem Bildbearbeitungsprogramm in fixer Größe entworfen und so exakt wie möglich in HTML / CSS übertragen. Dem steht der Trend zu mehr mobilen Geräten mit einer Vielzahl von Bildschirmauflösungen gegenüber (Ausgangssituation).
Ein reaktionsfähiges Design (Responsive Webdesign) passt sich automatisch an die verfügbare Bildschirmgröße an. Das Layout ist flexibel (enthält relative Größen) und vermeidet mit Media Queries (CSS3) negative Extremfälle (z.B. schlechte Lesbarkeit) durch Designänderung an Umbruchpunkten.
Der erste Teil der Arbeit (Kapitel 1 bis 4) beleuchtet mit einer Literaturrecherche die wichtigsten Grundlagen zum Thema (Geschichtliches, Kontrolle über den Inhalt, Umgang mit Inhalten, semantische Strukturierung mit HTML5, Bestandteile einer reaktionsfähigen Website) und die Vorgehensweise bei der Entwicklung.
In Kapitel 5 bis 8 wird eine beispielhafte Unternehmenswebsite in drei Versionen (Prototypen) entwickelt: als statisches 960px-Layout (= Desktop-Ansicht), als Abwandlung davon für mobile Geräte (= Mobile-Ansicht) und als reaktionsfähiges Layout. Es wird jeweils der dazu notwendige HTML- und CSS-Code mitsamt Änderungen gezeigt und erläutert. Zwischen der Desktop-Ansicht und der Mobile-Ansicht wird mit einer PHP-Browserweiche umgeschaltet (zusammen als Alternative zum Responsive Webdesign). Gezeigt wird die Skalierung von Text und Anpassungen in einer einfachen Bildergalerie.
Im letzten Teil (Kapitel 9 und 10) werden die Lösungen und deren Vor- und Nachteile anhand von acht Kriterien gegenüber gestellt (Flexiblität, Kontrolle über das Design, User Experience, Möglichkeiten im Inhaltsbereich, Wirtschaftlichkeit, Performance, Kompatibilität, Suchmaschinenoptimierung) und Handlungsempfehlungen abgegeben.
Während die separate mobile Website eine hohe Spezialisierung aufweist (Design, Inhalt, User Experience, Performance), stellt das Responsive Webdesign vor allem eine gute Allzweck-Lösung dar (hohe Flexibilität im Design).
Reaktionsfähige Websites eignen sich vor allem für inhaltslastige Seiten („informational sites“), die von vielen verschiedenen Endgeräten aufgerufen werden und wo maximale Kontrolle über das Design und Performance keinen Schwerpunkt darstellt.
10.3. Schlusswort, Fragen und Antworten
Zu jedem Vorwort gehört auch ein Schlusswort. Finde ich zumindest. Jedenfalls vermisse ich Schlussworte oft, wenn ich mir am Ende vieler Bücher denke: Und jetzt?
Wie kann ich meine Kenntnisse erweitern und vertiefen?
Am besten mit einem weiterführenden Buch! Im Jahr 2013 sind einige deutschsprachige Bücher zu Responsive Webdesign erschienen.
Persönlich sehr empfehlen kann ich
Responsive Webdesign: Reaktionsfähige Websites gestalten und umsetzen
Auf dieses Buch wurde im Laufe des Tutorials auch mehrmals verwiesen (siehe aufklappbare Quellenangaben).
Wollen Sie Ihre allgemeinen CSS-Kenntnisse verbessern, dann empfehle ich
Das große Little Boxes-Buch - Webseiten gestalten mit HTML & CSS
Vom selben Autor gibt es mittlerweile auch ein eigenes Buch zu Responsive Webdesign:
Flexible Boxes: Eine Einführung in moderne Websites. Responsive Webdesign verstehen
Meine Code funktioniert nicht! Was tun bei Fragen? Wo finde ich Hilfe?
Eines vorweg: Bitte schreiben Sie mir keine E-Mail! Ich leiste keinen E-Mail-Support. Ich habe leider weder die Zeit, auf jede inhaltliche Frage zu Programmierung und Webdesign persönlich eingehen, noch Fehler in fremden Codes zu suchen.
Also was tun wenn's nicht läuft? Finden Sie den Fehler selbst! Fehlersuchen gehört für Programmierer & Webdesigner dazu!
Es läuft immer noch nicht? Weitersuchen, ggf. nochmal die Grundlagen lesen und lernen. Auch eine kurze Pause wirkt oft wahre Wunder, um Fehler in der eigenen Denkweise zu erkennen ("So kann's ja gar nicht funktionieren ..."). Fremde Hilfe in Anspruch zu nehmen, sollte immer nur den letzten Ausweg darstellen.
Natürlich können Sie Fragen stellen, auch erhöht reger Austausch den Lerneffekt. Mehr dazu im Forum. Nutzen Sie bitte, bevor Sie einen neuen Beitrag schreiben, die Suchfunktion. Fragen werden i.d.R. mehrfach gestellt, und Ihre Frage lässt sich so vielleicht bereits beantworten.
Ich freue mich natürlich über Feedback zu diesem Tutorial. Zum Beispiel: Was ist gut erklärt, was lässt sich noch verbessern? Gibt es Fehler? Schreiben Sie aber bitte alle inhaltlichen Fragen zu Programmierung & Webdesign, die Sie nicht selbst lösen konnten, immer ins Forum! Im Forum verteilen sich alle Fragen auf viele Programmierer/Webdesigner. Es antwortet dann, wer gerade Zeit hat.
Weiterhin viel Spaß bei Programmierung und Webdesign wünscht der Autor dieses Tutorials,
Andreas Hammer
| Vorheriges Kapitel |