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 confort
KANANGAviajes
 
Red de redes
Red de redesRed de redes
Red de redes
ezeypablito
 
Benutzerhandbuch Zeta Producer 9 CMS
Benutzerhandbuch Zeta Producer 9 CMSBenutzerhandbuch Zeta Producer 9 CMS
Benutzerhandbuch Zeta Producer 9 CMS
Uwe Keim
 
Presentació lev manovich pr1 1
Presentació lev manovich pr1 1Presentació lev manovich pr1 1
Presentació lev manovich pr1 1
chanson27
 
Documento electrónico (1)
Documento electrónico (1)Documento electrónico (1)
Documento electrónico (1)
strellaitzel
 
Animals
AnimalsAnimals
Animals
rebecafresno
 
El grupo fation widhon
El grupo fation widhonEl grupo fation widhon
El grupo fation widhon
vivi_
 
Ruta kananga memorias de áfrica aventura
Ruta kananga memorias de áfrica aventuraRuta kananga memorias de áfrica aventura
Ruta kananga memorias de áfrica aventura
KANANGAviajes
 
Circular no. 07
Circular no. 07Circular no. 07
Circular no. 07
María Suárez de Pino
 
Normas de comportamiento 6a
Normas de comportamiento 6aNormas de comportamiento 6a
Normas de comportamiento 6a
juachisatehortuacsj
 
Has dejado mi barca
Has dejado mi barcaHas dejado mi barca
Has dejado mi barca
Albino Rojas
 
GALERIA DE FOTOS
GALERIA DE FOTOSGALERIA DE FOTOS
GALERIA DE FOTOS
duquesan
 
Treball en grup 2
Treball en grup 2Treball en grup 2
Treball en grup 2
fytboll
 
Hereandnow
HereandnowHereandnow
Hereandnow
Andreas Klisch
 
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
karendgarcia1995
 
La descripción
La descripciónLa descripción
La descripción
jonaydiaz
 
El calentamiento global
El calentamiento globalEl calentamiento global
El calentamiento global
instituto jose antonio galan
 
El conectivismo
El conectivismoEl conectivismo
El conectivismo
Randon del Monte
 
Relajate, escucha mira_y_admira
Relajate, escucha mira_y_admiraRelajate, escucha mira_y_admira
Relajate, escucha mira_y_admira
patopuga75
 

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 Design
Mario 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 Apps
Georg Eck
 
Webinar mobile
Webinar mobileWebinar mobile
Webinar mobile
kovalenz
 
Mobile Facts 2013: Apps & Websites
Mobile Facts 2013: Apps & WebsitesMobile Facts 2013: Apps & Websites
Mobile Facts 2013: Apps & Websites
Adrian 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-lollipop
inovex 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 - Neuerungen
Armin Reuter
 
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...
IKS Gesellschaft für Informations- und Kommunikationssysteme mbH
 
Wunderman Whitepaper - Responsive Design
Wunderman Whitepaper - Responsive DesignWunderman Whitepaper - Responsive Design
Wunderman Whitepaper - Responsive Design
Wunderman GmbH
 
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)
curtis newton gmbh (formerly known as dw capital gmbh)
 
Phonegap App Entwicklung
Phonegap App EntwicklungPhonegap App Entwicklung
Phonegap App Entwicklung
heliossolutionsde
 
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
 
Responsive design
Responsive designResponsive design
Responsive design
Thomas Bähr
 
Digitale Mobilmachung - Wege zum mobilen Internetangebot
Digitale Mobilmachung - Wege zum mobilen Internetangebot Digitale Mobilmachung - Wege zum mobilen Internetangebot
Digitale Mobilmachung - Wege zum mobilen Internetangebot
Mann beißt Hund Agentur für Kommunikation
 
IT-Ringvorlesung - Präsentation Unister
IT-Ringvorlesung - Präsentation UnisterIT-Ringvorlesung - Präsentation Unister
IT-Ringvorlesung - Präsentation Unister
Empfehlungsbund
 
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
 
Phonegap Agentur
Phonegap AgenturPhonegap Agentur
Phonegap Agentur
Elita Barteaux
 
Social Media - Quo Vadis
Social Media - Quo VadisSocial Media - Quo Vadis
Social Media - Quo Vadis
Prof. Dr. Manfred Leisenberg
 

Ä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