SlideShare ist ein Scribd-Unternehmen logo
Responsive Design

Wir machen unsere Seite einfach mit Responsive Design
         und erschließen den mobilen Markt!




             Ist es wirklich so einfach?

                     Thomas Bähr
Warum mobiles Design?

               Hat Ihre Firma schon spezielle Seiten für mobile Geräte?

                 ●   Anteil an Seitenaufrufen mit mobilen Geräten 5-15%
                 ●   Anzahl mobiler Endgeräte nimmt zu
                 ●   Surfverhalten verändert sich Richtung Mobile
                 ●   2011 – Marktanteile mobile Betriebssysteme ca. 60%
               Siehe auch Onlinemarketing.de
               Jahrelang galt für Marketer: Zuerst kommt der Desktop, Mobile spielt nur
                eine kleine Rolle. Doch das wird sich ändern.

18. Dez 2012                              Responsive Design - Thomas Bähr                 2
Marktanteile - Betriebssysteme




                    Quelle: http://venturebeat.com/2012/12/03/mary-meeker-releases-stunning-data-on-the-state-of-the-internet/


18. Dez 2012                                   Responsive Design - Thomas Bähr                                                   3
Mobile Nutzer erreichen!

         Normale                 Mobile                    Responsive                           Applikation               Native
         Webseite               Webseite                     Design                             Generator                Applikation
     ●   Kein Aufwand      ●   Separate Lösung      ●   Einheitliches Look & Feel         ●   Wenig IOS/Android      ●   Alle Features
     ●   Keine Kosten      ●   speziell anpassbar   ●   1 Seite für alle Devices              Know-How notwendig         des Gerätes
                               für mobile Geräte                                          ●   Entwicklung 1              nutzbar
                                                    ●   Kein IOS/Android
                           ●   Unterschiedliche         Wissen notwendig                      Sourcecodes für        ●   Interaktion mit
                               Release Zyklen                                                 mehrere Systeme            Nutzer möglich
                               möglich                                                    ●   Viele Systemfeatures   ●   Push
                                                                                              nutzbar                    Nachrichten
                                                                                          ●   Push Nachrichten
     ●   Darstellung auf   ●   Doppelter Aufwand    ●   Hoher Planungs                    ●   Kompatibilitäts-       ●   Kostenintensive
         mobilen               für Pflege und QA        aufwand                               probleme                   Entwicklung für
         Geräten           ●   unterschiedliches    ●   Hoher QA Aufwand                  ●   Einarbeitung in            IOS und Android
         mangelhaft            Layout (Look &                                                 Generator              ●   Langsame
                                                    ●   Entwicklung neuer
     ●   für mobile User       Feel)                    Feature verlangsamt                                              Entwicklung
         unfreundlich


18. Dez 2012                                            Responsive Design - Thomas Bähr                                                    4
Was ist Responsive Design?

     ●   Praxis in der Web Entwicklung
     ●   reaktionsfähiges Webdesign
     ●   1 Webseite für alle Geräte ( Desktop & Mobile )
     ●   Strukturierung einzelner Elemente dynamisch
     ●   Berücksichtigt das betrachtende Gerät
     ●   Basis sind neueste Webstandards wie HTML5 und CSS3.



18. Dez 2012                      Responsive Design - Thomas Bähr   5
Beispiel - Smartphone




18. Dez 2012         Responsive Design - Thomas Bähr   6
Beispiel - Tablet




18. Dez 2012      Responsive Design - Thomas Bähr   7
Beispiel – Desktop




18. Dez 2012       Responsive Design - Thomas Bähr   8
Beispiel – Checkout




18. Dez 2012        Responsive Design - Thomas Bähr   9
Beispiel – Responsive Elemente ?

     ●   Anzahl der Produkte in einer Reihe
     ●   Anordnung der Elemente im Header
     ●   Symbole und Links der Hauptnavigation
     ●   Anordnung der Navigation
     ●   Kategorien und Filter
     ●   Breadcrumb Navigation



18. Dez 2012                     Responsive Design - Thomas Bähr   10
Die Phasen

               Wichtige Schritte in den einzelnen Phasen der Umsetzung
                                      Planung
                                  Entwurf / Design
                                    Entwicklung
                                    QA / Testing


                              Und was zu beachten ist.



18. Dez 2012                         Responsive Design - Thomas Bähr     11
Planung

     ●     Browserunterstützung (< IE9 nur mit JS)
     ●     Festlegung der Auflösungen (Desktop, Pads, Phone - s.a. Anhang)
     ●     Content Planung - Anordnung in den Auflösungen
     ●     Erstellung eines Fluid-Grids. (Raster für Umbrüche)
     ●     Image Größen / Resizing ( z.B. Produktbilder )
     ●     Javascript Frameworks ( JQuery (mobile) )
     ●     Welche Social Plugins (Facebook, Twitter, Google) – Layout!


