�ݺ�ߣ

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

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

Uključite mobilne i
tablet �ܰ��𵨲��

VSInternet nekad Internet danas

Internet nekad
Internet Explorer, Netscape...

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

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

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

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

Tehnička strana
Novi izazovi za developere i dizajnere

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

Zašto responzivni web dizajn?

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

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
?
?
?

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

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

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

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

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

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

Univerzalni pristup informacija

Web standardi
Od mobitela do desktopa

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

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

CSS3 Media Queries
Viewport size Pixel ratio Orientation
...

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

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

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

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

Miš i tipkovnica
Preciznost, brzi unos...

Touch-screen
Intuitivnost, “WYSIWYG”...

Detekcija mogućnosti
Modernizr

Sadržaj
Pravi sadržaj, pravi problemi

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

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

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

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

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

— 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

Mobile first
Krenite od mobitela prema
ostalim uređajima

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

��č��
��č�� mora biti jednostavno,
intuitivno i funkcionalno

��č��
Pretraživanje
Navigacija
Login

Tailored4WP
www.tailored4wp.com

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

Standardi
Problemi koje nismo znali da imamo

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

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

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

�ݺ�ߣ

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

More Related Content

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