[CROATIAN] RWD in practice @ WebCamp Zagreb

7 things we learned from creating responsive websites.

Transcript

1. Responzivan web dizajn u praksi Lucijan Bla onić Bla onić Brothers @lucijanbla onic WebCamp Za reb 2012 320 480 600 768 992 1382
2. RWD 101 Kratki pre led
3. Fluid rids, flexible ima es, and media queries are the three technical in redients for responsive web desi n, but it also requires a different way of thinkin . Ethan Marcotte / A List Apart http://www.alistapart.com/articles/responsive-web-desi n
4. BostonGlobe Use-case
8. Danas Microsoft, En ad et, The Next Web, Mashable, Read Write Web, Smashin Ma azine, ISO, Coca-Cola…
18. … I još jako puno stranica.
19. At ISO.or , iPad is #1 used mobile device, up 312% from last year. #2 is iPhone, up 190%. Andy Clarke / via Twitter https://twitter.com/malarkey/status/270884545061081088
20. At ISO.or , mobile traffic has doubled in twelve months. November 2011 was 21,892 views. November 2012 is already 43,038. Andy Clarke / via Twitter https://twitter.com/malarkey/status/270885152685707264
23. November 2011 21,892 November 2012 43,038
24. 7 najbitnijih stvari* *IMHO
25. Sadržaj Kako krenuti? 1
26. Definirati ciljeve …i ciljanu publiku. 1
27. Edukacija Klijenata i korisnika 1
28. Pripremiti sadržaj Ovo je najbitnija stvar. 1
29. PRAKTIČNI DIO Tekst editor Notepad, Word, Goo le Docs… 1
30. Wireframin Skiciranjem do interaktivno prototipa. 2
31. Rješavanje problema Raspodjela sadržaja, sučelje, interakcija s korisnikom, prezentacija. 2
32. PRAKTIČNI DIO 2 Alati Olovka, papir, whiteboard, marker, Balsamiq, Moqups, Illustrator, HTML…
33. Navi acija Definiranje najbolje pristupa. 2
34. PRAKTIČNI DIO 2 Responsive Patterns http://bradfrost. ithub.com/this-is-responsive/patterns.html#navi ation
35. Sadržaj Wireframin bez sadržaja nema smisla. Vratite se na prvi korak. 2
36. Mobile first Optimizirajmo za mobilno 3
37. Perspektiva Kako vaše stranice koriste posjetitelji. 3
38. PRAKTIČNI DIO 3
39. /* CSS Mobile first */ h1 { color:#ff0000; } p { color:#444; } /* You can split CSS into separate files */ @media only screen and (min-width: 600px) {} @media only screen and (min-width: 768px) {} @media only screen and (min-width: 992px) {} @media only screen and (min-width: 1382px) { /* Here be dra ons */ } PRAKTIČNI DIO 3
40. PRAKTIČNI DIO 3 Mobile first / A Book Apart
41. HTML5 Još ne koristite? 4
42. Semantika Novi HTML elementi koje možete koristiti: article, aside, section, header, footer, nav… 4
43. Modernizr Feature detekcija browsera. 4
44. CSS3 Fancy effects. Border radius, box shadow, radients… 4
45. PRAKTIČNI DIO 4 CSS3 for Web desi ners / A Book Apart
46. Forme Iskoristite prednosti. 4
47. Telefonski broj OIB +385 1 123 4567 1234567890 <input type=”tel”> <input type=”number”> PRAKTIČNI DIO 4
48. PRAKTIČNI DIO 4 HTML5 for Web desi ners / A Book Apart
49. Fluidne mreže Tar et % context 5
50. Grid Gradite prema vlastitim potrebama. 5
51. /* CSS */ /* Remember to comment calculations */ article { width: 65.957446808511%; /* 620 / 940 */ } aside { width: 31.914893617021%; /* 300 / 940 */ } PRAKTIČNI DIO 5
52. PRAKTIČNI DIO 5 Responsive Web Desi n / A Book Apart
53. Tipo rafija Tekst i sve to nešto. 6
54. @font-face Prikazuje se i na pametnim telefonima no pripazite na “težinu” fonta. 6
55. Prila odba uređaju Prila odite veličinu fonta i prored rezoluciji, uređaju i kontekstu stranice. 6
56. Multimedija Slike, video, slideri… 7
57. Slike i video Optimizirajte slike i video za različite rezolucije. Definirajte max-width:100%; Možete koristiti i plu ine kao npr. fitvideo.js 7
58. Slideri Touch friendly. Vanilla JS. 7
59. HDPI Slike za uređaje s HDPI ekranima. /* More info https:// ist. ithub.com/3446599 */ @media only screen and (min-device-pixel-ratio: 1.3), only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 13/10), only screen and (min-resolution: 120dpi) { /* Place code here */ } 7
60. La ao sam Ima 8 stvari.
61. Testiranje Testiranje iz browsera i na uređajima. 8
62. Testiranje iz browsera Chrome Inspector, Firebu … Resize viewport http://lab.maltewassermann.com/viewport-resizer/ 8
63. Device testin Adobe Ed e Inspect* 8 *WebKit
64. Internet Explorer <!--[if lt IE 9]> 8
65. JavaScript podrška css3-mediaqueries.js respond.js 8
66. 1 2 3 4 5 6 7 Sadržaj Wireframin Mobile first HTML5 Fluidne mreže Tipo rafija Multimedija
67. 1 2 3 4 5 6 7 Pripremite sadržaj Odradite wireframin Krenite Mobile first Primijenite HTML5 Koristite fluidne mreže Pripazite na tipo rafiju Optimizirajte multimediju
68. 1 2 3 4 5 6 7 Pripremite sadržaj Odradite wireframin Krenite Mobile first Primijenite HTML5 Koristite fluidne mreže Pripazite na tipo rafiju Optimizirajte multimediju Testirajte } 8
69. Nismo pričali o dizajnu? Jesmo. Desi n is How it Works / Steve Jobs
70. Pitajte, ne rizem. Lucijan Bla onić Bla onić Brothers @lucijanbla onic