Responsive Design

2,515 views

Published on

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

Published in: Technology, Design
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,515
On SlideShare
0
From Embeds
0
Number of Embeds
95
Actions
Shares
0
Downloads
37
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Responsive Design

  1. 1. Bild: Kevin Cornell Lånad från: http://www.alistapart.com/articles/responsive-web-design/
  2. 2. Henrik Ekelöf @henrikekelof Robert Piirainen @robertpiira
  3. 3. Responsive Design
  4. 4. — ett nytt häftigt sätt att bygga mobilwebb Vad det inte är:
  5. 5. Faktum är:
  6. 6. Det finns ingen mobilwebb.
  7. 7. Det finns inte en specifik webb för mobila enheter. Allt är samma webb.
  8. 8. 640 x 480 800 x 600 1024 x 768
  9. 9. 1024 x 768 320 x 480
  10. 10. 1024 x 768 320 x 480 768 x 1024
  11. 11. 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
  12. 12. En sammanhängande upplevelse för alla, oavsett enhet eller skärmstorlek.
  13. 13. Responsive Design Flexibla grids Flexibel media Media queries
  14. 14. Grid Layout
  15. 15. +
  16. 16. FLEXIBLE GRIDS, THE MOVIE
  17. 17. Flexibel Media
  18. 18. img { max-width: 100% }
  19. 19. Media Queries CSS3
  20. 20. width height device-width device-height orientation aspect-ratio device-aspect-ratio color ... Queries
  21. 21. FLEXIBLE GRIDS, THE MOVIE PT.2 FEAT. MEDIA QUERIES
  22. 22. 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 Brytpunkter
  23. 23. 320px 480px 640px 768px 800px 1024px 1200px 1344px 1600px Små skärmar - portrait läge Små skärmar - landscape läge ???? iPad - portrait läge ???? iPad / Laptop - landscape läge Widescreen ???? ???? Brytpunkter
  24. 24. Flexibla grids Flexibel media Media queries
  25. 25. Problem & lösningar
  26. 26. Bakgrundsbilder
  27. 27. Optimering av bakgrundsbilder i CSS ‣ Använd endast Data URIs för bilder som ska visas i alla storlekar
  28. 28. li { background: url("data:image/ gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WO yDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7//// wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGl CQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQK GIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCB MQiB0UjIQA7") no-repeat left center; }
  29. 29. Optimering av bakgrundsbilder i CSS ‣ Använd endast Data URIs för bilder som ska visas i alla storlekar ‣ Använd sprites
  30. 30. Sprites
  31. 31. Optimering av bakgrundsbilder i CSS ‣ Använd endast Data URIs för bilder som ska visas i alla storlekar ‣ Använd sprites ‣ Blanda inte bilder avsedda för olika skärmbredder i samma sprite
  32. 32. Innehållsbilder
  33. 33. Optimering av innehållsbilder ‣ Använd Lazy load för bilder och hämta bara de som ska visas
  34. 34. <img src="pixel.gif" data-original="example.jpg"> <img src="example.jpg">
  35. 35. Optimering av innehållsbilder ‣ Använd Lazy load för bilder och hämta bara de som ska visas ‣ Skala om bilder på servern
  36. 36. <!DOCTYPE html> <html> <head> <script> document.cookie = 'resolution=' + Math.max(screen.width, screen.height) + '; path=/'; </script> </head> <body> <img src="example.jpg" alt="">
  37. 37. Bilder ‣ De bakgrundsbilder som ska visas hämtas ‣ Alla innehållsbilder hämtas oavsett om de ska visas eller ej
  38. 38. Legacy-versioner av Internet Explorer (IE8 och äldre)
  39. 39. /* Style för små skärmar och grundstyle för alla */ .example { ... } @media all and (min-width: 321px) { /* Style för lite bredare (t.ex. iPhone landscape) */ .example { ... } } @media all and (min-width: 481px) { /* Style för ytterligare lite bredare skärmar (t.ex. iPad portrait) */ .example { ... } } @media all and (min-width: 769px) { /* Style för breda skärmar */ .example { ... } }
  40. 40. 1 2 3 4 5 6 7 8 /* Style för små skärmar och grundstyle för alla */ .example { ... } @media all and (min-width: 321px) { /* Style för lite bredare (t.ex. iPhone landscape) */ .example { ... } } @media all and (min-width: 481px) { /* Style för ytterligare lite bredare skärmar (t.ex. iPad portrait) */ .example { ... } } @media all and (min-width: 769px) { /* Style för breda skärmar */ .example { ... } }
  41. 41. /* Style för små skärmar och grundstyle för alla */ .example { ... } /* Style för lite bredare (t.ex. iPhone landscape) */ .example { ... } /* Style för ytterligare lite bredare skärmar (t.ex. iPad portrait) */ .example { ... } /* Style för breda skärmar */ .example { ... } 1 3 5 7
  42. 42. /* Style för små skärmar och grundstyle för alla */ .example { ... } /* Style för lite bredare (t.ex. iPhone landscape) */ .example { ... } /* Style för ytterligare lite bredare skärmar (t.ex. iPad portrait) */ .example { ... } /* Style för breda skärmar */ .example { ... }
  43. 43. <!DOCTYPE html> <html> <head> <!--[if (gte IE 9)|!(IE)]><!--> <link rel="stylesheet" href="rwd.css"> <!--<![endif]--> <!--[if (lte IE 8)]> <link rel="stylesheet" href="rwd-ie.css"> <![endif]--> ...
  44. 44. Responsive by design
  45. 45. http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
  46. 46. 960?
  47. 47. 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
  48. 48. The journey begins by letting go of control, and becoming flexible. — John Allsopp A dao of web design
  49. 49. En flexibel webb!
  50. 50. En flexibel webb ‣ Stora variationer på skärmupplösningar
  51. 51. Topp 10 skärmupplösningar i Sverige under det senaste året
  52. 52. ‣ Stora variationer på skärmupplösningar ‣ Olika enheter med olika egenskaper ‣ Konsumtion... En flexibel webb
  53. 53. http://bradfrostweb.com/blog/web/for-a-future-friendly-web/
  54. 54. 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
  55. 55. Mobile First Strategi?
  56. 56. Losing 80% of your screen space forces you to focus. You need to make sure that what stays on the screen is the most important set of features for your customers and your business. — Luke W Mobile first helps with big issues
  57. 57. 1. Semantisk, meningsfull markup 2. Separera design och layout 3. Introducera layout-stilar med media queries 4. “Mobila” CSS:er + media queries = Desktop site Mobile first: Responsive design
  58. 58. http://www.flickr.com/photos/merlin/sets/72157622077100537/
  59. 59. Responsiva Verktyg
  60. 60. ‣ Rendering av typsnitt skiljer sig från webbläsare och andra operativsystem ‣ Olikheter i webbläsare ‣ Omöjligt att visualisera en responsiv layout
  61. 61. http://24ways.org/2009/make-your-mockup-in-markup
  62. 62. CSS
  63. 63. http://www.slideshare.net/nzakas/progressive-enhancement-20-conference-agnostic
  64. 64. En responsiv process
  65. 65. Presentera design i webbläsaren
  66. 66. Summering ‣ Introduktion till Responsive Design ‣ Besvara vanliga frågeställningar ‣ Vägen framåt är flexibilitet, inte anpassning till populära enheter
  67. 67. Henrik Ekelöf @henrikekelof Robert Piirainen @robertpiira

×