18. Dez 2012                       Responsive Design - Thomas Bähr           12
Entwurf & Design

     ●    Erstellung eines Styleguides / CI Manual (Font, Buttons, Farben)
     ●    Aufbau des Basisgrids als Ausgangsvorlage
     ●    Designen von Screens für alle wichtigen Seiten der Webpräsenz
          für alle Auflösungen (Grid Beachten!)
     ●    Erstellung von Mockups von wichtigen UI-Elementen
     ●    Flussdiagramme für primäre Abläufe unter Berücksichtigung der
          verschiedenen Auflösungen
     ●    Usability beachten – besonders auch für mobile Geräte



18. Dez 2012                        Responsive Design - Thomas Bähr          13
Entwicklung

     ●     Aufsetzen des gewünschten Grid mit dem Bootstrap
     ●     Aufbau Header & Footer inkl. ersten Tests mit allen Auflösungen
     ●     Erstellung des Content entsprechend Screen und Mockups
     ●     Image Loader in Abhängigkeit von Viewport (z.b. Produktbilder)
     ●     Unterschiedliche Zoom-/Blätterfunktionen ( Swipe, Click)
     ●     Permanentes Testing in allen Auflösungen
     ●     Ladeverhalten Bilder, Scripte auf mobilen Geräten (ohne WLAN!)


18. Dez 2012                       Responsive Design - Thomas Bähr           14
Quality Assurance

     ●     Abnahme der Seite wie bisher in allen Browsern (IE-Chrome)
     ●     Abnahme auf IOS Geräten ( IPad, IPhone)
     ●     Abnahme auf Android Geräten ( HTC, Samsung, Nexus 7)
     ●     Ladeverhalten auf mobilen Geräten ohne WLAN
     ●     Overlays, JS auf mobilen Geräten




18. Dez 2012                      Responsive Design - Thomas Bähr       15
Resume

   Für wen ist Responsive Design interessant?

   ●   Webseite soll erneuert werden
   ●   Einheitliches Look & Feel (CI) wichtig
   ●   Keine Kapazitäten für App Entwickler vorhanden
   ●   Website unterliegt keinen ständigen, größeren Änderungen




18. Dez 2012                     Responsive Design - Thomas Bähr   16
Q&A

                       Frage & Antworten


                 Ihre Fragen zum Thema ?
                    Ihre Anmerkungen ?


               Danke für Ihre Aufmerksamkeit !



18. Dez 2012           Responsive Design - Thomas Bähr   17
Nützliche Links
Tools:
 Balsamiq Mockup Tool    http://www.balsamiq.com/
 Twitter CSS Framework   http://de.wikipedia.org/wiki/Bootstrap_(Framework)
 Compass CSS Framework   http://compass-style.org/
 Respond.js              https://github.com/scottjehl/Respond

Addons Firefox:
 Responsinator           http://www.responsinator.com/
 Web-Developer Toolbar   https://addons.mozilla.org/de/firefox/addon/web-developer/developers


Application SDK:
 PhoneGap                http://en.wikipedia.org/wiki/PhoneGap
 Titanium                http://www.appcelerator.com/platform/titanium-sdk




18. Dez 2012                                 Responsive Design - Thomas Bähr                    18
Anhang: Responsive mit dem CMS?

      ●    WordPress: Reveal Responsive Theme
      ●    Drupal: Omega Responsive Theme
      ●    Joomla: Anleitung Responsive für Joomla
      ●    Typo3: Anleitung Responsive mit Typo3
      ●    Magento: Responsive Design Tutorial




18. Dez 2012                     Responsive Design - Thomas Bähr   19
Anhang: Auflösungen
Resolution                   Devices                    Resolution                     Devices                          Resolution                        Devices                Resolution                      Devices

320 x 240               Blackberry Curve                854 x 480     Sony Ericsson Xperia Arc, Arc S, X10, J &         1280 x 768             Samsung Galaxy Tab 10.1           1680 x 1050     20-inch Apple iMac 4,1 / 5,1 / 7,1 / 8,1 /
                        Samsung Tocco                                                    U                                                             Nexus 4                                        9,1 (Early 2006 - Early 2009) 
                          HTC Wildfire                                               Nokia N9                                                      Nokia Lumia 920
                            Nokia E71                                   Motorola Milestone and Milestone 2                                 LG Optimus G & LG Optimus 4X HD
                      Very common low res                                          Sony Xperia J

400 x 240     Many generic feature phones including:    960 x 540          HTC Sensation HTC Evo 3D                     1280 x 800            Samsung Galaxy Tab 7.1 & 8.9       1920 x 1080     Large 16:9 desktop screen resolution
                     Samsung Star & Star II                             Motorola Bionic, Atrix & Droid RAZR                                        Samsung Galaxy                                21.5-inch Apple iMac 10,1 / 11,2 / 12,1
                                                                           Motorola RAZR i & Photon Q                                                  Nexus 7                                           (Late 2009 - Mid 2011)
                                                                                    HTC One S                                                       Kindle Fire HD                               Microsoft Surface with Windows 8 Pro

