Web Cross Device

Presentazione relativa al workshop tenuto alla Wired Next Fest 2015.

Transcript

1. Web Cross Device GDG Milano @ Wired Next Fest 2015 gdgmilano.org / jacoporabolini.com
2. “Il web è progettato per essere universale: per includere tutto e tutti.” - Tim Berners-Lee
3. C’era una volta... image: http://bradfrost.com/blog/web/responsive-web-design-missing-the-point/
4. ... sì, una volta appunto! image: http://bradfrost.com/blog/web/responsive-web-design-missing-the-point/
5. desktop vs mobile Marzo 2015 Desktop Mobile 10.6% 11.3 http://www.comscore.com/ita/Insights/Blog/Number-of-Mobile-Only-Internet-Users-Now-Exceeds- Desktop-Only-in-the-U.S
6. Meglio prepararsi! image: http://bradfrost.com/blog/web/responsive-web-design-missing-the-point/
7. Di cosa parleremo 1) Layout Fluid 2) La viewport 3) Le media query 4) Codelab
8. 4 approcci differenti Fixed unità di misura assolute Fluid unità di misura relative Adaptive layout specifici per device Responsive Fluid + Adaptive
9. Layout Fluid
10. px, pt ems, % Da Fixed a Fluid
11. Magikabula! target ÷ context il valore desiderato in pixel la dimensione del contenitore in pixel
12. Da Fixed a Fluid: text <h2> Questo è un titolo <a href=”#”>e questo un link</a> </h2> HTML
13. h2 { font-size: 24px; } h2 a { font-size: 18px; } h2 { font-size: 1.5em; } /* 24px ÷ 16px */ h2 a { font-size: 0.75em; } /* 18px ÷ 24px */ CSS CSS Da Fixed a Fluid: text
14. <div class=”wrap”> <div class=”content”>...</div> <div class=”sidebar”>...</div> </div> HTML Da Fixed a Fluid: width & margin
15. ok ma il context? Per width e margin il context è sempre relativo all’elemento contenitore.
16. .wrap { width: 1024px; } .content { width: 684px; margin-right: 20px; } .wrap { width: 90%; } /* convertito in % */ .content { width: 66.8%; margin-right: 20px; } CSS CSS Da Fixed a Fluid: width & margin
17. .wrap { width: 1024px; } .content { width: 684px; margin-right: 20px; } .wrap { width: 90%; } .content { width: 66.8%; margin-right: 1.95%; } Da Fixed a Fluid: width & margin CSS CSS
18. .wrap { width: 1024px; } .sidebar { width: 320px; } .wrap { width: 90%; } .sidebar { width: 31.25%; } CSS CSS Da Fixed a Fluid: width & margin
19. <div class=”content”> <p class=”box”>...</p> <p class=”box”>...</p> </div> HTML Da Fixed a Fluid: padding
20. Attenzione al context! Per il padding il context è sempre relativo all’elemento stesso.
21. .content { width: 684px; margin-right: 20px; } .box { width: 332px; padding: 10px; } CSS .content { width: 66.8%; margin-right: 1.95%; } .box { width: 48.54%; padding: 3.01%; } CSS Da Fixed a Fluid: padding
22. La viewport
23. La nostra area visibile viewport viewport
24. Pixel is not a pixel is not a pixel 1) Pixel hardware 2) Pixel indipendenti dal dispositivo (dip) 3) Pixel CSS
25. ok, quali usiamo? ➔ Device pixel ratio (dpr): rapporto tra pixel hardware e dip ➔ Initial-scale: rapporto tra dip e pixel CSS
26. Un po’ d’ordine, grazie! <meta name=”viewport” content=”width=device-width, initial-scale=1” > HTML
27. Ora si ragiona! pixel hardware = dip = pixel CSS
28. Le media query
29. Le @media rules... @media screen { /* regole per screen */ } CSS <link rel=”stylesheet” type=”text/css” media=”handheld” href=”handheld.css” /> HTML
30. ...e le @media query @media screen and (min-width: 760px) { /* regole per schermi di almeno 760px */ } CSS medium aggiungiamo condizioni la media feture
31. media features • width • height • min-width • min-height • max-width • max-height • orientation • ... valore landscape o portrait
32. @media query, un esempio @media screen and (min-width: 320px) { .wrap { background-color: #AA3939; } } @media screen and (min-width: 760px) { .wrap { background-color: #183F98; } } CSS
33. ed ecco il risultato 760px 320px
34. @media query, altro esempio @media screen and (min-width: 320px) { .sidebar, .content { float: none; } } @media screen and (min-width: 760px) { .sidebar { float: left; } .content { float: right; } } CSS
35. layout diversi!
36. Tutto assieme e... Il layout fluido collega le diverse visualizzazioni di un sito, tra un breakpoint e il successivo.
37. ...responsive! fluid breakpoint
38. Cosa abbiamo visto: • Il web è universale • 4 approcci: fixed, fluid, adaptive e responsive • Target ÷ Context nei layout fluid • La viewport e i pixel • Le media query • Tutto assieme!
39. Domande?
40. Codelab :)
41. Gli obiettivi: 1) Esaminare il codice del sito demo 2) Impostare il testo in unità relative (em) 3) Impostare width, margin e padding in unità relative (%) 4) Resettare la viewport 5) Identificare i breakpoint 6) Modificare il layout in corrispondenza dei breakpoint
42. Risorse: gdgmilano.org/wired
43. Restiamo in contatto! ★ Jacopo Rabolini | Web & Graphic designer ➔ jacoporabolini.com ➔ hello@jacoporabolini.com ➔ google.com/+jacoporabolini
44. Grazie!