Responsive (web)design

618 Aufrufe

Veröffentlicht am

0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

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

Keine Downloads
Aufrufe
Aufrufe insgesamt
618
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
1
Aktionen
Geteilt
0
Downloads
5
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

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!

×