Responsive (Web)Design
Mobile Kommunikation – leicht gemacht
Dipl.-Inf.(FH) Gerald Martin
www.germanis.de
„Responsive
Webdesign“
Google-Trends
 Entwicklung des Begriffs
Dipl.-Inf.(FH) Gerald Martin
www.germanis.de
„Responsive Webdesign“
 Mittlerweile gängiger Begriff für Anpassen von Webinhalten
an verschiedene Ausgabegeräte
 Bedeut...
Typische Displays
Dipl.-Inf.(FH) Gerald Martin
www.germanis.de
Entwurfsansicht
Dipl.-Inf.(FH) Gerald Martin
www.germanis.de
www.mediaqueri.es
RP steht NICHT für
 Separate mobile Webseiten
 Eigene Programme für mobile Ausgabegeräte  „Apps“
 Die Möglichkeit, Web...
O-Ton eines SEO
„Google als Suchmaschine richtet sich mehr und mehr für Tablets
und Smartphones aus.
Apps und spezielle mo...
Die Idee dahinter?
 Nutzerfreundlichkeit (hinsichtlich mobiler Geräte)
 Einfach Bedienung
  kleine Displays
  ohne „...
Darstellbar, aber
nicht optimiert:
Die Webinhalte der Deutschen
Telekom www.telekom.de
 Seiten müssen gezoomt
werden
 Ab...
Für mobile
Ausgabegeräte
optimiert:
Die Webinhalte des World Wildlife Fund
www.worldwildlife.org
Dipl.-Inf.(FH) Gerald Mar...
Anpassen | Weglassen | Verändern
Optimieren!
Dipl.-Inf.(FH) Gerald Martin
www.germanis.de
Dipl.-Inf.(FH) Gerald Martin
www.germanis.de
Optimieren heißt Modifizieren
 Schrift: Größe, Farbe, Format, …Schriftart
 ...
Dipl.-Inf.(FH) Gerald Martin
www.germanis.de
*Steuerelemente, Beispiele
 Menüs, Navigation
 Suche (Volltextsuche, Katego...
Ein simples
Beispiel
www.gartendialog.de
Dipl.-Inf.(FH) Gerald Martin
www.germanis.de
Dipl.-Inf.(FH) Gerald Martin
www.germanis.de
Vielen Dank für Ihre Aufmerksamkeit!
Nächste SlideShare
Wird geladen in …5
×

Responsive (web)design

778 Aufrufe

Veröffentlicht am

  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Responsive (web)design

  1. 1. Responsive (Web)Design Mobile Kommunikation – leicht gemacht Dipl.-Inf.(FH) Gerald Martin www.germanis.de
  2. 2. „Responsive Webdesign“ Google-Trends  Entwicklung des Begriffs Dipl.-Inf.(FH) Gerald Martin www.germanis.de
  3. 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. 4. Typische Displays Dipl.-Inf.(FH) Gerald Martin www.germanis.de
  5. 5. Entwurfsansicht Dipl.-Inf.(FH) Gerald Martin www.germanis.de www.mediaqueri.es
  6. 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. 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. 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. 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. 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. 11. Anpassen | Weglassen | Verändern Optimieren! Dipl.-Inf.(FH) Gerald Martin www.germanis.de
  12. 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. 13. Dipl.-Inf.(FH) Gerald Martin www.germanis.de *Steuerelemente, Beispiele  Menüs, Navigation  Suche (Volltextsuche, Kategoriesuche etc.)  Multimediasteuerung (Slider, Videos)
  14. 14. Ein simples Beispiel www.gartendialog.de Dipl.-Inf.(FH) Gerald Martin www.germanis.de
  15. 15. Dipl.-Inf.(FH) Gerald Martin www.germanis.de Vielen Dank für Ihre Aufmerksamkeit!

×