SlideShare ist ein Scribd-Unternehmen logo
Willkommen zum
Souper'Tuesday'am'27.11.2012




Responsive Webdesign


             studioselzam
Überblick
‣Was$ist$“responsive”?
‣Ein$paar$Zahlen
‣So$sieht’s$aus
‣Die$Zutaten
‣Das$Rezept
‣Ausblick
“responsive”
 ansprechbar, reaktionsfähig
http://www.core.form-ula.com/2008/05/17/skylite001/
http://www.core.form-ula.com/2008/05/17/skylite001/
http://www.core.form-ula.com/2008/05/17/skylite001/
In unserem
   Fall ...
Content in verschiedenen Kontexten
Ein paar Zahlen
Ein paar Zahlen

Mobile Webnutzung heute

                                                                     15%


       33%                                                                 6%




                                  67%

                                                    80%




    Internet&Nutzer*mit*Handy                  Smartphones      Tablets


  Rund ein Drittel der Internet-Nutzer in   Rund ein Fünftel des Internet-Traffics
  Deutschland gehen auch mit dem            in den USA wird über mobile Geräte
  Handy ins Internet. FORSA                 genutzt. CHITIKA
Ein paar Zahlen

Mobile Webnutzung in der Zukunft




 http://www.q4blog.com/2012/07/11/cisco-systems-report-mobile-traffic-doubled-and-smart-phone-use-tripled-in-2011/
Ein paar Zahlen

Wir nutzen etliche Formate und Bildschirmgrößen

          768 x 1024               540 x 960

                                               1024 x 768



                          1280 x 800

                                                      320 x 568


     480 x 320



                   320 x 480                                             1440 x 900   1920 x 1080    2560 x 1440
                                                960 x 540
        768 x 1024
                                                                  1280 x 800


                                800 x 1280                        1440 x 900
       960 x 540                                 540 x 960                              1024 x 768
                                                                  1366 x 768
So sieht’s aus
Responsive Websites

Am Bildschirm simuliert

                          ‣ http://resizemybrowser.com/
Responsive Websites

Beispiel: Sony Mobile
‣ http://www.sonymobile.com/de/
Responsive Websites

Beispiel:
edenspiekermann
‣ http://edenspiekermann.com/de/
Responsive Websites

Beispiel:
Simon Collison
‣ http://colly.com/
Die Zutaten
Die Zutaten

Responsive Websites bestehen aus:




     HTML                                       MEDIA QUERIES                                CSS

           5                                                                                     3
