Responsive web design

  • 2,773 views
Uploaded on

"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." …

"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 är inte en enda teknik, utan snarare en uppsättning tekniker och idéer som bildar en helhet. Vi berättar om varför det här är rätt sätt att bygga webb på och hur man gör.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,773
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
88
Comments
0
Likes
9

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Dont 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.
  • 2. Henrik Ekelöf
  • 3. Robert Piirainen
  • 4. RESPONSIVE WEB DESIGN
  • 5. VAD DET INTE ÄR:— ett nytt häftigt sätt att bygga mobilwebb
  • 6. FAKTUM ÄR:
  • 7. Det finns ingen mobilwebb
  • 8. Det finns inte en specifikwebb för mobila enheter. Allt är samma webb.
  • 9. 640 x 480 800 x 600 1024 x 768
  • 10. 320 x480 1024 x 768
  • 11. 3201024 x 768 x 480
  • 12. 1024 1024 768 768 320 320
  • 13. The long and short of it is that we’redesigning for more devices, more inputtypes, more resolutions than ever before.The web has moved beyond the desktop,and it’s not turning back. — Ethan Marcotte Responsive web design
  • 14. Skapa en sammanhängande upplevelse för alla, oberoende enhet eller skärmstorlek.
  • 15. TEKNIKER?
  • 16. Flexibel grid Flexibla bilder Media queries
  • 17. FLEXIBEL GRID
  • 18. GRIDDING THE 960
  • 19. +
  • 20. target ÷ context = result 220 ÷ 960 = 0.22916220px = 22.916% 960px
  • 21. FLEXIBLA BILDER & MEDIA
  • 22. img { max-width: 100%;}
  • 23. MEDIA QUERIES
  • 24. widthheightdevice-widthdevice-heightorientationaspect-ratiodevice-aspect-ratiocolorcolor-indexmonochromeresolutionscangrid
  • 25. 320px Små skärmar - portrait läge480px Små skärmar - landscape läge768px iPad - portrait läge1024px iPad / Laptop - landscape läge1200px Widescreen
  • 26. Flexibel grid Flexibla bilder Media queries
  • 27. Hur man gör ...
  • 28. Fixa din viewport!
  • 29. Lägg till Media Queries
  • 30. Zoom-buggen i iPhone
  • 31. Inte så!
  • 32. Inte så!
  • 33. Gamla versioner av Internet Explorer
  • 34. Håll koll på vad som laddas ner
  • 35. Safari på bred skärmMobile Safari på iPhone
  • 36. Safari på bred skärmMobile Safari på iPhone
  • 37. Optimera bilder
  • 38. RESPONSIVE by DESIGN
  • 39. http://en.wikipedia.org/wiki/Canons_of_page_construction
  • 40. The control which designers know in theprint medium, and often desire in the webmedium, is simply a function of thelimitation of the printed page. We shouldembrace the fact that the web doesn’t havethe same constraints, and design for thisflexibility. — John Allsopp A dao of web design
  • 41. FLEXIBELT
  • 42. Stora variationer på skärmupplösningarOlika enheter med olika egenskaperKontext och användning
  • 43. RESPONSIVE & ADAPTIVE LAYOUT
  • 44. Texthttp://www.macdonaldhotels.co.uk/
  • 45. http://www.informationarchitects.jp
  • 46. Prioritet: 1Eftersom en allt större variation i skärm- ochfönsterstorlekar finns bland användare är denallra bästa lösningen att skapa en layout som ärflexibel och kan anpassa sig efter användarensförutsättningar och önskemål. Undvik att göraen webbplats med låst layout. — 24-timmarswebben Skapa en design som fungerar oavsett fönster- och skärmstorlek
  • 47. RESPONSIVA VERKTYG
  • 48. Rendering av typsnitt skiljer sig från webbläsareoch andra operativsystemSvårt med typografiska ändringar på en störreskalaOlikheter i webbläsareOmöjligt att visualisera en responsiv / fluidlayout
  • 49. CSS
  • 50. http://www.slideshare.net/nzakas/progressive-enhancement-20-conference-agnostic
  • 51. dowebsitesneedtolookexactlythesameineverybrowser.com/
  • 52. PRESENTERARESPONSIV DESIGN
  • 53. Dont 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!
  • 54. Henrik Ekelöf Robert Piirainen@henrikekelof @robertpiira