View
379
Download
0
Category
Preview:
DESCRIPTION
Citation preview
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!
Recommended