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

Responsive (Web)DesignMobile Kommunikation – leicht gemacht

„Responsive Webdesign“Google-Trends

Entwicklung des Begriffs

Dipl.-Inf.(FH) Gerald Martinwww.germanis.de

„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 Martinwww.germanis.de

Typische Displays

Dipl.-Inf.(FH) Gerald Martinwww.germanis.de

Entwurfsansicht

Dipl.-Inf.(FH) Gerald Martinwww.germanis.de

www.mediaqueri.es

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 Martinwww.germanis.de

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 Martinwww.germanis.de

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 Martinwww.germanis.de

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 Martinwww.germanis.de

Für mobile Ausgabegeräte optimiert:Die Webinhalte des World Wildlife Fund www.worldwildlife.org

Dipl.-Inf.(FH) Gerald Martinwww.germanis.de

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

Anpassen | Weglassen | Verändern

Optimieren!

Dipl.-Inf.(FH) Gerald Martinwww.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

Dipl.-Inf.(FH) Gerald Martinwww.germanis.de

*Steuerelemente, Beispiele

Menüs, Navigation

Suche (Volltextsuche, Kategoriesuche etc.)

Multimediasteuerung (Slider, Videos)

Ein simples Beispielwww.gartendialog.de

Dipl.-Inf.(FH) Gerald Martinwww.germanis.de

Dipl.-Inf.(FH) Gerald Martinwww.germanis.de

Vielen Dank für Ihre Aufmerksamkeit!