Responsive Web - Mobile First. An overview.

University course presentation. Some slides in greek.

Transcript

1. Responsive Web Mobile First Δημήτρης Σπαθής – Διδακτική της Πληροφορικής I
2. Τι; Τετληθές ποσ κας επηηρέποσλ λα θαηαζθεσάδοσκε websites ηα οποία προζαρκόδοληαη δσλακηθά & on the fly ζε θάζε δηάζηαζε θαη προζαλαηοιηζκό οζόλες.
3. Όλα ξεκίνησαν..
4. Το μέλλον
5. Το πρόβλημα
6. Το πρόβλημα: the sequel
7. Λύση;
8. Στην πράξη
11. Πώς δουλεύει • fluid, grid based layout – viewport – breakpoints – columns % • flexible images & media • media queries • fonts – em, px
12. Layout / fluid grid
13. Layout / fluid columns
14. Layout / viewport <meta name= ‘viewport’ content= ‘width=device-width, initial-scale=1, maximum-scale=1’>
15. 61%
16. Images • πρόβιεκα • δελ σπάρτεη standard • προζωρηλή ιύζε .js libraries img { max-width: 100%; } <picture alt="description"> <source src="small.jpg"> <source src="medium.jpg" media="(min-width: 400px)"> <source src="large.jpg" media="(min-width: 800px)"> </picture>
18. Media Queries <!-- CSS media query on a link element --> <link rel="stylesheet" media="(max-width: 800px)" href="example.css"/> <!-- CSS media query within a style sheet --> <style> @media (max-width: 600px) { .facet_sidebar { display: none; } } </style>
19. Γραμματοσειρές
20. Fonts Γεληθά ηζτύεη 1em = 12pt = 16px = 100%
23. Video?
25. Δύσκολο;
26. Frameworks!
31. Αξίζει τον κόπο;
32. Πραγματικός αντίκτυπος • Pages / visit up • Mobile: 23% up • Homepage uniques: 15% up • Time spent: 7.5% up • Mobile bounce rate: 26% down • Conversion rate iPhone/iPod: 65.7% up • Revenue growth >> : 101.2% up • Conversion rate Android: 407.3% up • Revenue growth >> : 591.4% up • Revenue growth on non-mobile: 41.1% up
33. Διαφήμιση;
34. 84% ηωλ mobile τρεζηώλ παραηερούλ ηης δηαθεκίζεης 56% ηωλ τρεζηώλ αλαδήηεζαλ θάηη ποσ είδαλ ζε δηαθήκηζε ζηο θηλεηό Σε ζύγθρηζε κε ηο 51% γηα TV, 41% γηα περηοδηθά θαη 32% γηα πηλαθίδα.
35. Banners
36. Progressive Enhancement
37. Αλλαγή workflow παιηό Wireframe ~ Mockup ~ Code λέο Content ~ Prototype ~ Visuals
38. Ευχαριστώ!
39. Πηγές o alistapart.com/article/responsive-web-design o mediaqueri.es o google.co.uk/think o markboulton.co.uk/journal/responsive-advertising o magazine.org/timecom-gm-craig-ettinger-bringing- responsive-web-design-iconic-brand o coding.smashingmagazine.com/2011/01/12/guideli nes-for-responsive-web-design/ o httparchive.org/interesting.php o lukew.com/ff/entry.asp?1691 o bradfrost.github.io/this-is-responsive/index.html o flickr.com (CC license)