1. Web-dizajn je mrtav, živio
responzivni web-dizajn!
Lucijan Blagonić
Blagonić Brothers

5. Isključite zvuk telefona

6. Uključite mobilne i
tablet uređaje

7. VSInternet nekad Internet danas

8. Internet nekad
Internet Explorer, Netscape...

9. Best viewed with
Internet Explorer
– Every Webmaster in early 2000s

10. Do websites need to look
exactly the same in every
browser?
– Every Webmaster in late 2000s

11. Internet danas
Chrome, Firefox, Opera, Safari, Internet Explorer...

13. Navike korisnika redovito se mijenjaju
Korisnici žele informacije...

14. Tijekom cijelog dana

15. Na svakom uređaju

16. U raznim aktivnostima

22. VS

23. Tehnička strana
Novi izazovi za developere i dizajnere

24. Promjena u načinu razmišljanja
Tehnologija i najbolja praksa...

26. Web tipografija

28. Zašto responzivni web dizajn?

29. Responzivna stranica je
samo mobilna web stranica.
!"#$

30. 2.8
3.14
3.2
3.4
3.5
3.6
3.65
3.7
3.97
4
4.2
4.27
4.3
4.5
4.52
4.65
4.8
5
5.3
5.5
5.8
6.3
7
7.7
8
10
10.1
?
?
?

31. Responzivna stranica je
pristupačna korisnicima neovisno
o uređaju koji koriste.

32. The power of the Web is in its
universality. Access by
everyone regardless of
disability is an essential aspect.
– Tim Berners-Lee

34. Zakon velikih brojeva

36. At ISO.org, iPad is #1 used
mobile device, up 312% from last
year. #2 is iPhone, up 190%.
– Andy Clarke
#

37. Mobile traffic in
November 2011
21,892
Mobile traffic in
November 2012
43,038
#

39. 407.3%
conversion rate increase
on Android devices
591.4%
revenue growth on
Android devices
#

40. 20.3%
conversion rate increase
on non-mobile devices
41.1%
revenue growth on non-
mobile devices
#

41. Temeljni principi

42. Univerzalni pristup informacija

43. Pristupačnost
Accessibility

44. Uporabivost
Usability

45. Web standardi
Od mobitela do desktopa

46. Glavni tehnički sastojci
Fluid grids
CSS3 Media queries
Flexible images

47. Fluid grids (%)

48. Fluid grids (%)
/* CSS */
/* Remember to comment calculations */
article {
width: 65.957446808511%; /* 620 / 940 */
}
aside {
width: 31.914893617021%; /* 300 / 940 */
}

49. Fluid grids (%)
% % % % % %

50. CSS3 Media Queries
Viewport size Pixel ratio Orientation
...

51. 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) { ... }

52. 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)" />

53. Flexible images

54. Flexible images
/* CSS document */
img { max-width: 100% }
img,
object,
embed,
video { max-width: 100% }

55. Flexible images
1000 x 750 px
168 KB
600x450px
88 KB
300x225px
30 KB

58. Input

59. Miš i tipkovnica
Preciznost, brzi unos...

60. Touch-screen
Intuitivnost, “WYSIWYG”...

61. Detekcija mogućnosti
Modernizr

63. Na što treba pripaziti

64. Sadržaj
Pravi sadržaj, pravi problemi

65. Sadržaj
Naslovna O nama Katalog Kontakt
Kategorija
Proizvodi
1. RAZINA
2. RAZINA
3. RAZINA

66. Wireframe + skica
Napravite pogreške što ranije,
razradite sučelje prije dizajna

67. Wireframe + skica
HTML/CSS

68. Dizajn
Definirajte sistem, ne statičan
dizajn za jednu rezoluciju

69. Dizajn

70. HTML/CSS + testiranje
Krenite što prije s rezanjem, to
vam daje priliku za testiranje

71. HTML/CSS + testiranje
— Semantika (header, footer, article, aside...)
— Web standardi
— Content first
— ARIA/accessibility
— role=“banner”
— role=“navigation”
— role=“main”
— role=“complementary”
— role=“contentinfo”

72. HTML/CSS + testiranje
— WebKit ≠ WebKit
— Testiranje na uređaju što je prije moguće
— Koristite alate poput Adobe Edge Inspecta za osvježavanje
prikaza stranice na uređajima za testiranje

73. Mobile first
Krenite od mobitela prema
ostalim uređajima

74. Mobile first
1400.css+style.css 400.css+ 600.css+ 1000.css+

75. Sučelje
Sučelje mora biti jednostavno,
intuitivno i funkcionalno

76. Sučelje
Pretraživanje
Navigacija
Login

77. Sučelje

78. Analizirajmo

79. Ciklopea
www.ciklopea.com

81. WinDays
www.windays.hr

85. Tailored4WP
www.tailored4wp.com

87. Izazovi

88. Optimizacija

89. Prosječna težina stranice u 2012.
bila je više od 1 MB

90. Tehnologija

91. Standardi
Problemi koje nismo znali da imamo

92. Proces

93. Planiranje 1 2 3 4
Dizajn 1 2 3 4
Development 1 2 3 4
Iteracija Finalno
I1 I2 I3 I4

94. Web-dizajn je mrtav,
živio responzivni web-dizajn!
PS. to je ista stvar!

95. Pitanja i odgovori

96. Hvala
Lucijan Blagonić
lucijan@blagonic.com
Blagonić Brothers
@lucijanblagonic