‣ HTML%(Hypertext%Markup%               ‣ Media%Queries%fragen'                 ‣ CSS%(Cascading%Stylesheets)'
  Language)%beschreibt'die'               Geräteeigenschaften'ab'und'stellen'     beschreiben'die'Darstellung'einer'
  inhaltliche'Struktur'einer'Website'     die'darauf'zugeschnittenen'CSSN         Website'mit'Farben,'Verläufen,'Layout'
  im'Browser                              Eigenschaften'bereit.                   (Formen,'Größen'und'Positionen)'und'
                                                                                  Schriften.
Die Zutaten

 Media Queries und diverse Stylesheets
 erzeugen die Responsive Website

                                                           HTML
                         Auswahl'des'Stylesheets                              Responsive'Website
         CSS
 CSS

         CSS
         CSS
 CSS
               CSS
    CSS
    CSS
CSS       CSS
   CSS

                     MEDIA QUERIES




                                           Ständige'Abfrage'der'Geräteeigenschaften
Die Zutaten

 Brauche ich für jedes Gerät ein eigenes CSS?

                                                          CSS
CSS                    CSS              CSS               3
3                      3                3




                      CSS
                      3                             CSS

          CSS                                       3
          3



                                              CSS
          CSS               CSS               3
          3                  3
                                                          CSS
                                                          3


    CSS         CSS               CSS               CSS

      3         3                 3                  3
Die Zutaten

Zum Glück nicht! Ich brauche “Fluid Grids”.




‣ Umrechnung:harter:Pixelwerte:in:Prozente
‣ Definierung:von:AnfangsA:und:Endpunkten
Die Zutaten

Fluid Grid Beispiele
‣ http://www.lottanieminen.com
121127 SouperTuesday "Responsive Webdesign"
Die Zutaten

Fluid Grid Beispiele
‣ http://crushlovely.com
Die Zutaten

Fluid Grid Beispiele
‣ http://stephencaver.com
Das Rezept
Das Rezept

Breakpoints definieren




             1024+      1023 – 768   767 – 480   bis 479
Das Rezept

“mobile first”
                                                    4
      1            2               3




CSS          CSS          CSS                CSS




  bis 479     767 – 480         1023 – 768         1024+
Kochstunde

Warum “mobile first”?
‣ Wegen des geringen Platzes auf mobilen Geräten,
  müssen Inhalte und Features von Anfang an stark
  priorisiert werden
➡ “Weniger ist mehr” tut dann auch der Desktop
   Website gut

‣ Man kann sich eher auf die Möglichkeiten von “Mobile”
  einlassen
➡ Wie kann ich GPS, Orientierung des Gerätes und
   Umgebungsinformationen sinnvoll nutzen?

‣ Man entwickelt vom Einfachen zum Komplexen
➡ sauberer Quellcode, mit weniger Bugs und weniger
   Problemen
People are increasingly fed up with
the sheer amount of crap that they
have to deal with on web pages.
Luke Wroblewski - “mobile first” Prophet
Das Rezept

Verwendung von Bildern


                               200kb


                                                                               30kb




‣ Desktop%Thumbnail                                     ‣ Mobile%Thumbnail
  580'x'420'ca.'200kb                                     280'x'200'ca.'30kb



‣ Um:lange:Ladezeiten:zu:vermeiden,:müssen:Bilder:in:
  unterschiedlichen:Größen:bereitgestellt:werden.
Das Rezept

Typografie

‣ Schriftgrößen müssen grundsätzlich auf das
  jeweilige Gerät angepasst werden
‣ Das Hauptkriterium zur Bestimmung der
  Schriftgröße ist die Lesedistanz
‣ Auch Zeilenabstände müssen bei größerer
  Lesedistanz vergrößert werden
‣ Bei sehr kleiner Schrift (Smartphones) sollte   http://informationarchitects.net/blog/responsive-typography-the-basics/
  die Laufweite der Schrift vergrößert werden
‣ Bei der Gestaltung von Desktop Websites
  werden häufig zu kleine Schriftgrößen
  verwendet
Das Rezept

Weitere Herausforderungen von
“responsive webdesign”
‣ RolloverAEffekte:sind:auf:Touchscreens:nicht:sinnvoll:
‣ Neben:verschiedenen:Bildschirmgrößen:bringen:
  unterschiedliche:mobile:Browser:eigene:Tücken:mit:sich,:
  die:Funktion:und:Darstellung:der:“responsive”:Site:
  beeinträchtigen:können
‣ Lange:Ladezeiten:sind:gerade:im:Mobile:Bereich:ein:“No:Go”
‣ Retina:Displays:(zunehmend:im:Smartphone:und:Tablett:
  Bereich:vertreten):verlangen:aber:nach:hochaufgelöstem:
  Bildmaterial
‣ Ausgiebige:Tests:auf:allen:erdenklichen:Devices:sind:nahezu:
  unmöglich:A:d.h.:nicht:zu:viele:Experimente:wagen
“
Web design is engineering:
it’s not about finding perfection,
it’s finding the best compromise.
Oliver Reichenstein - “responsive” Prophet
Ausblick
Ausblick

RVLT
‣ http://rvlt.com/
Rüdiger'von'Selzam'/'www.studioselzam.com




              studioselzam

Weitere ähnliche Inhalte

Andere mochten auch

Manufacturer Offer
Manufacturer OfferManufacturer Offer
Manufacturer Offer
debsings
 
Balfurd application
Balfurd applicationBalfurd application
Balfurd application
Balfurd
 
Incapacity Planning in Missouri
Incapacity Planning in MissouriIncapacity Planning in Missouri
Incapacity Planning in Missouri
Charlie Amen
 
Maco maco
Maco macoMaco maco
Maco maco
daniel_zedna
 
Cep811 st air project - sarah haglund
Cep811 st air project - sarah haglundCep811 st air project - sarah haglund
Cep811 st air project - sarah haglund
sarahhaglund
 
Gwt parte 01
Gwt   parte 01Gwt   parte 01
Gwt parte 01
Rafael Adriano
 
Plan desarrollo webquest
Plan desarrollo webquestPlan desarrollo webquest
Plan desarrollo webquest
Diego Cruz
 
L foxportfoliopresentation
L foxportfoliopresentationL foxportfoliopresentation
L foxportfoliopresentation
jjsopko
 
T O T A L P H Y S I C A L R E S P O N S E
T O T A L  P H Y S I C A L  R E S P O N S ET O T A L  P H Y S I C A L  R E S P O N S E
T O T A L P H Y S I C A L R E S P O N S E
Graciela Bilat
 
Common Literary Terms: The Learning Center
Common Literary Terms: The Learning CenterCommon Literary Terms: The Learning Center
Common Literary Terms: The Learning Center
KHaglund
 
Ruby紹介
Ruby紹介Ruby紹介
Ruby紹介
Gohryuh
 
Mongol History Child Book
Mongol History Child BookMongol History Child Book
Mongol History Child Book
tromboneiplay125
 
Color theory
Color theoryColor theory
Color theory
hojungiee
 
Netlog Ppt
Netlog PptNetlog Ppt
Netlog Ppt
flowbro
 
CS Unitec Freehand Supports: 2 1202 9940
CS Unitec Freehand Supports: 2 1202 9940CS Unitec Freehand Supports: 2 1202 9940
CS Unitec Freehand Supports: 2 1202 9940
CS Unitec
 
092 sluer risico's afwijkingen asfaltproces
092 sluer  risico's afwijkingen asfaltproces092 sluer  risico's afwijkingen asfaltproces
092 sluer risico's afwijkingen asfaltproces
CROW
 

Andere mochten auch (18)

Manufacturer Offer
Manufacturer OfferManufacturer Offer
Manufacturer Offer
 
Balfurd application
Balfurd applicationBalfurd application
Balfurd application
 
Incapacity Planning in Missouri
Incapacity Planning in MissouriIncapacity Planning in Missouri
Incapacity Planning in Missouri
 
Ui
UiUi
Ui
 
Maco maco
Maco macoMaco maco
Maco maco
 
Cep811 st air project - sarah haglund
Cep811 st air project - sarah haglundCep811 st air project - sarah haglund
Cep811 st air project - sarah haglund
 
Gwt parte 01
Gwt   parte 01Gwt   parte 01
Gwt parte 01
 
Plan desarrollo webquest
Plan desarrollo webquestPlan desarrollo webquest
Plan desarrollo webquest
 
L foxportfoliopresentation
L foxportfoliopresentationL foxportfoliopresentation
L foxportfoliopresentation
 
T O T A L P H Y S I C A L R E S P O N S E
T O T A L  P H Y S I C A L  R E S P O N S ET O T A L  P H Y S I C A L  R E S P O N S E
T O T A L P H Y S I C A L R E S P O N S E
 
Doc1
Doc1Doc1
Doc1
 
Common Literary Terms: The Learning Center
Common Literary Terms: The Learning CenterCommon Literary Terms: The Learning Center
Common Literary Terms: The Learning Center
 
Ruby紹介
Ruby紹介Ruby紹介
Ruby紹介
 
Mongol History Child Book
Mongol History Child BookMongol History Child Book
Mongol History Child Book
 
Color theory
Color theoryColor theory
Color theory
 
Netlog Ppt
Netlog PptNetlog Ppt
Netlog Ppt
 
CS Unitec Freehand Supports: 2 1202 9940
CS Unitec Freehand Supports: 2 1202 9940CS Unitec Freehand Supports: 2 1202 9940
CS Unitec Freehand Supports: 2 1202 9940
 
092 sluer risico's afwijkingen asfaltproces
092 sluer  risico's afwijkingen asfaltproces092 sluer  risico's afwijkingen asfaltproces
092 sluer risico's afwijkingen asfaltproces
 

Ähnlich wie 121127 SouperTuesday "Responsive Webdesign"

Responsive Web Design für Mobilgeräte mit Drupal
Responsive Web Design für Mobilgeräte mit Drupal Responsive Web Design für Mobilgeräte mit Drupal
Responsive Web Design für Mobilgeräte mit Drupal
Acquia
 
Responsive Web Design - Ein Überblick
Responsive Web Design - Ein ÜberblickResponsive Web Design - Ein Überblick
Responsive Web Design - Ein Überblick
Amazee Labs
 
CSS3 Media Queries
CSS3 Media QueriesCSS3 Media Queries
CSS3 Media Queries
Francesco Schwarz
 
There and back again - Responsive Webdesign mit WordPress
There and back again - Responsive Webdesign mit WordPress There and back again - Responsive Webdesign mit WordPress
There and back again - Responsive Webdesign mit WordPress
Michael Oeser
 
Responsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der HaubeResponsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der Haube
falconwhite
 
Icons im Web: Roundtrip for a better web experience
Icons im Web: Roundtrip for a better web experienceIcons im Web: Roundtrip for a better web experience
Icons im Web: Roundtrip for a better web experience
Markus Greve
 
CSS Media Queries (WebTech Conference 2010)
CSS Media Queries (WebTech Conference 2010)CSS Media Queries (WebTech Conference 2010)
CSS Media Queries (WebTech Conference 2010)
Michael Jendryschik
 
CSS Media Queries (WordCamp 2010)
CSS Media Queries (WordCamp 2010)CSS Media Queries (WordCamp 2010)
CSS Media Queries (WordCamp 2010)
Michael Jendryschik
 
Typografie im Responsive Webdesign
Typografie im Responsive WebdesignTypografie im Responsive Webdesign
Typografie im Responsive Webdesign
Sven Wolfermann
 
Was nicht passt wird responsive gemacht
Was nicht passt wird responsive gemachtWas nicht passt wird responsive gemacht
Was nicht passt wird responsive gemacht
Christoph Reinartz
 
Responsive Images
Responsive ImagesResponsive Images
Responsive Images
Sven Wolfermann
 
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichWebstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Peter Rozek
 
Wbfntdy 2012
Wbfntdy 2012Wbfntdy 2012
Wbfntdy 2012
Markus Greve
 
1&1 Frontend Workshop
1&1 Frontend Workshop1&1 Frontend Workshop
1&1 Frontend Workshop
Nico Steiner
 
Kleiner Blick auf CSS3
Kleiner Blick auf CSS3Kleiner Blick auf CSS3
Kleiner Blick auf CSS3
Jens Grochtdreis
 
Contao Konferenz 2013 - Workshop "Responsive Contao" - Teil 1
Contao Konferenz 2013 - Workshop "Responsive Contao" - Teil 1Contao Konferenz 2013 - Workshop "Responsive Contao" - Teil 1
Contao Konferenz 2013 - Workshop "Responsive Contao" - Teil 1
Peter Müller
 
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Gregor Biswanger
 
Mobile Web Apps
Mobile Web AppsMobile Web Apps
Mobile Web Apps
holgerrueprich
 
HTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenHTML5-Legacy-Anwendungen
HTML5-Legacy-Anwendungen
Jonathan Weiß
 
design
designdesign

Ähnlich wie 121127 SouperTuesday "Responsive Webdesign" (20)

Responsive Web Design für Mobilgeräte mit Drupal
Responsive Web Design für Mobilgeräte mit Drupal Responsive Web Design für Mobilgeräte mit Drupal
Responsive Web Design für Mobilgeräte mit Drupal
 
Responsive Web Design - Ein Überblick
Responsive Web Design - Ein ÜberblickResponsive Web Design - Ein Überblick
Responsive Web Design - Ein Überblick
 
CSS3 Media Queries
CSS3 Media QueriesCSS3 Media Queries
CSS3 Media Queries
 
There and back again - Responsive Webdesign mit WordPress
There and back again - Responsive Webdesign mit WordPress There and back again - Responsive Webdesign mit WordPress
There and back again - Responsive Webdesign mit WordPress
 
Responsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der HaubeResponsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der Haube
 
Icons im Web: Roundtrip for a better web experience
Icons im Web: Roundtrip for a better web experienceIcons im Web: Roundtrip for a better web experience
Icons im Web: Roundtrip for a better web experience
 
CSS Media Queries (WebTech Conference 2010)
CSS Media Queries (WebTech Conference 2010)CSS Media Queries (WebTech Conference 2010)
CSS Media Queries (WebTech Conference 2010)
 
CSS Media Queries (WordCamp 2010)
CSS Media Queries (WordCamp 2010)CSS Media Queries (WordCamp 2010)
CSS Media Queries (WordCamp 2010)
 
Typografie im Responsive Webdesign
Typografie im Responsive WebdesignTypografie im Responsive Webdesign
Typografie im Responsive Webdesign
 
Was nicht passt wird responsive gemacht
Was nicht passt wird responsive gemachtWas nicht passt wird responsive gemacht
Was nicht passt wird responsive gemacht
 
Responsive Images
Responsive ImagesResponsive Images
Responsive Images
 
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichWebstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen Bereich
 
Wbfntdy 2012
Wbfntdy 2012Wbfntdy 2012
Wbfntdy 2012
 
1&1 Frontend Workshop
1&1 Frontend Workshop1&1 Frontend Workshop
1&1 Frontend Workshop
 
Kleiner Blick auf CSS3
Kleiner Blick auf CSS3Kleiner Blick auf CSS3
Kleiner Blick auf CSS3
 
Contao Konferenz 2013 - Workshop "Responsive Contao" - Teil 1
Contao Konferenz 2013 - Workshop "Responsive Contao" - Teil 1Contao Konferenz 2013 - Workshop "Responsive Contao" - Teil 1
Contao Konferenz 2013 - Workshop "Responsive Contao" - Teil 1
 
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
 
Mobile Web Apps
Mobile Web AppsMobile Web Apps
Mobile Web Apps
 
HTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenHTML5-Legacy-Anwendungen
HTML5-Legacy-Anwendungen
 
design
designdesign
design
 

121127 SouperTuesday "Responsive Webdesign"