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

Isključite zvuk telefona

Uključite mobilne i tablet uređaje

VSInternet nekad Internet danas

Internet nekadInternet Explorer, Netscape...

Best viewed withInternet Explorer– Every Webmaster in early 2000s

Do websites need to look exactly the same in every browser?– 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.7

3.974

4.24.274.34.54.524.65

4.85

5.35.55.86.37

7.7

810

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

Zakon velikih brojeva

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

#

Mobile traffic inNovember 2011

21,892

Mobile traffic inNovember 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

#

Temeljni principi

Univerzalni pristup informacija

PristupačnostAccessibility

UporabivostUsability

Web standardiOd mobitela do desktopa

Glavni tehnički sastojciFluid grids

CSS3 Media queries

Flexible images

Fluid grids (%)

Fluid grids (%)/* CSS *//* Remember to comment calculations */

article { width: 65.957446808511%; /* 620 / 940 */}

aside { width: 31.914893617021%; /* 300 / 940 */}

Fluid grids (%)

% % % % % %

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) { ... }@media only screen and (min-width: 992px) { ... }@media only screen and (min-width: 1382px) { ... }

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

Flexible images

Flexible images/* CSS document */img { max-width: 100% }

img,object,embed,video { max-width: 100% }

Flexible images

1000 x 750 px168 KB

600x450px88 KB

300x225px30 KB

Input

Miš i tipkovnicaPreciznost, brzi unos...

Touch-screenIntuitivnost, “WYSIWYG”...

Detekcija mogućnostiModernizr

Na što treba pripaziti

SadržajPravi sadržaj, pravi problemi

Sadržaj

Naslovna O nama Katalog Kontakt

Kategorija

Proizvodi

1. RAZINA

2. RAZINA

3. RAZINA

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

Wireframe + skica

HTML/CSS

DizajnDefinirajte sistem, ne statičan dizajn za jednu rezoluciju

Dizajn

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

HTML/CSS + testiranje— Semantika (header, footer, article, aside...)— Web standardi— Content first— ARIA/accessibility

— role=“banner”— role=“navigation”— role=“main”— role=“complementary”— role=“contentinfo”

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

Mobile firstKrenite od mobitela prema ostalim uređajima

Mobile first

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

SučeljeSučelje mora biti jednostavno, intuitivno i funkcionalno

Sučelje

Pretraživanje

Navigacija

Login

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

Pitanja i odgovori

Hvala

Lucijan Blagonićlucijan@blagonic.com

Blagonić Brothers@lucijanblagonic