Tag: webdesign

Responsive Webdesign – Ein „Muss“ für heutige Websites

Die Zeiten, in denen eine Homepage ausschließlich für PCs und Laptops entworfen wurde, sind vorbei. Punkt. Wer heute einen funktionierenden, erfolgversprechenden Internetauftritt hinlegen möchte, kommt um Responsive Webdesign nicht herum. Folgend ein kurzer Überblick zu diesem wichtigen Thema.

Responsives Webdesign: „Sei Wasser, mein Freund!“

Was diese Empfehlung des legendären Kung Fu Meisters Bruce Lee mit Responsive Webdesign zu tun hat, wird bei näherer Betrachtung dieses flexiblen Layouts einer Webpage klar. Bruce Lee beschrieb seine Art zu kämpfen mit folgenden Worten:

„Leere Deinen Geist, sei formlos, gestaltlos – wie Wasser. Fülle Wasser in eine Tasse, so wird es zur Tasse. Fülle Wasser in eine Flasche, so wird es zur Flasche; fülle es in einen Teekessel, so wird es zum Teekessel. Wasser kann fließen oder zerstören. Sei Wasser, mein Freund.”

Das mag auf den ersten Blick etwas weit ausgeholt sein, doch bei Responsive Webdesign geht es genau darum. Es gilt, die präsentierte Homepage so zu gestalten, dass diese sich auf einem PC ebenso gut betrachten und bedienen lässt, wie auf der i-Watch, dem Smartphone oder dem Tablet. Unternehmen, die nach wie vor auf statische, unflexible Websites setzten, werden in Zeiten von Mobility schnell marketingtechnisch ins Hintertreffen geraten. Vor allem jene, die ihre Dienste nur über das WWW anbieten. Tolle, durchdachte und werbewirksame Beispiele für responsive Webdesign gibt es reichlich.

Doch wie genau funktioniert Responsive Webdesign?

Zu der genauen Herangehensweise finden sich im Netz viele, sehr informative Artikel. Denn den genauen Vorgang an dieser Stelle detailliert zu beschreiben, würde den Rahmen in bester Bruce Lee Manier sprengen. Hier wäre zum Beispiel ein solcher Step by Step Guide für Responsive Webdesign. Grob lässt sich Responsive Webdesign so zusammenfassen:

Das im übertragenen Sinne „reagierende Webdesign“ ermöglicht mit Hilfe von HTML5 und CSS3 Media-Queries ein einheitliches Anzeigen aller Inhalte und Nutzungsmöglichkeiten einer Website. Unabhängig vom jeweiligen Endgerät. Das Layout wird also flexibel gestaltet, damit der User auf dem Smartphone die gleiche Benutzerfreundlichkeit geboten bekommt, wie auf dem PC. Das hört sich gar nicht so spektakulär an, doch bedenkt man die extrem abweichende Größe der Bildschirme (vom PC zur i-Watch) sowie deren Auflösung und die Art der Navigation (Mouse oder Touch Screen), wird die Notwendigkeit von Responsive Webdesign schnell deutlich. Kurz: Das „reagierende Webdesign“ folgt dem Nutzer.

Im Zeichen der Mobility!

Sicherlich gibt es noch immer Unternehmer, die sich jeder Neuentwicklung gegenüber erst einmal sträuben. Man denke in diesem Zusammenhang an die derzeitigen Diskussionen rund um das Cloud-Computing. Bei Responsive Webdesign – schließlich ist das schon seit fünf Jahren ein Thema – verhält sich das mittlerweile anders. Wer in diesem Zusammenhang noch von einem Trend redet, hat nicht aufgepasst! IDC ermittelt vierteljährlich die Anzahl der weltweit gelieferten PCs, Notebooks, Tablets und Smartphones. Die aufgeführte Statistik spricht eine ganz klare Sprache.

Statistik mobile Nutzung

Es ist, wie es ist! Mobilität ist Trumpf. Die in der Statistik angegebene Prognose für das Jahr 2016 wird sich ganz gewiss auch für die kommenden Jahre bewahrheiten. Ohne Responsive Webdesign finden sich viele, statische Websites schnell im stetig wachsenden Archive des World Wide Webs wieder.

Responsive CSS Module: Pure

Frameworks für Responsive Design gibt es einige (z. B. Bootstrap). Viele davon beinhalten diverse Elemente, um bei der Umsetzung von Responsive Websites schneller und einfacher ans Ziel zu kommen. Ein interessante Sammlung aus CSS Modulen im minimalistischen Look gibt es unter dem Namen „Pure“. Pure beschreibt sich selbst folgendermaßen:

Pure
A set of small, responsive CSS modules that you can use in every web project.

Komprimiert ergeben die CSS Dateien nur gerade mal 4kb. Zusätzlich zu generellen Styles enhält das Pure-CSS auch Definitionen für Menüs, Tabellen, Grids, Formulare und Buttons in minimalem Design. Alles weitere Wissenswerte, Beispiele und Anleitungen für die Verwendung von Pure bei Responsive Webdesign Projekten finden sich auf der offiziellen Website.