480 x 320            Apple iPhone 3G & 3GS              960 x 640               Apple iPhone 4 & 4S                     1280 x 1024           Standard 4:3 desktop screen        1920 x 1200   24-inch Apple iMac 6,1 / 7,1 / 8,1 / 9,1(Late
                 Apple iPod touch (1st, 2nd & 3rd                        Apple iPod Touch (4th generation)                                             resolution                                          2006 - Early 2009)
                           generation)                                                                                                                                                               Asus Transformer Pad Infinity
                      Samsung Galaxy Ace
                          HTC Desire C

480 x 360     BlackBerry Curve, Storm, Torch 9800 &     1136 x 640                Apple iPhone 5                        1366 x 768            11.6 inch Apple Macbook Air        2048 x 1536                   Apple iPad 3
                          Bold incl. 9700                                Apple iPod Touch (5th generation)                                        Small 16:9 resolution
                       Sony Ericsson Vivaz                                                                                                          Microsoft Surface
                                                                                                                                             Samsung Series 3 Chromebook

640 x 360    Nokia N8, N97, E7 and X6 amongst others    1024 x 600       Standard netbook/tablet resolution             1440 x 900             13.3 inch Apple Macbook Air       2560 x 1440   27-inch Apple iMac 10,2 / 11,1 / 11,3 / 12,2
                                                                                     includes:                                                                                                            (Late 2009 - 2012) 
                                                                                Amazon Kindle Fire
                                                                               Viewsonic Viewpad 10
                                                                               Samsung Galaxy Tab

640 x 480       Blackberry Bold 9900 & Torch 9810       1024 x 768                Apple iPad 1& 2                       1600 x 900              13 inch Apple Macbook Air        2560 x 1600    13-inch Apple MacBook Pro with Retina
                                                                                   HP TouchPad                                                                                                                  display
                                                                                  Apple iPad Mini                                                                                                              Nexus 10

800 x 480      Samsung Galaxy I, II and S Samsung       1280 x 720            Samsung Galaxy Nexus                     1600 x 1200         Large 4:3 desktop screen resolution   2880 x 1800    15-inch Apple MacBook Pro with Retina
                             Nexus S                                              Sony Xperia S                                                                                                                display
             HTC Desire, Desire HD, Desire S & Desire                          Samsung Galaxy S III
                                X                                             Samsung Galaxy Note II
                   HTC Evo HTC Sensation XL                                  HTC Windows Phone 8X/S
                           HTC One V                                           HTC One X & X+ & XL 
                     Nokia Lumia 800 & 900
                                                                              Quelle: http://spirelightmedia.com/responsive-design-device-resolution-reference
  18. Dez 2012                                                                              Responsive Design - Thomas Bähr                                                                                                                    20
Quellen

   Responsive Design

     http://de.wikipedia.org/wiki/Responsive_Design

     http://gabesumner.com/how-many-web-browsers-support-responsive-design



   Buchtipp:

    http://www.hanser-fachbuch.de/buch/Responsive+Webdesign/9783446430150




18. Dez 2012                                          Responsive Design - Thomas Bähr   21

Weitere ähnliche Inhalte

Was ist angesagt?

Die Android Plattform
Die Android PlattformDie Android Plattform
Die Android Plattform
Moritz Haarmann
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
Connected-Blog
 
Erstellung von mobilen cross-platform-Apps
Erstellung von mobilen cross-platform-AppsErstellung von mobilen cross-platform-Apps
Erstellung von mobilen cross-platform-Apps
Ralf Lütke
 
Start small, think big - Responsive Web Design
Start small, think big - Responsive Web DesignStart small, think big - Responsive Web Design
Start small, think big - Responsive Web Design
intuio GmbH
 
IA Konferenz München 2011
IA Konferenz München 2011IA Konferenz München 2011
IA Konferenz München 2011
Alexander Beck
 
Cross Plattform Entwicklung für Mobile Anwendungen
Cross Plattform Entwicklung für Mobile AnwendungenCross Plattform Entwicklung für Mobile Anwendungen
Cross Plattform Entwicklung für Mobile Anwendungen
Markus Eiglsperger
 
Einfluss der Endgeräte-Innovationen auf technische Realisierung netzbasierter...
Einfluss der Endgeräte-Innovationen auf technische Realisierung netzbasierter...Einfluss der Endgeräte-Innovationen auf technische Realisierung netzbasierter...
Einfluss der Endgeräte-Innovationen auf technische Realisierung netzbasierter...Alexej Antropov
 
Anforderungen an das Touchscreen-Design
Anforderungen an das Touchscreen-DesignAnforderungen an das Touchscreen-Design
Anforderungen an das Touchscreen-Design
soultank AG
 
Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites
Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler WebsitesHandliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites
Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler WebsitesPeter Rozek
 

Was ist angesagt? (9)

