SlideShare ist ein Scribd-Unternehmen logo
1 von 114
Downloaden Sie, um offline zu lesen
Don't get set into one form,
 adapt it and build your own, and let it grow, be like water.
 Empty your mind, be formless, shapeless — like water.
 Now you put water in a cup, it becomes the cup;
 You put water into a bottle it becomes the bottle;
 You put it in a teapot it becomes the teapot.
 Now water can flow or it can crash.


 …Be water, my friend.
Henrik Ekelöf
Robert Piirainen
RESPONSIVE WEB DESIGN
VAD DET INTE ÄR:
— ett nytt häftigt sätt att bygga
          mobilwebb
FAKTUM ÄR:
Det finns ingen mobilwebb
Det finns inte en specifik
webb för mobila enheter.

  Allt är samma webb.
Responsive web design
640 x 480            800 x 600




        1024 x 768
Responsive web design
320
 x
480
      1024 x 768
320
1024 x 768    x
             480
Responsive web design
1024
 1024   768
        768   320
               320
Responsive web design
Responsive web design
Responsive web design
Responsive web design
Responsive web design
Responsive web design
Responsive web design
Responsive web design
The long and short of it is that we’re
designing for more devices, more input
types, more resolutions than ever before.
The web has moved beyond the desktop,
and it’s not turning back.

                                  — Ethan Marcotte
                             Responsive web design
Responsive web design
Skapa en sammanhängande upplevelse för alla,
     oberoende enhet eller skärmstorlek.
TEKNIKER?
Flexibel grid   Flexibla bilder   Media queries
FLEXIBEL GRID
Responsive web design
GRIDDING THE 960
+
target ÷ context = result
                 220 ÷ 960 = 0.22916




220px   = 22.916%


             960px
FLEXIBLA BILDER & MEDIA
img {

    max-width: 100%;

}
MEDIA QUERIES
Responsive web design
width
height
device-width
device-height
orientation
aspect-ratio
device-aspect-ratio
color
color-index
monochrome
resolution
scan
grid
320px    Små skärmar - portrait läge
480px    Små skärmar - landscape läge
768px    iPad - portrait läge
1024px   iPad / Laptop - landscape läge
1200px   Widescreen
Flexibel grid   Flexibla bilder   Media queries
Hur man gör ...
Fixa din viewport!
Responsive web design
Responsive web design
Responsive web design
Responsive web design
Responsive web design
Responsive web design
Lägg till Media Queries
Responsive web design
Responsive web design
Responsive web design
Responsive web design
Responsive web design
Responsive web design
Zoom-buggen i iPhone
Responsive web design
Inte så!
Inte så!
Responsive web design
Gamla versioner av
 Internet Explorer
Responsive web design
Responsive web design
Responsive web design
Responsive web design
Responsive web design
Responsive web design
Håll koll på vad som laddas ner
Responsive web design
Responsive web design
Safari på bred skärm




Mobile Safari på iPhone
Responsive web design
Responsive web design
Safari på bred skärm




Mobile Safari på iPhone
Optimera bilder
Responsive web design
Responsive web design
Responsive web design
Responsive web design
Responsive web design
Responsive web design
Responsive web design
Responsive web design
Responsive web design
Responsive web design
Responsive web design
Responsive web design
Responsive web design
Responsive web design
RESPONSIVE by DESIGN
http://en.wikipedia.org/wiki/Canons_of_page_construction
Responsive web design
Responsive web design
Responsive web design
The control which designers know in the
print medium, and often desire in the web
medium, is simply a function of the
limitation of the printed page. We should
embrace the fact that the web doesn’t have
the same constraints, and design for this
flexibility.

                                   — John Allsopp
                              A dao of web design
FLEXIBELT
Stora variationer på skärmupplösningar
Olika enheter med olika egenskaper
Kontext och användning
RESPONSIVE & ADAPTIVE
      LAYOUT
Text




http://www.macdonaldhotels.co.uk/
http://www.informationarchitects.jp
Prioritet: 1
Eftersom en allt större variation i skärm- och
fönsterstorlekar finns bland användare är den
allra bästa lösningen att skapa en layout som är
flexibel och kan anpassa sig efter användarens
förutsättningar och önskemål. Undvik att göra
en webbplats med låst layout.

                                             — 24-timmarswebben
     Skapa en design som fungerar oavsett fönster- och skärmstorlek
RESPONSIVA VERKTYG
Responsive web design
Rendering av typsnitt skiljer sig från webbläsare
och andra operativsystem
Svårt med typografiska ändringar på en större
skala
Olikheter i webbläsare
Omöjligt att visualisera en responsiv / fluid
layout
Responsive web design
Responsive web design
CSS
http://www.slideshare.net/nzakas/progressive-enhancement-20-conference-agnostic
dowebsitesneedtolookexactlythesameineverybrowser.com/
PRESENTERA
RESPONSIV DESIGN
Responsive web design
Responsive web design
Don't get set into one form,
 adapt it and build your own, and let it grow, be like water.
 Empty your mind, be formless, shapeless — like water.
 Now you put water in a cup, it becomes the cup;
 You put water into a bottle it becomes the bottle;
 You put it in a teapot it becomes the teapot.
 Now water can flow or it can crash.


 …Be water, my friend.




TACK FÖR OSS!
Henrik Ekelöf   Robert Piirainen
@henrikekelof   @robertpiira

Weitere ähnliche Inhalte

Responsive web design