Responsive Design Viewer

Die Agentur Active Value hat ein interessantes Tool veröffentlich: Den Responsive Design Viewer. Über das Online-Tool lassen sich Webauftritte in unterschiedlichen Bildschirmauflösungen anzeigen – je nach Anzeigegerät.

So kann man sich die Darstellung seiner eigenen Website (oder natürlich auch jede beliebige andere) in verschiedenen Devices simulieren lassen. Zur Wahl stehen Smartphone, Tablet, Laptop oder Desktop. Die Größe des sichtbaren Bereiches lässt sich zusätzlich nachjustieren. Einfach mal ausprobieren, URL oben rechts eingeben und hoffentlich nicht negativ überrascht werden, wie der Webauftritt sich dann darstellt. Der Responsive Design Viewer ist auch während der Entwicklung von Responsive Design Websites ein nützlicher Helfer.

Interaktive Infografik zu Responsive Webdesign

Responsive Webdesign ist spätestens seit 2012 in aller Munde. Websites so gestalten, dass sie auf verschiedenen Endgeräten problemlos und ohne Einschränkungen dargestellt werden können – egal ob Desktop, Laptop, Smartphone oder Tablet. Vor dieser Herausforderungen stehen Webdesigner nun immer öfter bei der Erstellung von Websites jeglicher Art – egal ob mit Content Management System oder ohne im Hintergrund. Dabei geht es nicht darum, dass man Extravarianten für z. B. mobile Endgeräte anlegt, sondern das Layout & Design von Grund auf so aufgebaut sind, dass je nach zu Verfügung stehenden „Platz“ je nach Endgerät entsprechend eine optimale Darstellung der Inhalte erreicht wird.

Dabei müssen diverse Faktoren beachtet werden und die Arbeitsweise bei der Erstellung von Screendesigns sowie der Programmierung umgestellt werden. Einige spannende Aspekte werden bei TemplateMonster.com in einer interaktiven sehr umfangreichen Infografik zusammen gefasst. Definitiv einen Besuch wert!

Responsive Webdesign

Literaturliste zur Diplomarbeit

Böhringer, Joachim / Bühler, Peter / Schlaich, Peter / Ziegler, Hans-Jürgen: Kompendium der Mediengestaltung für Digital- und Printmedien; 2. überarb. und erw. Aufl. 2003, Springer Verlag (X.media.press), Berlin 2003

Khazaeli, Cyrus Dominik / Hg: Moos, Ludwig: Crashkurs Typo und Layout, Originalausgabe, Rowohlt Taschenbuch Verlag GmbH, Reinbeck 1995

Grotenhoff, Maria / Stylianakis, Anna: Website-Konzeption: Von der Idee zum Storyboard. 1. Nachdruck 2002, Galileo Design Galileo Press GmbH, Bonn 2002

Heller, Eva: Wie Farben wirken, Sonderausgabe Dezember 2004, Ro-wohlt Taschenbuch Verlag GmbH, Reinbeck 1999

Lynch, Patrick J./ Horton, Sarah / Hg: Rosdale, Ray M.: Erfolgreiches Web-Design, Humboldt Taschenbuch Verlag Jacobi KG, München 1999

Meyer, Robert: Praxiswissen TYPO3, 1. Auflage 2005, O’Reilly Verlag, Köln 2005

Nielsen, Jakob: Erfolg des Einfachen, Autorisierte Übersetzung der amerikanischen Originalausgabe, Markt+Technik Verlag, München 2000

Neutzling, Ulli / Hg: Moos, Ludwig: Typo und Layout im Web, Originalausgabe, Rowohlt Taschenbuch Verlag GmbH, Reinbeck 2002

Rada, Holger: Design digitaler Medien, Max Niemeyer Verlag, Tübin-gen 2002

Rosenfeld, Louis; Morville, Peter: Information Architecture for the World Wide Web, First Edition February 1998, O’Reilly & Associates, Sebastopol 1998

Schweizer, Peter: Handbuch der Webgestaltung – Eine konzentrierte Einführung in professionelles Webdesign, 1. Auflage 2003, Galileo De-sign Galileo Press GmbH, Bonn 2003

Stocksmeier, Thorsten: Business-Webdesign – Benutzerfreundlichkeit, Konzeptionierung, Technik, Wartung, Springer-Verlag (X.media.press), Berlin 2002

Stöckl, Andreas / Bongers, Frank: Einstieg in TYPO3, 1. Auflage 2005, Galileo Computing Galileo Press GmbH, Bonn 2005

Thissen, Frank: Kompendium des Screen-Design, 3. Auflage 2003, Springer-Verlag (X.media.press), Berlin 2003

Einführung in den Themenkreis

