1. Responsive (Web)Design
Mobile Kommunikation – leicht gemacht
Dipl.-Inf.(FH) Gerald Martin
www.germanis.de

2. „Responsive
Webdesign“
Google-Trends
 Entwicklung des Begriffs
Dipl.-Inf.(FH) Gerald Martin
www.germanis.de

3. „Responsive Webdesign“
 Mittlerweile gängiger Begriff für Anpassen von Webinhalten
an verschiedene Ausgabegeräte
 Bedeutung: Optimieren von Webseiten für diese Endgeräte
 Inhalte werden entsprechend aufbereitet und angepaßt
 Folge des zunehmenden Einsatzes von mobilen Geräten
Dipl.-Inf.(FH) Gerald Martin
www.germanis.de

4. Typische Displays
Dipl.-Inf.(FH) Gerald Martin
www.germanis.de

5. Entwurfsansicht
Dipl.-Inf.(FH) Gerald Martin
www.germanis.de
www.mediaqueri.es

6. RP steht NICHT für
 Separate mobile Webseiten
 Eigene Programme für mobile Ausgabegeräte  „Apps“
 Die Möglichkeit, Webinhalte prinzipiell auf verschiedenen
Geräten zu öffnen, sondern diese möglichst optimal
darzustellen
Dipl.-Inf.(FH) Gerald Martin
www.germanis.de

7. O-Ton eines SEO
„Google als Suchmaschine richtet sich mehr und mehr für Tablets
und Smartphones aus.
Apps und spezielle mobile Websites werden zum
Nischenprodukt, während Responsive Design auf breiter Front
vorangetrieben und in diese Technologie investiert wird.
Vor allem Tablets erzielen teilweise mehr Zugriffe im Vergleich
zum Desktop-PC und erst recht zum Smartphone.
Tablets sind demnach der Renner, wenn es um mobiles
Surfen geht.“
Dipl.-Inf.(FH) Gerald Martin
www.germanis.de

8. Die Idee dahinter?
 Nutzerfreundlichkeit (hinsichtlich mobiler Geräte)
 Einfach Bedienung
  kleine Displays
  ohne „klassische“ Mouse (Touchscreens)
 Für Webseitenbetreiber (redaktionelle Arbeit):
  zentrale, einfache, automatisierte Inhaltspflege
Dipl.-Inf.(FH) Gerald Martin
www.germanis.de

9. Darstellbar, aber
nicht optimiert:
Die Webinhalte der Deutschen
Telekom www.telekom.de
 Seiten müssen gezoomt
werden
 Abschnitte müssen durch
Scrollen gesucht werden
Dipl.-Inf.(FH) Gerald Martin
www.germanis.de

10. Für mobile
Ausgabegeräte
optimiert:
Die Webinhalte des World Wildlife Fund
www.worldwildlife.org
Dipl.-Inf.(FH) Gerald Martin
www.germanis.de

11. Anpassen | Weglassen | Verändern
Optimieren!
Dipl.-Inf.(FH) Gerald Martin
www.germanis.de

12. Dipl.-Inf.(FH) Gerald Martin
www.germanis.de
Optimieren heißt Modifizieren
 Schrift: Größe, Farbe, Format, …Schriftart
 Text: Hervorheben, Spaltenzahl, Absätze, Inhalt pro Seite
 Bilder: Skalieren, kleinere Versionen, Ladezeitoptimierung
 Multimedia: high quality  low quality
 Steuerelemente*: Symbole statt Beschriftung

13. Dipl.-Inf.(FH) Gerald Martin
www.germanis.de
*Steuerelemente, Beispiele
 Menüs, Navigation
 Suche (Volltextsuche, Kategoriesuche etc.)
 Multimediasteuerung (Slider, Videos)

14. Ein simples
Beispiel
www.gartendialog.de
Dipl.-Inf.(FH) Gerald Martin
www.germanis.de

15. Dipl.-Inf.(FH) Gerald Martin
www.germanis.de
Vielen Dank für Ihre Aufmerksamkeit!