Responsive Design

1. Bild: Kevin Cornell Lånad från: http://www.alistapart.com/articles/responsive-web-design/

2. Henrik Ekelöf @henrikekelof Robert Piirainen @robertpiira

3. Responsive Design

4. — ett nytt häftigt sätt att bygga mobilwebb Vad det inte är:

5. Faktum är:

6. Det finns ingen mobilwebb.

7. Det finns inte en specifik webb för mobila enheter. Allt är samma webb.

8. 640 x 480 800 x 600 1024 x 768

9. 1024 x 768 320 x 480

10. 1024 x 768 320 x 480 768 x 1024

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. En sammanhängande upplevelse för alla, oavsett enhet eller skärmstorlek.

13. Responsive Design Flexibla grids Flexibel media Media queries

14. Grid Layout

16. FLEXIBLE GRIDS, THE MOVIE

17. Flexibel Media

18. img { max-width: 100% }

19. Media Queries CSS3

20. width height device-width device-height orientation aspect-ratio device-aspect-ratio color ... Queries

21. FLEXIBLE GRIDS, THE MOVIE PT.2 FEAT. MEDIA QUERIES

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. 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. Flexibla grids Flexibel media Media queries

25. Problem & lösningar

26. Bakgrundsbilder

27. Optimering av bakgrundsbilder i CSS ‣ Använd endast Data URIs för bilder som ska visas i alla storlekar

28. li { background: url("data:image/ gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WO yDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7//// wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGl CQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQK GIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCB MQiB0UjIQA7") no-repeat left center; }

29. Optimering av bakgrundsbilder i CSS ‣ Använd endast Data URIs för bilder som ska visas i alla storlekar ‣ Använd sprites

30. Sprites

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. Innehållsbilder

33. Optimering av innehållsbilder ‣ Använd Lazy load för bilder och hämta bara de som ska visas

34. <img src="pixel.gif" data-original="example.jpg"> <img src="example.jpg">

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. <!DOCTYPE html> <html> <head> <script> document.cookie = 'resolution=' + Math.max(screen.width, screen.height) + '; path=/'; </script> </head> <body> <img src="example.jpg" alt="">

37. Bilder ‣ De bakgrundsbilder som ska visas hämtas ‣ Alla innehållsbilder hämtas oavsett om de ska visas eller ej

38. Legacy-versioner av Internet Explorer (IE8 och äldre)

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. 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. /* 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. /* 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. <!DOCTYPE html> <html> <head>  <link rel="stylesheet" href="rwd.css">   ...

44. Responsive by design

45. http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html

46. 960?

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 ﬂexibility. — John Allsopp A dao of web design

48. The journey begins by letting go of control, and becoming ﬂexible. — John Allsopp A dao of web design

49. En flexibel webb!

50. En flexibel webb ‣ Stora variationer på skärmupplösningar

51. Topp 10 skärmupplösningar i Sverige under det senaste året

52. ‣ Stora variationer på skärmupplösningar ‣ Olika enheter med olika egenskaper ‣ Konsumtion... En flexibel webb

53. http://bradfrostweb.com/blog/web/for-a-future-friendly-web/

54. Prioritet: 1 Eftersom en allt större variation i skärm- och fönsterstorlekar ﬁnns bland användare är den allra bästa lösningen att skapa en layout som är ﬂexibel 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. Mobile First Strategi?

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 ﬁrst helps with big issues

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. http://www.ﬂickr.com/photos/merlin/sets/72157622077100537/

59. Responsiva Verktyg

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. http://24ways.org/2009/make-your-mockup-in-markup

62. CSS

63. http://www.slideshare.net/nzakas/progressive-enhancement-20-conference-agnostic

64. En responsiv process

65. Presentera design i webbläsaren

66. Summering ‣ Introduktion till Responsive Design ‣ Besvara vanliga frågeställningar ‣ Vägen framåt är flexibilitet, inte anpassning till populära enheter

67. Henrik Ekelöf @henrikekelof Robert Piirainen @robertpiira

Responsive Design

Valtech AB

Responsive Design