[CROATIAN] RWD in practice @ WebCamp Zagreb

2eaa540dfe93c83d61a8fafedec664ff?s=47 Lucijan Blagonić
November 24, 2012

[CROATIAN] RWD in practice @ WebCamp Zagreb

7 things we learned from creating responsive websites.

2eaa540dfe93c83d61a8fafedec664ff?s=128

Lucijan Blagonić

November 24, 2012
Tweet

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

  5. None
  6. None
  7. None
  8. Danas Microsoft, En ad et, The Next Web, Mashable, Read

    Write Web, Smashin Ma azine, ISO, Coca-Cola…
  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. None
  16. None
  17. None
  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
  21. None
  22. None
  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