Die Konzeption und Realisierung eines Internetauftritts passt ideal in das Berufsbild eines jeden Medieninformatikers und sollte problemlos beherrscht werden. Allerdings verlangt gutes Webdesign mehr als das bloße Zusammenfügen der Text- und Bildinformationen mit einer Menüleiste zur Steuerung der Internetseite. An diesem Punkt werden oftmals schwerwiegende Fehler gemacht, die ein Website-Projekt gefährden, wenn nicht sogar im schlimmsten Fall scheitern lassen. Wichtige Schritte und Phasen werden ausgelassen oder nur ungenügend bearbeitet. Der Begriff „Webdesign“ beinhaltet nicht nur den gestalte-rischen Aspekt bei der Erstellung einer Internetpräsenz, sondern sollte als oberster Sammelbegriff für sehr unterschiedliche, doch besonders wichtige Komponenten des Gesamtprozesses verstanden werden: die Diskussion der zukünftigen Nutzer und die Ausrichtung der Strategie der Website auf Selbige, das Design der Informationsarchitektur und der Navigation, die Entwicklung eines Designkonzeptes samt Layout sowie die mediengerechte Komposition der angebotenen Informationen als nutzenbringenden Content für den Betrachter und zu guter Letzt die Verwendung von neuster Technologie bei der Realisierung des Gesamtkonzepts .

Im dem weiten Feld der Webkonzeption ist sehr viel Literatur angesiedelt. Die Qualität streut jedoch stark. Ein besonderes Werk konnte sich allerdings bereits über die Jahre hinweg als Standard durchsetzten und wird, wenn von erfolgreichem Webdesign im obig definierten Sinne die Rede ist, häufig als Erstes zitiert: der Yale Web Style Guide in seiner überarbeiteten und ergänzten Fassung von 1999. Auf diese Basislektüre zum Thema „Ent-wicklung einer Internetpräsenz“ bezieht sich konzeptionell selbst modernste Literatur. Auf diesen praxiserprobten Leitfaden möchte ich mich aus diesem Grund bei der Bearbeitung des Diploms in Auszügen berufen.

Der Web Style Guide schlägt als Grundgerüst für die Entwicklung einer erfolgreichen Internetpräsenz folgende Etappen vor:

  • Konzeption und Planung
  • Entwurf der Informationsarchitektur
  • Site-Design
  • Erstellung der Website
  • Site-Marketing
  • Tracking, Evaluation und Wartung

Die sechs Schritte werden sich in ähnlicher bzw. leicht abgewandelter Form in der Gliede-rung meiner Arbeit wiederfinden, da diese Art der Vorgehensweise logisch zusammengehörige Elemente miteinander eng verknüpft, der Aufbau sehr übersichtlich und leicht nachvollziehbar ist und nach jedem Abschnitt eine ideale Ausgangsposition für die folgende Einheit geboten wird. Trotz des vorangeschrittenen Alters, im Verhältnis betrachtet, für eine im sich ständig weiterentwickelnden Informations- und Internetzeitalters erschienene Veröffentlichung, besteht kein Zweifel an der Aktualität und Anwendbarkeit der Aussagen, welche im Yale Web Style Guide getroffen wurden.

Aus technologischer Sicht wird die finale Umsetzung des zu erarbeitenden Konzepts mit einem Content Management System erfolgen, wie bereits einleitend angesprochen. Bevor im nächsten Punkt die Arbeit in den Stand der Technik eingeordnet werden kann, ist die Klärung der Thematik rund um Content Management Systeme (kurz CMS) nötig.

Allgemein spricht man von einem Content-Management-System von einer Software, welche die komplette Verwaltung des Inhalts (oftmals Content genannt) einer Website oder auch von anderweitigen Informationsangeboten unterstützen kann. Genauer gesagt, versteht man unter einem Content Management System ein System zur Verwaltung und Administration von Inhalten mit der Möglichkeit, verschiedene Redakteure mit unterschiedlichen Nutzer- und Zugriffsrechten einzusetzen. Dabei gilt das Prinzip der strickten Trennung von Design und Inhalt, um eine ständige Konsistenz des kompletten Auftritts zu schaffen (im Gegensatz zu reinem HTML, welches Inhalt und Design in Einem zusammenfasst). Das gesamte Design steht zentralisiert in sogenannten „Templates“ (zu verstehen als Layoutvorlagen) zur Verfügung. Die Inhalte werden organisiert in einer Datenbank abgelegt.
Das System selbst befindet sich auf einem Webserver, der spezielle Voraussetzungen zu erfüllen hat. Da ein CMS nicht rechnergebunden ist, ist der Redakteur komplett unabhängig bei der Bearbeitung der Inhalte. Theoretisch kann die Seite von jedem Rechner der Welt mit Internetanschluss und herkömmlichen Webbrowser gepflegt werden.

Ein Content Management System mit diesen aufgeführten Vorteilen kann also den Umgang und die komplette Wartung der Seite für den Betreiber enorm vereinfachen und selbst den Mitarbeiter ohne spezielle Vorkenntnisse in diesem Bereich zum Webredakteur befördern. Lediglich das Aufsetzen des Systems kann für den Verantwortlichen eine Hürde darstellen, was sich im Einzelnen während der Bearbeitung der Diplomarbeit herausstellen wird.