Responsive Webdesign: was, wie und warum?

1

Vom Ursprung des responsive Webdesign über die Definition, bis hin zu Softwarelösungen und der Content-Frage.

Wie alles Begann?
Im Jahr 2010 hat Ethan Marcotte, Webdesigner und Entwickler, den Begriff responsive Webdesign durch seinen Artikel im Magazin «A list apart», populär gemacht. Das Wort responsive hat Marcotte aus der Architektur übernommen. Dort steht es für Gebäude, die flexibel auf Umwelteinflüsse reagieren, also z.B. ihre Form oder ihre Farbe ändern.
Marcotte argumentierte, dass Websites keine starren Gebilde sind und stellte die Technik der Media Queries vor. Ausschlaggebend für das Umdenken im Webdesign war das erste iPhone (2007), mit welchem das mobile Surfen massentauglich und beliebter wurde.

Was ist responsive Webdesign?
„Form follows function“ – beim responsive Webdesign (RWD) folgen Funktion, Design und Inhalt der jeweiligen Bildschirmauflösung des verwendeten Device. Responsive Webdesign ist also reagierendes Webdesign, welches dem Nutzer folgt und sich an dessen Device anpasst. Ein grosser Vorteil von responsive Webdesign ist, dass nur eine Website gebaut werden muss.

Softwarelösungen
Aus einer Palette von unendlich vielen Softwarelösungen, die beim Bauen einer responsive Website unterstützend sein können, möchten wir euch folgend vier näher vorstellen.

Adobe Muse CC
Der Adobe Muse CC ist Teil der Adobe Creative Cloud. Eine Softwarelösung für Einsteiger im Webdesign. Beim Adobe Muse sind keine Programmierkenntnisse nötig, es ist sozusagen eine Übersetzungssoftware für Webdesign. Responsive Webdesign mit Adobe Muse ist möglich, jedoch mit Einschränkungen: Scroll-Effekte können nicht eingebaut werden und einige Widgets sind für responsive Design nicht erhältlich.

WordPress & Joomla
WordPress und Joomla sind Opensource CMS Systeme. Die einfache Handhabung wird über Drag & Drop Funktionen garantiert. Bei beiden Softwares kommt das responsive Webdesign mit der Auswahl des Themes. Zusätzliches Programmieren muss nicht sein – kann aber, um bspw. das Theme noch besser auf die persönlichen Bedürfnisse anzupassen. Somit eignen sich WordPress und Joomla für Einsteiger wie auch für Profis.

Adobe Dreamweaver
Der Adobe Dreamweaver ist ein HTML-Editor, bei welchem Programmierkenntnisse für Webdesign erforderlich sind. Er funktioniert nach dem Prinzip WYSIWYG. Responsive Webdesign mit dem Adobe Dreamweaver kann von Grund auf neu gebaut werden oder unterstützend mit einer Bootstrapvorlage. Bootstrap ist ein Front-End-Framework, welches HTML und CSS basierende Gestaltungsvorlagen frei zur Verfügung stellt.

folie20

(Quelle: Eigene Darstellung)

Content is king
Welche Möglichkeiten gibt es um den Inhalt einer Website userfreundlich darzustellen? Ansätze und Meinungen schweifen hier auseinander: Von Mobile oder Content First, über Hauptsache responsive, bis hin zu angepassten Inhalten für die unterschiedlichen Devices.
Bei einer responsive Website wird der Content einmalig abgefüllt und auf allen Endgeräten über die gleiche URL ausgegeben. Bei der Mobile Website, wird der Content für diese separat erstellt und bewirtschaftet – eine zweite URL wird benötigt. Das Konzept responsive Content ermöglicht die Ausgabe von unterschiedlichen Inhalten über eine URL.

Was ist die optimale Lösung? Nun, hier gibt es keine pauschale Antwort. Wichtig ist, dass man sich die Frage stellt «Was will ich mit meiner Website erreichen?». Eine Zielanalyse sollte der Entscheidung für eines dieser Konzepte also unbedingt voraus gehen.

Wir empfehlen das Konzept der responsive Websites. Einerseits, weil so den Besuchern der Website keine Inhalte vorenthalten werden und andererseits hält sich der Aufwand bei Erstellung und Updates in Grenzen. Also unser Fazit, ganz im Sinne von Andy Clarke, der einst sagte: «From now on, if it’s not responsive, it’s not webdesign».

Teilen in

About Author

1 Kommentar

  1. Pingback: App vs. Mobile Website – wo liegen die Unterschiede?

Leave A Reply

*