Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Loading in …3
×
1 of 114

Responsive web design

10

Share

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Responsive web design

  1. 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.
  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 specifik webb för mobila enheter. Allt är samma webb.
  9. 640 x 480 800 x 600 1024 x 768
  10. 320 x 480 1024 x 768
  11. 320 1024 x 768 x 480
  12. 1024 1024 768 768 320 320
  13. 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
  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.22916 220px = 22.916% 960px
  21. FLEXIBLA BILDER & MEDIA
  22. img { max-width: 100%; }
  23. MEDIA QUERIES
  24. width height device-width device-height orientation aspect-ratio device-aspect-ratio color color-index monochrome resolution scan grid
  25. 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
  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ärm Mobile Safari på iPhone
  36. Safari på bred skärm Mobile 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 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
  41. FLEXIBELT
  42. Stora variationer på skärmupplösningar Olika enheter med olika egenskaper Kontext och användning
  43. RESPONSIVE & ADAPTIVE LAYOUT
  44. Text http://www.macdonaldhotels.co.uk/
  45. http://www.informationarchitects.jp
  46. 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
  47. RESPONSIVA VERKTYG
  48. 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
  49. CSS
  50. http://www.slideshare.net/nzakas/progressive-enhancement-20-conference-agnostic
  51. dowebsitesneedtolookexactlythesameineverybrowser.com/
  52. PRESENTERA RESPONSIV DESIGN
  53. 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!
  54. Henrik Ekelöf Robert Piirainen @henrikekelof @robertpiira

×