Responsive web design

3,610
-1

Published 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."
— 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.

Responsive web design

  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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×