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
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

121127 SouperTuesday "Responsive Webdesign"