Responsive web design
Post on 14-May-2015
2826 Views
Preview:
DESCRIPTION
Transcript
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.
640 x 480 800 x 600
1024 x 768
1024 x 768
320x
480
1024 x 768320x
480
1024 3207681024 768 320
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 MarcotteResponsive web design
Skapa en sammanhängande upplevelse för alla,
oberoende enhet eller skärmstorlek.
TEKNIKER?
Flexibla bilderFlexibel grid Media queries
FLEXIBEL GRID
GRIDDING THE 960
+
target ÷ context = result
220px
960px
220 ÷ 960 = 0.22916
= 22.916%
FLEXIBLA BILDER & MEDIA
img {
max-width: 100%;
}
MEDIA QUERIES
width
height
device-width
device-height
orientation
aspect-ratio
device-aspect-ratio
color
color-index
monochrome
resolution
scan
grid
320px
480px
768px
1024px
1200px
Små skärmar - portrait läge
Små skärmar - landscape läge
iPad - portrait läge
iPad / Laptop - landscape läge
Widescreen
Flexibla bilderFlexibel grid Media queries
Hur man gör ...
Fixa din viewport!
Lägg till Media Queries
Zoom-buggen i iPhone
Inte så!
Inte så!
Gamla versioner av Internet Explorer
Håll koll på vad som laddas ner
Safari på bred skärm
Mobile Safari på iPhone
Safari på bred skärm
Mobile Safari på iPhone
Optimera bilder
RESPONSIVE DESIGNby
http://en.wikipedia.org/wiki/Canons_of_page_construction
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 AllsoppA dao of web design
FLEXIBELT
Stora variationer på skärmupplösningar
Olika enheter med olika egenskaper
Kontext och användning
RESPONSIVE & ADAPTIVELAYOUT
Text
http://www.macdonaldhotels.co.uk/
http://www.informationarchitects.jp
Prioritet: 1Eftersom 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-timmarswebbenSkapa en design som fungerar oavsett fönster- och skärmstorlek
RESPONSIVA VERKTYG
Rendering av typsnitt skiljer sig från webbläsare och andra operativsystemSvårt med typografiska ändringar på en större skalaOlikheter i webbläsareOmöjligt att visualisera en responsiv / fluid layout
CSS
http://www.slideshare.net/nzakas/progressive-enhancement-20-conference-agnostic
dowebsitesneedtolookexactlythesameineverybrowser.com/
PRESENTERARESPONSIV 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@henrikekelof
Robert Piirainen@robertpiira
top related