Die Android Plattform
Die Android PlattformDie Android Plattform
Die Android Plattform
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Erstellung von mobilen cross-platform-Apps
Erstellung von mobilen cross-platform-AppsErstellung von mobilen cross-platform-Apps
Erstellung von mobilen cross-platform-Apps
 
Start small, think big - Responsive Web Design
Start small, think big - Responsive Web DesignStart small, think big - Responsive Web Design
Start small, think big - Responsive Web Design
 
IA Konferenz München 2011
IA Konferenz München 2011IA Konferenz München 2011
IA Konferenz München 2011
 
Cross Plattform Entwicklung für Mobile Anwendungen
Cross Plattform Entwicklung für Mobile AnwendungenCross Plattform Entwicklung für Mobile Anwendungen
Cross Plattform Entwicklung für Mobile Anwendungen
 
Einfluss der Endgeräte-Innovationen auf technische Realisierung netzbasierter...
Einfluss der Endgeräte-Innovationen auf technische Realisierung netzbasierter...Einfluss der Endgeräte-Innovationen auf technische Realisierung netzbasierter...
Einfluss der Endgeräte-Innovationen auf technische Realisierung netzbasierter...
 
Anforderungen an das Touchscreen-Design
Anforderungen an das Touchscreen-DesignAnforderungen an das Touchscreen-Design
Anforderungen an das Touchscreen-Design
 
Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites
Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler WebsitesHandliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites
Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites
 

Andere mochten auch

Practicas
PracticasPracticas
Practicas
Joana_Barragan
 
Medio ambiente
Medio ambienteMedio ambiente
Medio ambiente
lorena940510
 
Ruta del canal gugurrones y laguna reforma
Ruta del canal gugurrones y laguna reformaRuta del canal gugurrones y laguna reforma
Ruta del canal gugurrones y laguna reforma
Pascual Zárate
 
Cap11 transporte urbano
Cap11 transporte urbanoCap11 transporte urbano
Cap11 transporte urbano
Josue Flores
 
ARTISTES
ARTISTESARTISTES
ARTISTES
a8061142
 
Precentacion del agua
Precentacion del aguaPrecentacion del agua
Precentacion del agua
maeu2910
 
Convenio ASOGOPAL GPL diciembre 2013
Convenio ASOGOPAL GPL diciembre 2013Convenio ASOGOPAL GPL diciembre 2013
Convenio ASOGOPAL GPL diciembre 2013
Asociación Asogopal
 
Betty
BettyBetty
Reformajuarez
ReformajuarezReformajuarez
Reformajuarez
indiodeguelatao
 
ciberdelitos
ciberdelitosciberdelitos
ciberdelitos
christian_bena
 
Skittles Kampagne
Skittles KampagneSkittles Kampagne
Skittles Kampagnetinkarrr
 
Descrición de persoas
Descrición de persoasDescrición de persoas
Descrición de persoas
María Sánchez
 
Contextual Inquiry - Weshalb beobachten besser ist als fragen
Contextual Inquiry - Weshalb beobachten besser ist als fragenContextual Inquiry - Weshalb beobachten besser ist als fragen
Contextual Inquiry - Weshalb beobachten besser ist als fragen
Zeix AG
 
Identidad Visual Corporativa ASOGOPAL
Identidad Visual Corporativa ASOGOPALIdentidad Visual Corporativa ASOGOPAL
Identidad Visual Corporativa ASOGOPAL
Asociación Asogopal
 
Lebenslanges Karrieremanagement
Lebenslanges KarrieremanagementLebenslanges Karrieremanagement
Lebenslanges Karrieremanagement
8careers
 
GWAVACon 2015: GWAVA - EXCHANGE ARCHIVIERUNG
GWAVACon 2015: GWAVA - EXCHANGE ARCHIVIERUNGGWAVACon 2015: GWAVA - EXCHANGE ARCHIVIERUNG
GWAVACon 2015: GWAVA - EXCHANGE ARCHIVIERUNG
GWAVA
 
Taller de libros electrónicos
Taller de libros electrónicosTaller de libros electrónicos
Taller de libros electrónicos
Ibon Basaras
 
Las formas de representación
Las formas de representaciónLas formas de representación
Las formas de representación
Grisel Pereyra
 
Dn12 u3 a14_lsr
Dn12 u3 a14_lsrDn12 u3 a14_lsr
Dn12 u3 a14_lsr
rubi_lopez
 

Andere mochten auch (20)

Practicas
PracticasPracticas
Practicas
 
Smosblogavond
SmosblogavondSmosblogavond
Smosblogavond
 
Medio ambiente
Medio ambienteMedio ambiente
Medio ambiente
 
Ruta del canal gugurrones y laguna reforma
Ruta del canal gugurrones y laguna reformaRuta del canal gugurrones y laguna reforma
Ruta del canal gugurrones y laguna reforma
 
Cap11 transporte urbano
Cap11 transporte urbanoCap11 transporte urbano
Cap11 transporte urbano
 
ARTISTES
ARTISTESARTISTES
ARTISTES
 
