SlideShare ist ein Scribd-Unternehmen logo
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
 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
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, Webinhalte prinzipiell auf verschiedenen
Geräten zu öffnen, sondern diese möglichst optimal
darzustellen
Dipl.-Inf.(FH) Gerald Martin
www.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 Martin
www.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 Martin
www.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 Martin
www.germanis.de
Für mobile
Ausgabegeräte
optimiert:
Die Webinhalte des World Wildlife Fund
www.worldwildlife.org
Dipl.-Inf.(FH) Gerald Martin
www.germanis.de
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
 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 Martin
www.germanis.de
*Steuerelemente, Beispiele
 Menüs, Navigation
 Suche (Volltextsuche, Kategoriesuche etc.)
 Multimediasteuerung (Slider, Videos)
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!

Weitere ähnliche Inhalte

Andere mochten auch

Ruta kananga memorias de africa confort
Ruta kananga memorias de africa  confortRuta kananga memorias de africa  confort
Ruta kananga memorias de africa confortKANANGAviajes
 
Benutzerhandbuch Zeta Producer 9 CMS
Benutzerhandbuch Zeta Producer 9 CMSBenutzerhandbuch Zeta Producer 9 CMS
Benutzerhandbuch Zeta Producer 9 CMSUwe Keim
 
Presentació lev manovich pr1 1
Presentació lev manovich pr1 1Presentació lev manovich pr1 1
Presentació lev manovich pr1 1chanson27
 
Documento electrónico (1)
Documento electrónico (1)Documento electrónico (1)
Documento electrónico (1)strellaitzel
 
El grupo fation widhon
El grupo fation widhonEl grupo fation widhon
El grupo fation widhonvivi_
 
Ruta kananga memorias de áfrica aventura
Ruta kananga memorias de áfrica aventuraRuta kananga memorias de áfrica aventura
Ruta kananga memorias de áfrica aventuraKANANGAviajes
 
Has dejado mi barca
Has dejado mi barcaHas dejado mi barca
Has dejado mi barcaAlbino Rojas
 
GALERIA DE FOTOS
GALERIA DE FOTOSGALERIA DE FOTOS
GALERIA DE FOTOSduquesan
 
Treball en grup 2
Treball en grup 2Treball en grup 2
Treball en grup 2fytboll
 
Karen .. manu rosi y lupi expo de sistema
Karen .. manu rosi y lupi expo de sistemaKaren .. manu rosi y lupi expo de sistema
Karen .. manu rosi y lupi expo de sistemakarendgarcia1995
 
La descripción
La descripciónLa descripción
La descripciónjonaydiaz
 
Relajate, escucha mira_y_admira
Relajate, escucha mira_y_admiraRelajate, escucha mira_y_admira
Relajate, escucha mira_y_admirapatopuga75
 

Andere mochten auch (20)

Ruta kananga memorias de africa confort
Ruta kananga memorias de africa  confortRuta kananga memorias de africa  confort
Ruta kananga memorias de africa confort
 
Red de redes
Red de redesRed de redes
Red de redes
 
Benutzerhandbuch Zeta Producer 9 CMS
Benutzerhandbuch Zeta Producer 9 CMSBenutzerhandbuch Zeta Producer 9 CMS
Benutzerhandbuch Zeta Producer 9 CMS
 
Presentació lev manovich pr1 1
Presentació lev manovich pr1 1Presentació lev manovich pr1 1
Presentació lev manovich pr1 1
 
Documento electrónico (1)
Documento electrónico (1)Documento electrónico (1)
Documento electrónico (1)
 
Animals
AnimalsAnimals
Animals
 
El grupo fation widhon
El grupo fation widhonEl grupo fation widhon
El grupo fation widhon
 
Ruta kananga memorias de áfrica aventura
Ruta kananga memorias de áfrica aventuraRuta kananga memorias de áfrica aventura
Ruta kananga memorias de áfrica aventura
 
Circular no. 07
Circular no. 07Circular no. 07
Circular no. 07
 
Normas de comportamiento 6a
Normas de comportamiento 6aNormas de comportamiento 6a
Normas de comportamiento 6a
 
