Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Web-dizajn je mrtav, živioresponzivni web-dizajn!Lucijan BlagonićBlagonić Brothers
Isključite zvuk telefona
Uključite mobilne itablet uređaje
VSInternet nekad Internet danas
Internet nekadInternet Explorer, Netscape...
Best viewed withInternet Explorer– Every Webmaster in early 2000s
Do websites need to lookexactly the same in everybrowser?– Every Webmaster in late 2000s
Internet danasChrome, Firefox, Opera, Safari, Internet Explorer...
Navike korisnika redovito se mijenjajuKorisnici žele informacije...
Tijekom cijelog dana
Na svakom uređaju
U raznim aktivnostima
VS
Tehnička stranaNovi izazovi za developere i dizajnere
Promjena u načinu razmišljanjaTehnologija i najbolja praksa...
Web tipografija
Zašto responzivni web dizajn?
Responzivna stranica jesamo mobilna web stranica.!"#$
2.83.143.23.43.53.63.653.73.9744.24.274.34.54.524.654.855.35.55.86.377.781010.1???
Responzivna stranica jepristupačna korisnicima neovisnoo uređaju koji koriste.
The power of the Web is in itsuniversality. Access byeveryone regardless ofdisability is an essential aspect.– Tim Berners...
Zakon velikih brojeva
At ISO.org, iPad is #1 usedmobile device, up 312% from lastyear. #2 is iPhone, up 190%.– Andy Clarke#
Mobile traffic inNovember 201121,892Mobile traffic inNovember 201243,038#
407.3%conversion rate increaseon Android devices591.4%revenue growth onAndroid devices#
20.3%conversion rate increaseon non-mobile devices41.1%revenue growth on non-mobile devices#
Temeljni principi
Univerzalni pristup informacija
PristupačnostAccessibility
UporabivostUsability
Web standardiOd mobitela do desktopa
Glavni tehnički sastojciFluid gridsCSS3 Media queriesFlexible images
Fluid grids (%)
Fluid grids (%)/* CSS *//* Remember to comment calculations */article {width: 65.957446808511%; /* 620 / 940 */}aside {wid...
Fluid grids (%)% % % % % %
CSS3 Media QueriesViewport size Pixel ratio Orientation...
CSS3 Media Queries/* CSS Mobile first */h1 { color:#ff0000; }p { font-size: 14px; }@media only screen and (min-width: 600p...
CSS3 Media Queries<link rel="stylesheet" href="style.css"media="only screen" /><link rel="stylesheet" href="480.css"media=...
Flexible images
Flexible images/* CSS document */img { max-width: 100% }img,object,embed,video { max-width: 100% }
Flexible images1000 x 750 px168 KB600x450px88 KB300x225px30 KB
Input
Miš i tipkovnicaPreciznost, brzi unos...
Touch-screenIntuitivnost, “WYSIWYG”...
Detekcija mogućnostiModernizr
Na što treba pripaziti
SadržajPravi sadržaj, pravi problemi
SadržajNaslovna O nama Katalog KontaktKategorijaProizvodi1. RAZINA2. RAZINA3. RAZINA
Wireframe + skicaNapravite pogreške što ranije,razradite sučelje prije dizajna
Wireframe + skicaHTML/CSS
DizajnDefinirajte sistem, ne statičandizajn za jednu rezoluciju
Dizajn
HTML/CSS + testiranjeKrenite što prije s rezanjem, tovam daje priliku za testiranje
HTML/CSS + testiranje— Semantika (header, footer, article, aside...)— Web standardi— Content first— ARIA/accessibility— ro...
HTML/CSS + testiranje— WebKit ≠ WebKit— Testiranje na uređaju što je prije moguće— Koristite alate poput Adobe Edge Inspec...
Mobile firstKrenite od mobitela premaostalim uređajima
Mobile first1400.css+style.css 400.css+ 600.css+ 1000.css+
SučeljeSučelje mora biti jednostavno,intuitivno i funkcionalno
SučeljePretraživanjeNavigacijaLogin
Sučelje
Analizirajmo
Ciklopeawww.ciklopea.com
WinDayswww.windays.hr
Tailored4WPwww.tailored4wp.com
Izazovi
Optimizacija
Prosječna težina stranice u 2012.bila je više od 1 MB
Tehnologija
StandardiProblemi koje nismo znali da imamo
Proces
Planiranje 1 2 3 4Dizajn 1 2 3 4Development 1 2 3 4Iteracija FinalnoI1 I2 I3 I4
Web-dizajn je mrtav,živio responzivni web-dizajn!PS. to je ista stvar!
Pitanja i odgovori
HvalaLucijan Blagonićlucijan@blagonic.comBlagonić Brothers@lucijanblagonic
[WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!
[WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!
[WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!
[WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!
[WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!
[WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!
[WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!
[WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!
[WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!
[WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!
[WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!
[WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!
[WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!
[WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!
[WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!
[WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!
[WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!
[WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!
[WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!
[WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!
[WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!
[WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!
Upcoming SlideShare
Loading in …5
×

[WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!

703 views

Published on

Published in: Design
  • Be the first to comment

[WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!

  1. 1. Web-dizajn je mrtav, živioresponzivni web-dizajn!Lucijan BlagonićBlagonić Brothers
  2. 2. Isključite zvuk telefona
  3. 3. Uključite mobilne itablet uređaje
  4. 4. VSInternet nekad Internet danas
  5. 5. Internet nekadInternet Explorer, Netscape...
  6. 6. Best viewed withInternet Explorer– Every Webmaster in early 2000s
  7. 7. Do websites need to lookexactly the same in everybrowser?– Every Webmaster in late 2000s
  8. 8. Internet danasChrome, Firefox, Opera, Safari, Internet Explorer...
  9. 9. Navike korisnika redovito se mijenjajuKorisnici žele informacije...
  10. 10. Tijekom cijelog dana
  11. 11. Na svakom uređaju
  12. 12. U raznim aktivnostima
  13. 13. VS
  14. 14. Tehnička stranaNovi izazovi za developere i dizajnere
  15. 15. Promjena u načinu razmišljanjaTehnologija i najbolja praksa...
  16. 16. Web tipografija
  17. 17. Zašto responzivni web dizajn?
  18. 18. Responzivna stranica jesamo mobilna web stranica.!"#$
  19. 19. 2.83.143.23.43.53.63.653.73.9744.24.274.34.54.524.654.855.35.55.86.377.781010.1???
  20. 20. Responzivna stranica jepristupačna korisnicima neovisnoo uređaju koji koriste.
  21. 21. The power of the Web is in itsuniversality. Access byeveryone regardless ofdisability is an essential aspect.– Tim Berners-Lee
  22. 22. Zakon velikih brojeva
  23. 23. At ISO.org, iPad is #1 usedmobile device, up 312% from lastyear. #2 is iPhone, up 190%.– Andy Clarke#
  24. 24. Mobile traffic inNovember 201121,892Mobile traffic inNovember 201243,038#
  25. 25. 407.3%conversion rate increaseon Android devices591.4%revenue growth onAndroid devices#
  26. 26. 20.3%conversion rate increaseon non-mobile devices41.1%revenue growth on non-mobile devices#
  27. 27. Temeljni principi
  28. 28. Univerzalni pristup informacija
  29. 29. PristupačnostAccessibility
  30. 30. UporabivostUsability
  31. 31. Web standardiOd mobitela do desktopa
  32. 32. Glavni tehnički sastojciFluid gridsCSS3 Media queriesFlexible images
  33. 33. Fluid grids (%)
  34. 34. Fluid grids (%)/* CSS *//* Remember to comment calculations */article {width: 65.957446808511%; /* 620 / 940 */}aside {width: 31.914893617021%; /* 300 / 940 */}
  35. 35. Fluid grids (%)% % % % % %
  36. 36. CSS3 Media QueriesViewport size Pixel ratio Orientation...
  37. 37. CSS3 Media Queries/* CSS Mobile first */h1 { color:#ff0000; }p { font-size: 14px; }@media only screen and (min-width: 600px) {p { font-size: 16px; }}@media only screen and (min-width: 768px) { ... }@media only screen and (min-width: 992px) { ... }@media only screen and (min-width: 1382px) { ... }
  38. 38. CSS3 Media Queries<link rel="stylesheet" href="style.css"media="only screen" /><link rel="stylesheet" href="480.css"media="only screen and (min-width: 480px)" /><link rel="stylesheet" href="600.css"media="only screen and (min-width: 600px)" /><link rel="stylesheet" href="768.css"media="only screen and (min-width: 768px)" />
  39. 39. Flexible images
  40. 40. Flexible images/* CSS document */img { max-width: 100% }img,object,embed,video { max-width: 100% }
  41. 41. Flexible images1000 x 750 px168 KB600x450px88 KB300x225px30 KB
  42. 42. Input
  43. 43. Miš i tipkovnicaPreciznost, brzi unos...
  44. 44. Touch-screenIntuitivnost, “WYSIWYG”...
  45. 45. Detekcija mogućnostiModernizr
  46. 46. Na što treba pripaziti
  47. 47. SadržajPravi sadržaj, pravi problemi
  48. 48. SadržajNaslovna O nama Katalog KontaktKategorijaProizvodi1. RAZINA2. RAZINA3. RAZINA
  49. 49. Wireframe + skicaNapravite pogreške što ranije,razradite sučelje prije dizajna
  50. 50. Wireframe + skicaHTML/CSS
  51. 51. DizajnDefinirajte sistem, ne statičandizajn za jednu rezoluciju
  52. 52. Dizajn
  53. 53. HTML/CSS + testiranjeKrenite što prije s rezanjem, tovam daje priliku za testiranje
  54. 54. HTML/CSS + testiranje— Semantika (header, footer, article, aside...)— Web standardi— Content first— ARIA/accessibility— role=“banner”— role=“navigation”— role=“main”— role=“complementary”— role=“contentinfo”
  55. 55. HTML/CSS + testiranje— WebKit ≠ WebKit— Testiranje na uređaju što je prije moguće— Koristite alate poput Adobe Edge Inspecta za osvježavanjeprikaza stranice na uređajima za testiranje
  56. 56. Mobile firstKrenite od mobitela premaostalim uređajima
  57. 57. Mobile first1400.css+style.css 400.css+ 600.css+ 1000.css+
  58. 58. SučeljeSučelje mora biti jednostavno,intuitivno i funkcionalno
  59. 59. SučeljePretraživanjeNavigacijaLogin
  60. 60. Sučelje
  61. 61. Analizirajmo
  62. 62. Ciklopeawww.ciklopea.com
  63. 63. WinDayswww.windays.hr
  64. 64. Tailored4WPwww.tailored4wp.com
  65. 65. Izazovi
  66. 66. Optimizacija
  67. 67. Prosječna težina stranice u 2012.bila je više od 1 MB
  68. 68. Tehnologija
  69. 69. StandardiProblemi koje nismo znali da imamo
  70. 70. Proces
  71. 71. Planiranje 1 2 3 4Dizajn 1 2 3 4Development 1 2 3 4Iteracija FinalnoI1 I2 I3 I4
  72. 72. Web-dizajn je mrtav,živio responzivni web-dizajn!PS. to je ista stvar!
  73. 73. Pitanja i odgovori
  74. 74. HvalaLucijan Blagonićlucijan@blagonic.comBlagonić Brothers@lucijanblagonic

×