Precentacion del agua
Precentacion del aguaPrecentacion del agua
Precentacion del agua
 
Convenio ASOGOPAL GPL diciembre 2013
Convenio ASOGOPAL GPL diciembre 2013Convenio ASOGOPAL GPL diciembre 2013
Convenio ASOGOPAL GPL diciembre 2013
 
Betty
BettyBetty
Betty
 
Reformajuarez
ReformajuarezReformajuarez
Reformajuarez
 
ciberdelitos
ciberdelitosciberdelitos
ciberdelitos
 
Skittles Kampagne
Skittles KampagneSkittles Kampagne
Skittles Kampagne
 
Descrición de persoas
Descrición de persoasDescrición de persoas
Descrición de persoas
 
Contextual Inquiry - Weshalb beobachten besser ist als fragen
Contextual Inquiry - Weshalb beobachten besser ist als fragenContextual Inquiry - Weshalb beobachten besser ist als fragen
Contextual Inquiry - Weshalb beobachten besser ist als fragen
 
Identidad Visual Corporativa ASOGOPAL
Identidad Visual Corporativa ASOGOPALIdentidad Visual Corporativa ASOGOPAL
Identidad Visual Corporativa ASOGOPAL
 
Lebenslanges Karrieremanagement
Lebenslanges KarrieremanagementLebenslanges Karrieremanagement
Lebenslanges Karrieremanagement
 
GWAVACon 2015: GWAVA - EXCHANGE ARCHIVIERUNG
GWAVACon 2015: GWAVA - EXCHANGE ARCHIVIERUNGGWAVACon 2015: GWAVA - EXCHANGE ARCHIVIERUNG
GWAVACon 2015: GWAVA - EXCHANGE ARCHIVIERUNG
 
Taller de libros electrónicos
Taller de libros electrónicosTaller de libros electrónicos
Taller de libros electrónicos
 
Las formas de representación
Las formas de representaciónLas formas de representación
Las formas de representación
 
Dn12 u3 a14_lsr
Dn12 u3 a14_lsrDn12 u3 a14_lsr
Dn12 u3 a14_lsr
 

Ähnlich wie Responsive design

Responsive Design by Peter Grosskopf
Responsive Design by Peter GrosskopfResponsive Design by Peter Grosskopf
Responsive Design by Peter Grosskopf
Peter Grosskopf
 
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
 
Webinar mobile
Webinar mobileWebinar mobile
Webinar mobilekovalenz
 
Going Mobile: Überblick über Mobile Web
Going Mobile: Überblick über Mobile WebGoing Mobile: Überblick über Mobile Web
Going Mobile: Überblick über Mobile Webch.ch
 
Responsive Design
Responsive DesignResponsive Design
Responsive Design
Mario Fink
 
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
 
Responsive Webdesign Process
Responsive Webdesign ProcessResponsive Webdesign Process
Responsive Webdesign Process
Sven Wolfermann
 
Niemals nach Mitternacht füttern - Grüne Roboter überall!
Niemals nach Mitternacht füttern - Grüne Roboter überall!Niemals nach Mitternacht füttern - Grüne Roboter überall!
Niemals nach Mitternacht füttern - Grüne Roboter überall!
inovex GmbH
 
Mobile Applikationen: Entwicklung, Rollout, Wartung - Tipps und Tricks für di...
Mobile Applikationen: Entwicklung, Rollout, Wartung - Tipps und Tricks für di...Mobile Applikationen: Entwicklung, Rollout, Wartung - Tipps und Tricks für di...
Mobile Applikationen: Entwicklung, Rollout, Wartung - Tipps und Tricks für di...
IKS Gesellschaft für Informations- und Kommunikationssysteme mbH
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWD
Conny Stier
 
Progressive Web Apps mit Angular
Progressive Web Apps mit AngularProgressive Web Apps mit Angular
Progressive Web Apps mit Angular
Jens Binfet
 
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
 
Die mobile Herausforderung
Die mobile Herausforderung Die mobile Herausforderung
Die mobile Herausforderung
Martin Reiher
 
My application as webdesigner and front-end developer
My application as webdesigner and front-end developerMy application as webdesigner and front-end developer
My application as webdesigner and front-end developerchristianschweinhardt
 
Responsive Websites aus SEO-Sicht – MobileTechCon 2016
Responsive Websites aus SEO-Sicht – MobileTechCon 2016Responsive Websites aus SEO-Sicht – MobileTechCon 2016
Responsive Websites aus SEO-Sicht – MobileTechCon 2016
André Scharf
 
Hybride Entwicklung mit Ionic
Hybride Entwicklung mit IonicHybride Entwicklung mit Ionic
Hybride Entwicklung mit Ionic
Lukas Leander Rosenstock
 
10 do’s und dont’s der gestaltung mobiler anwendungen
10 do’s und dont’s der gestaltung mobiler anwendungen10 do’s und dont’s der gestaltung mobiler anwendungen
10 do’s und dont’s der gestaltung mobiler anwendungenONE Schweiz
 
Responsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, QualitätResponsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, QualitätPeter Rozek
 
jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)
die.agilen GmbH
 
Responsive goes Agile!
Responsive goes Agile!Responsive goes Agile!
Responsive goes Agile!
Dirk Pogrzeba
 

Ähnlich wie Responsive design (20)

Responsive Design by Peter Grosskopf
Responsive Design by Peter GrosskopfResponsive Design by Peter Grosskopf
Responsive Design by Peter Grosskopf
 
Digitale Mobilmachung - Wege zum mobilen Internetangebot
Digitale Mobilmachung - Wege zum mobilen Internetangebot Digitale Mobilmachung - Wege zum mobilen Internetangebot
Digitale Mobilmachung - Wege zum mobilen Internetangebot
 
Webinar mobile
Webinar mobileWebinar mobile
Webinar mobile
 
Going Mobile: Überblick über Mobile Web
Going Mobile: Überblick über Mobile WebGoing Mobile: Überblick über Mobile Web
Going Mobile: Überblick über Mobile Web
 
Responsive Design
Responsive DesignResponsive Design
Responsive Design
 
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)
 
Responsive Webdesign Process
Responsive Webdesign ProcessResponsive Webdesign Process
Responsive Webdesign Process
 
Niemals nach Mitternacht füttern - Grüne Roboter überall!
Niemals nach Mitternacht füttern - Grüne Roboter überall!Niemals nach Mitternacht füttern - Grüne Roboter überall!
Niemals nach Mitternacht füttern - Grüne Roboter überall!
 
Mobile Applikationen: Entwicklung, Rollout, Wartung - Tipps und Tricks für di...
Mobile Applikationen: Entwicklung, Rollout, Wartung - Tipps und Tricks für di...Mobile Applikationen: Entwicklung, Rollout, Wartung - Tipps und Tricks für di...
Mobile Applikationen: Entwicklung, Rollout, Wartung - Tipps und Tricks für di...
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWD
 
Progressive Web Apps mit Angular
Progressive Web Apps mit AngularProgressive Web Apps mit Angular
Progressive Web Apps mit Angular
 
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
 
Die mobile Herausforderung
Die mobile Herausforderung Die mobile Herausforderung
Die mobile Herausforderung
 
My application as webdesigner and front-end developer
My application as webdesigner and front-end developerMy application as webdesigner and front-end developer
My application as webdesigner and front-end developer
 
Responsive Websites aus SEO-Sicht – MobileTechCon 2016
Responsive Websites aus SEO-Sicht – MobileTechCon 2016Responsive Websites aus SEO-Sicht – MobileTechCon 2016
Responsive Websites aus SEO-Sicht – MobileTechCon 2016
 
Hybride Entwicklung mit Ionic
Hybride Entwicklung mit IonicHybride Entwicklung mit Ionic
Hybride Entwicklung mit Ionic
 
10 do’s und dont’s der gestaltung mobiler anwendungen
10 do’s und dont’s der gestaltung mobiler anwendungen10 do’s und dont’s der gestaltung mobiler anwendungen
10 do’s und dont’s der gestaltung mobiler anwendungen
 
Responsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, QualitätResponsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, Qualität
 
jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)
 
Responsive goes Agile!
Responsive goes Agile!Responsive goes Agile!
Responsive goes Agile!
 