Has dejado mi barca
Has dejado mi barcaHas dejado mi barca
Has dejado mi barca
 
GALERIA DE FOTOS
GALERIA DE FOTOSGALERIA DE FOTOS
GALERIA DE FOTOS
 
Treball en grup 2
Treball en grup 2Treball en grup 2
Treball en grup 2
 
Hereandnow
HereandnowHereandnow
Hereandnow
 
Karen .. manu rosi y lupi expo de sistema
Karen .. manu rosi y lupi expo de sistemaKaren .. manu rosi y lupi expo de sistema
Karen .. manu rosi y lupi expo de sistema
 
Verdummung
VerdummungVerdummung
Verdummung
 
La descripción
La descripciónLa descripción
La descripción
 
El calentamiento global
El calentamiento globalEl calentamiento global
El calentamiento global
 
El conectivismo
El conectivismoEl conectivismo
El conectivismo
 
Relajate, escucha mira_y_admira
Relajate, escucha mira_y_admiraRelajate, escucha mira_y_admira
Relajate, escucha mira_y_admira
 

Ähnlich wie Responsive (web)design

Responsive Design
Responsive DesignResponsive Design
Responsive DesignMario Fink
 
Die mobile Herausforderung
Die mobile Herausforderung Die mobile Herausforderung
Die mobile Herausforderung Martin Reiher
 
Mobile Dokumentation auf Tablet-PCs und Smartphones mithilfe von Apps
Mobile Dokumentation auf Tablet-PCs und Smartphones mithilfe von AppsMobile Dokumentation auf Tablet-PCs und Smartphones mithilfe von Apps
Mobile Dokumentation auf Tablet-PCs und Smartphones mithilfe von AppsGeorg Eck
 
Webinar mobile
Webinar mobileWebinar mobile
Webinar mobilekovalenz
 
Mobile Facts 2013: Apps & Websites
Mobile Facts 2013: Apps & WebsitesMobile Facts 2013: Apps & Websites
Mobile Facts 2013: Apps & WebsitesAdrian Oggenfuss
 
28 11-2014-inovex-pressemitteilung-webinar-android-lollipop
28 11-2014-inovex-pressemitteilung-webinar-android-lollipop28 11-2014-inovex-pressemitteilung-webinar-android-lollipop
28 11-2014-inovex-pressemitteilung-webinar-android-lollipopinovex GmbH
 
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)denkwerk GmbH
 
Welcome App Germany Präsentation - Neuerungen
Welcome App Germany Präsentation - NeuerungenWelcome App Germany Präsentation - Neuerungen
Welcome App Germany Präsentation - NeuerungenArmin Reuter
 
Wunderman Whitepaper - Responsive Design
Wunderman Whitepaper - Responsive DesignWunderman Whitepaper - Responsive Design
Wunderman Whitepaper - Responsive DesignWunderman GmbH
 
2016 - Mobile Revolution - Fachvortrag an der FHS St.Gallen.
 2016 - Mobile Revolution - Fachvortrag an der FHS St.Gallen. 2016 - Mobile Revolution - Fachvortrag an der FHS St.Gallen.
2016 - Mobile Revolution - Fachvortrag an der FHS St.Gallen.Johannes Waibel
 
IT-Ringvorlesung - Präsentation Unister
IT-Ringvorlesung - Präsentation UnisterIT-Ringvorlesung - Präsentation Unister
IT-Ringvorlesung - Präsentation UnisterEmpfehlungsbund
 
SEO Webinar "Alles mobile oder was? So funktioniert Googles Mobile First Index."
SEO Webinar "Alles mobile oder was? So funktioniert Googles Mobile First Index."SEO Webinar "Alles mobile oder was? So funktioniert Googles Mobile First Index."
SEO Webinar "Alles mobile oder was? So funktioniert Googles Mobile First Index."Namics
 
Google Glass. Wearables. Oculus Rift. Innovation. Namics.
Google Glass. Wearables. Oculus Rift. Innovation. Namics.Google Glass. Wearables. Oculus Rift. Innovation. Namics.
Google Glass. Wearables. Oculus Rift. Innovation. Namics.Milos Radovic
 

Ähnlich wie Responsive (web)design (20)

