Responsive-Webdesign-Tutorial
Vorwort
Autor: Ing. Andreas Hammer, MSc (WU)
Dieses Dokument, das Design der Seite sowie die darin enthaltenen Quellcodes sind urheberrechtlich geschützt.
Der private Gebrauch ist kostenlos möglich.
Eine kommerzielle Nutzung sowie die Verwendung an Schulen, anderen Ausbildungsstätten (im weitesten Sinne) sowie zur betrieblichen Aus- und Weiterbildung erfordern die Zustimmung des Autors.
Kontaktieren Sie mich in diesem Fall bitte per E-Mail ().
Es ist NICHT gestattet, dieses Dokument weiterzuverbreiten!
Es ist dabei egal, welches Medium verwendet wird. Es ist somit auch NICHT zulässig,
dieses Dokument im Internet zu verbreiten. Darunter fällt auch das Spiegeln (mirroring) auf anderen Servern.
Setzen Sie bitte stattdessen einen Link, gerne auch auf eine einzelne Seite bzw. Absatz.
Sie dürfen selbstverständlich aus diesem Dokument - im Rahmen eines üblichen Zitats - zitieren (bitte Quelle angeben).
Im Folgenden wird zur Vereinfachung und leichteren Lesbarkeit nur die männliche Form verwendet. Es sind damit natürlich beide Geschlechter gemeint. Für die Richtigkeit, Vollständigkeit und Aktualität der vermittelten Inhalte wird keine Haftung übernommen! Die Benutzung erfolgt somit auf eigene Gefahr!
Für Feedback, Hinweise auf Irrtümer und Fehler bin ich dankbar (Feedback).
Der Trend zu mobilen Geräten und die Bedeutung von Responsive Webdesign
Mobile Geräte liegen im Trend. Immer häufiger werden Websites von mobilen Geräten wie Smartphones oder Tablet PCs aufgerufen1. Dabei nutzen Besucher oft mehrere Geräte, rufen dieselbe Website also häufig sowohl von mobilen Plattformen als auch vom Desktop-PC auf. Umso wichtiger wird es, dass die Website auch auf mobilen Geräten gut funktioniert und benutzerfreundlich ist. Dazu gehört neben einem stimmigen Design auch, dass Texte gut lesbar sind.
Sie suchen einen Dienstleister?
Firmenkunden finden unter Responsive Webdesign und Mobile Website das Dienstleistungsangebot des Autors zum Thema.
Responsive Webdesign stellt eine Universallösung dar. Mit einem reaktionsfähigen (responsive) Layout bewirken Sie, dass sich sich eine Website automatisch an die zur Verfügung stehende Bildschirmgröße anpasst. Das ging mit HTML/CSS und einem flexiblen Layout zwar bisher immer schon, nun können Sie allerdings an bestimmten Größen (meist Bildschirmbreiten) Umbruchpunkte definieren und das Layout anpassen lassen.
Die Möglichkeiten sind zahlreich. So können Sie unpassende Elemente ausblenden, das Menü für Touchscreens kompatibel machen, Schriftgrößen, Bilder und vieles mehr ändern.
Entstehung dieses Tutorials
Dieses Tutorial entstand aus einer Bachelorarbeit, die vom Autor (Andreas Hammer) im Sommersemester 2013 an der Wirtschaftsuniversität Wien geschrieben wurde. Das Thema der Arbeit war "Responsive Webdesign" im Vergleich zu bisherigen Möglichkeiten anhand einer beispielhaften Unternehmenswebsite. Danke an den Betreuer Dr. Felix Mödritscher für die Unterstützung, die Ideen und Verbesserungsvorschläge!
Für das Tutorial wurde die Arbeit an einigen Stellen erweitert/ergänzt und lesefreundlicher gestaltet. Das soll sie einem größeren Publikum zugänglich machen. Die Quellenangaben der ursprünglichen Arbeit sind auch im Tutorial enthalten und können auf Wunsch eingeblendet werden.
Beachten Sie, dass diese Arbeit aus einem wissenschaftlichen Kontext heraus entstanden ist. Diese Elemente sind auch im Tutorial größtenteils noch enthalten, Gleiches gilt für Begrifflichkeiten (die Arbeit).
Zielgruppe
Dieses Tutorial richtet sich in erster Linie an Webdesigner bzw. Webprogrammierer. Sie brauchen nicht allzu viel Erfahrung, Grundlagenwissen in HTML, CSS und - nach Möglichkeit auch - PHP sollten Sie aber mitbringen. Je mehr Vorkenntnisse Sie haben, desto schneller werden Sie mit dem Tutorial fortfahren können.
Ansonsten: Nehmen Sie sich die Zeit, in Ruhe alles auszuprobieren. Versuchen Sie das Erlernte (zunächst: Gelesene) auch anzuwenden, indem Sie es an eigenen Beispielen (und Websites) ausprobieren. Je mehr Sie üben, desto größer ist auch der Lernfortschritt. Also: Probieren, probieren, probieren! Lesen allein reicht nicht!
Abgesehen von der technischen Seite könnte dieses Tutorial auch für alle anderen (zukünftigen) Besitzer vom Websites bei der Entscheidungsfindung interessant sein. Sie möchten eine Website erstellen (oder erstellen lassen) und stehen insb. vor folgenden Fragen:
- Zahlt sich Responsive Webdesign in meinem Fall aus?
- Oder lieber eine eigene mobile Website?
- Oder reicht gar ein gewöhnliches, statisches Layout?
Um all diese Fälle abzudecken enthält dieses Tutorial sowohl:
- Theorie
- Technische Grundlagen (z.B. HTML5, Media Queries in CSS)
- Ein Anwendungsbeispiel (kleine Unternehmenswebsite) in 3 Ausführungen (statisch, als eigene mobile Website und responsive)
- Hilfe bei der Entscheidungsfindung (anhand eines Kriterienvergleichs)
Was tun bei Fragen?
Was tun, wenn Sie im Laufe des Tutorials Fragen oder Probleme haben? Probieren Sie bitte zunächst, selbst eine Lösung zu finden bzw. selbst den Fehler zu finden. Stundenlanges Fehlersuchen kommt im Webdesign hin und wieder vor. Die meisten Fehler lassen sich aber natürlich schneller finden. Eine kurze Pause hilft auch oft. Hier gilt es vor allem, Durchhaltevermögen zu beweisen und so lange dran zu bleiben, bis man den Fehler selbst gefunden hat. Das ist extrem wichtig und gehört dazu!
Wenn Sie selbst keine Lösung gefunden haben, eine Pause und Google auch nichts geholfen haben, dann wenden Sie sich bitte an das Forum. Bevor Sie einen neuen Beitrag (Thread) schreiben, überprüfen Sie aber bitte auch hier, ob Ihre Frage nicht bereits an anderer Stelle beantwortet wurde (Suchfunktion!).
Bitte schreiben Sie mir keine E-Mails mit Verständnisfragen zu Webdesign oder Programmierung. Ich leiste keinen E-Mail-Support! Ich habe leider weder die Zeit, auf jede Frage persönlich eingehen, noch Fehler in fremden Codes zu suchen.
Los gehts! Das nächste Kapitel startet mit einer ausführlichen Einleitung und erklärt den Aufbau dieses Tutorials.
| Nächstes Kapitel |