Responsive design

  • 1. Responsive Design Wir machen unsere Seite einfach mit Responsive Design und erschließen den mobilen Markt! Ist es wirklich so einfach? Thomas Bähr
  • 2. Warum mobiles Design? Hat Ihre Firma schon spezielle Seiten für mobile Geräte? ● Anteil an Seitenaufrufen mit mobilen Geräten 5-15% ● Anzahl mobiler Endgeräte nimmt zu ● Surfverhalten verändert sich Richtung Mobile ● 2011 – Marktanteile mobile Betriebssysteme ca. 60% Siehe auch Onlinemarketing.de Jahrelang galt für Marketer: Zuerst kommt der Desktop, Mobile spielt nur eine kleine Rolle. Doch das wird sich ändern. 18. Dez 2012 Responsive Design - Thomas Bähr 2
  • 3. Marktanteile - Betriebssysteme Quelle: http://venturebeat.com/2012/12/03/mary-meeker-releases-stunning-data-on-the-state-of-the-internet/ 18. Dez 2012 Responsive Design - Thomas Bähr 3
  • 4. Mobile Nutzer erreichen! Normale Mobile Responsive Applikation Native Webseite Webseite Design Generator Applikation ● Kein Aufwand ● Separate Lösung ● Einheitliches Look & Feel ● Wenig IOS/Android ● Alle Features ● Keine Kosten ● speziell anpassbar ● 1 Seite für alle Devices Know-How notwendig des Gerätes für mobile Geräte ● Entwicklung 1 nutzbar ● Kein IOS/Android ● Unterschiedliche Wissen notwendig Sourcecodes für ● Interaktion mit Release Zyklen mehrere Systeme Nutzer möglich möglich ● Viele Systemfeatures ● Push nutzbar Nachrichten ● Push Nachrichten ● Darstellung auf ● Doppelter Aufwand ● Hoher Planungs ● Kompatibilitäts- ● Kostenintensive mobilen für Pflege und QA aufwand probleme Entwicklung für Geräten ● unterschiedliches ● Hoher QA Aufwand ● Einarbeitung in IOS und Android mangelhaft Layout (Look & Generator ● Langsame ● Entwicklung neuer ● für mobile User Feel) Feature verlangsamt Entwicklung unfreundlich 18. Dez 2012 Responsive Design - Thomas Bähr 4
  • 5. Was ist Responsive Design? ● Praxis in der Web Entwicklung ● reaktionsfähiges Webdesign ● 1 Webseite für alle Geräte ( Desktop & Mobile ) ● Strukturierung einzelner Elemente dynamisch ● Berücksichtigt das betrachtende Gerät ● Basis sind neueste Webstandards wie HTML5 und CSS3. 18. Dez 2012 Responsive Design - Thomas Bähr 5
  • 6. Beispiel - Smartphone 18. Dez 2012 Responsive Design - Thomas Bähr 6
  • 7. Beispiel - Tablet 18. Dez 2012 Responsive Design - Thomas Bähr 7
  • 8. Beispiel – Desktop 18. Dez 2012 Responsive Design - Thomas Bähr 8
  • 9. Beispiel – Checkout 18. Dez 2012 Responsive Design - Thomas Bähr 9
  • 10. Beispiel – Responsive Elemente ? ● Anzahl der Produkte in einer Reihe ● Anordnung der Elemente im Header ● Symbole und Links der Hauptnavigation ● Anordnung der Navigation ● Kategorien und Filter ● Breadcrumb Navigation 18. Dez 2012 Responsive Design - Thomas Bähr 10
  • 11. Die Phasen Wichtige Schritte in den einzelnen Phasen der Umsetzung Planung Entwurf / Design Entwicklung QA / Testing Und was zu beachten ist. 18. Dez 2012 Responsive Design - Thomas Bähr 11
  • 12. Planung ● Browserunterstützung (< IE9 nur mit JS) ● Festlegung der Auflösungen (Desktop, Pads, Phone - s.a. Anhang) ● Content Planung - Anordnung in den Auflösungen ● Erstellung eines Fluid-Grids. (Raster für Umbrüche) ● Image Größen / Resizing ( z.B. Produktbilder ) ● Javascript Frameworks ( JQuery (mobile) ) ● Welche Social Plugins (Facebook, Twitter, Google) – Layout! 18. Dez 2012 Responsive Design - Thomas Bähr 12
  • 13. Entwurf & Design ● Erstellung eines Styleguides / CI Manual (Font, Buttons, Farben) ● Aufbau des Basisgrids als Ausgangsvorlage ● Designen von Screens für alle wichtigen Seiten der Webpräsenz für alle Auflösungen (Grid Beachten!) ● Erstellung von Mockups von wichtigen UI-Elementen ● Flussdiagramme für primäre Abläufe unter Berücksichtigung der verschiedenen Auflösungen ● Usability beachten – besonders auch für mobile Geräte 18. Dez 2012 Responsive Design - Thomas Bähr 13
  • 14. Entwicklung ● Aufsetzen des gewünschten Grid mit dem Bootstrap ● Aufbau Header & Footer inkl. ersten Tests mit allen Auflösungen ● Erstellung des Content entsprechend Screen und Mockups ● Image Loader in Abhängigkeit von Viewport (z.b. Produktbilder) ● Unterschiedliche Zoom-/Blätterfunktionen ( Swipe, Click) ● Permanentes Testing in allen Auflösungen ● Ladeverhalten Bilder, Scripte auf mobilen Geräten (ohne WLAN!) 18. Dez 2012 Responsive Design - Thomas Bähr 14
  • 15. Quality Assurance ● Abnahme der Seite wie bisher in allen Browsern (IE-Chrome) ● Abnahme auf IOS Geräten ( IPad, IPhone) ● Abnahme auf Android Geräten ( HTC, Samsung, Nexus 7) ● Ladeverhalten auf mobilen Geräten ohne WLAN ● Overlays, JS auf mobilen Geräten 18. Dez 2012 Responsive Design - Thomas Bähr 15
  • 16. Resume Für wen ist Responsive Design interessant? ● Webseite soll erneuert werden ● Einheitliches Look & Feel (CI) wichtig ● Keine Kapazitäten für App Entwickler vorhanden ● Website unterliegt keinen ständigen, größeren Änderungen 18. Dez 2012 Responsive Design - Thomas Bähr 16
  • 17. Q&A Frage & Antworten Ihre Fragen zum Thema ? Ihre Anmerkungen ? Danke für Ihre Aufmerksamkeit ! 18. Dez 2012 Responsive Design - Thomas Bähr 17
  • 18. Nützliche Links Tools: Balsamiq Mockup Tool http://www.balsamiq.com/ Twitter CSS Framework http://de.wikipedia.org/wiki/Bootstrap_(Framework) Compass CSS Framework http://compass-style.org/ Respond.js https://github.com/scottjehl/Respond Addons Firefox: Responsinator http://www.responsinator.com/ Web-Developer Toolbar https://addons.mozilla.org/de/firefox/addon/web-developer/developers Application SDK: PhoneGap http://en.wikipedia.org/wiki/PhoneGap Titanium http://www.appcelerator.com/platform/titanium-sdk 18. Dez 2012 Responsive Design - Thomas Bähr 18
  • 19. Anhang: Responsive mit dem CMS? ● WordPress: Reveal Responsive Theme ● Drupal: Omega Responsive Theme ● Joomla: Anleitung Responsive für Joomla ● Typo3: Anleitung Responsive mit Typo3 ● Magento: Responsive Design Tutorial 18. Dez 2012 Responsive Design - Thomas Bähr 19
  • 20. Anhang: Auflösungen Resolution Devices Resolution Devices Resolution Devices Resolution Devices 320 x 240 Blackberry Curve 854 x 480  Sony Ericsson Xperia Arc, Arc S, X10, J & 1280 x 768 Samsung Galaxy Tab 10.1 1680 x 1050 20-inch Apple iMac 4,1 / 5,1 / 7,1 / 8,1 / Samsung Tocco U Nexus 4 9,1 (Early 2006 - Early 2009)  HTC Wildfire Nokia N9 Nokia Lumia 920 Nokia E71 Motorola Milestone and Milestone 2 LG Optimus G & LG Optimus 4X HD Very common low res Sony Xperia J 400 x 240 Many generic feature phones including: 960 x 540 HTC Sensation HTC Evo 3D 1280 x 800 Samsung Galaxy Tab 7.1 & 8.9 1920 x 1080 Large 16:9 desktop screen resolution Samsung Star & Star II Motorola Bionic, Atrix & Droid RAZR Samsung Galaxy 21.5-inch Apple iMac 10,1 / 11,2 / 12,1 Motorola RAZR i & Photon Q Nexus 7 (Late 2009 - Mid 2011) HTC One S Kindle Fire HD Microsoft Surface with Windows 8 Pro 480 x 320  Apple iPhone 3G & 3GS 960 x 640  Apple iPhone 4 & 4S 1280 x 1024 Standard 4:3 desktop screen 1920 x 1200 24-inch Apple iMac 6,1 / 7,1 / 8,1 / 9,1(Late Apple iPod touch (1st, 2nd & 3rd Apple iPod Touch (4th generation) resolution 2006 - Early 2009) generation) Asus Transformer Pad Infinity Samsung Galaxy Ace HTC Desire C 480 x 360 BlackBerry Curve, Storm, Torch 9800 & 1136 x 640 Apple iPhone 5 1366 x 768 11.6 inch Apple Macbook Air 2048 x 1536 Apple iPad 3 Bold incl. 9700 Apple iPod Touch (5th generation) Small 16:9 resolution Sony Ericsson Vivaz Microsoft Surface Samsung Series 3 Chromebook 640 x 360 Nokia N8, N97, E7 and X6 amongst others 1024 x 600  Standard netbook/tablet resolution 1440 x 900 13.3 inch Apple Macbook Air 2560 x 1440 27-inch Apple iMac 10,2 / 11,1 / 11,3 / 12,2 includes: (Late 2009 - 2012)  Amazon Kindle Fire Viewsonic Viewpad 10 Samsung Galaxy Tab 640 x 480 Blackberry Bold 9900 & Torch 9810 1024 x 768 Apple iPad 1& 2 1600 x 900 13 inch Apple Macbook Air 2560 x 1600 13-inch Apple MacBook Pro with Retina HP TouchPad display Apple iPad Mini Nexus 10 800 x 480  Samsung Galaxy I, II and S Samsung 1280 x 720 Samsung Galaxy Nexus 1600 x 1200  Large 4:3 desktop screen resolution 2880 x 1800 15-inch Apple MacBook Pro with Retina Nexus S Sony Xperia S display HTC Desire, Desire HD, Desire S & Desire Samsung Galaxy S III X Samsung Galaxy Note II HTC Evo HTC Sensation XL HTC Windows Phone 8X/S HTC One V HTC One X & X+ & XL  Nokia Lumia 800 & 900 Quelle: http://spirelightmedia.com/responsive-design-device-resolution-reference 18. Dez 2012 Responsive Design - Thomas Bähr 20
  • 21. Quellen Responsive Design http://de.wikipedia.org/wiki/Responsive_Design http://gabesumner.com/how-many-web-browsers-support-responsive-design Buchtipp: http://www.hanser-fachbuch.de/buch/Responsive+Webdesign/9783446430150 18. Dez 2012 Responsive Design - Thomas Bähr 21