Responsive Design
Responsive DesignResponsive Design
Responsive Design
 
Die mobile Herausforderung
Die mobile Herausforderung Die mobile Herausforderung
Die mobile Herausforderung
 
Mobile Dokumentation auf Tablet-PCs und Smartphones mithilfe von Apps
Mobile Dokumentation auf Tablet-PCs und Smartphones mithilfe von AppsMobile Dokumentation auf Tablet-PCs und Smartphones mithilfe von Apps
Mobile Dokumentation auf Tablet-PCs und Smartphones mithilfe von Apps
 
Webinar mobile
Webinar mobileWebinar mobile
Webinar mobile
 
Mobile Facts 2013: Apps & Websites
Mobile Facts 2013: Apps & WebsitesMobile Facts 2013: Apps & Websites
Mobile Facts 2013: Apps & Websites
 
28 11-2014-inovex-pressemitteilung-webinar-android-lollipop
28 11-2014-inovex-pressemitteilung-webinar-android-lollipop28 11-2014-inovex-pressemitteilung-webinar-android-lollipop
28 11-2014-inovex-pressemitteilung-webinar-android-lollipop
 
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
 
Welcome App Germany Präsentation - Neuerungen
Welcome App Germany Präsentation - NeuerungenWelcome App Germany Präsentation - Neuerungen
Welcome App Germany Präsentation - Neuerungen
 
Mobile Applikationen: Idee, Konzeption, Architektur - Erfolgreicher Start für...
Mobile Applikationen: Idee, Konzeption, Architektur - Erfolgreicher Start für...Mobile Applikationen: Idee, Konzeption, Architektur - Erfolgreicher Start für...
Mobile Applikationen: Idee, Konzeption, Architektur - Erfolgreicher Start für...
 
Wunderman Whitepaper - Responsive Design
Wunderman Whitepaper - Responsive DesignWunderman Whitepaper - Responsive Design
Wunderman Whitepaper - Responsive Design
 
Responsive Web Design am Beispiel von Virato (Social News Aggregator)
Responsive Web Design am Beispiel von Virato (Social News Aggregator)Responsive Web Design am Beispiel von Virato (Social News Aggregator)
Responsive Web Design am Beispiel von Virato (Social News Aggregator)
 
Phonegap App Entwicklung
Phonegap App EntwicklungPhonegap App Entwicklung
Phonegap App Entwicklung
 
2016 - Mobile Revolution - Fachvortrag an der FHS St.Gallen.
 2016 - Mobile Revolution - Fachvortrag an der FHS St.Gallen. 2016 - Mobile Revolution - Fachvortrag an der FHS St.Gallen.
2016 - Mobile Revolution - Fachvortrag an der FHS St.Gallen.
 
Responsive design
Responsive designResponsive design
Responsive design
 
Digitale Mobilmachung - Wege zum mobilen Internetangebot
Digitale Mobilmachung - Wege zum mobilen Internetangebot Digitale Mobilmachung - Wege zum mobilen Internetangebot
Digitale Mobilmachung - Wege zum mobilen Internetangebot
 
IT-Ringvorlesung - Präsentation Unister
IT-Ringvorlesung - Präsentation UnisterIT-Ringvorlesung - Präsentation Unister
IT-Ringvorlesung - Präsentation Unister
 
SEO Webinar "Alles mobile oder was? So funktioniert Googles Mobile First Index."
SEO Webinar "Alles mobile oder was? So funktioniert Googles Mobile First Index."SEO Webinar "Alles mobile oder was? So funktioniert Googles Mobile First Index."
SEO Webinar "Alles mobile oder was? So funktioniert Googles Mobile First Index."
 
Google Glass. Wearables. Oculus Rift. Innovation. Namics.
Google Glass. Wearables. Oculus Rift. Innovation. Namics.Google Glass. Wearables. Oculus Rift. Innovation. Namics.
Google Glass. Wearables. Oculus Rift. Innovation. Namics.
 
Phonegap Agentur
Phonegap AgenturPhonegap Agentur
Phonegap Agentur
 
Social Media - Quo Vadis
Social Media - Quo VadisSocial Media - Quo Vadis
Social Media - Quo Vadis
 

Responsive (web)design