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

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

Embed Size (px)

DESCRIPTION

 

Citation preview

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

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

Page 2: [WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!
Page 3: [WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!
Page 4: [WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!
Page 5: [WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!

Isključite zvuk telefona

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

Uključite mobilne i tablet uređaje

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

VSInternet nekad Internet danas

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

Internet nekadInternet Explorer, Netscape...

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

Best viewed withInternet Explorer– Every Webmaster in early 2000s

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

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

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

Internet danasChrome, Firefox, Opera, Safari, Internet Explorer...

Page 12: [WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!
Page 13: [WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!

Navike korisnika redovito se mijenjajuKorisnici žele informacije...

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

Tijekom cijelog dana

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

Na svakom uređaju

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

U raznim aktivnostima

Page 17: [WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!
Page 18: [WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!
Page 19: [WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!
Page 20: [WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!
Page 21: [WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!
Page 22: [WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!

VS

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

Tehnička stranaNovi izazovi za developere i dizajnere

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

Promjena u načinu razmišljanjaTehnologija i najbolja praksa...

Page 25: [WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!
Page 26: [WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!

Web tipografija

Page 27: [WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!
Page 28: [WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!

Zašto responzivni web dizajn?

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

Responzivna stranica jesamo mobilna web stranica.

!"#$

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

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

?

? ?

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

Responzivna stranica je pristupačna korisnicima neovisno

o uređaju koji koriste.

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

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

Page 33: [WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!
Page 34: [WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!

Zakon velikih brojeva

Page 35: [WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!
Page 36: [WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!

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

#

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

Mobile traffic inNovember 2011

21,892

Mobile traffic inNovember 2012

43,038#

Page 38: [WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!
Page 39: [WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!

407.3%conversion rate increase

on Android devices

591.4% revenue growth on

Android devices

#

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

20.3%conversion rate increase on non-mobile devices

41.1%revenue growth on non-

mobile devices

#

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

Temeljni principi

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

Univerzalni pristup informacija

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

PristupačnostAccessibility

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

UporabivostUsability

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

Web standardiOd mobitela do desktopa

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

Glavni tehnički sastojciFluid grids

CSS3 Media queries

Flexible images

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

Fluid grids (%)

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

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

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

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

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

Fluid grids (%)

% % % % % %

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

CSS3 Media Queries

Viewport size Pixel ratio Orientation

...

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

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

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

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

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

Flexible images

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

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

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

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

Flexible images

1000 x 750 px168 KB

600x450px88 KB

300x225px30 KB

Page 56: [WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!
Page 57: [WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!
Page 58: [WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!

Input

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

Miš i tipkovnicaPreciznost, brzi unos...

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

Touch-screenIntuitivnost, “WYSIWYG”...

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

Detekcija mogućnostiModernizr

Page 62: [WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!
Page 63: [WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!

Na što treba pripaziti

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

SadržajPravi sadržaj, pravi problemi

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

Sadržaj

Naslovna O nama Katalog Kontakt

Kategorija

Proizvodi

1. RAZINA

2. RAZINA

3. RAZINA

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

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

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

Wireframe + skica

HTML/CSS

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

DizajnDefinirajte sistem, ne statičan dizajn za jednu rezoluciju

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

Dizajn

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

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

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

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

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

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

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

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

Mobile firstKrenite od mobitela prema ostalim uređajima

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

Mobile first

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

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

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

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

Sučelje

Pretraživanje

Navigacija

Login

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

Sučelje

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

Analizirajmo

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

Ciklopeawww.ciklopea.com

Page 80: [WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!
Page 81: [WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!

WinDayswww.windays.hr

Page 82: [WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!
Page 83: [WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!
Page 84: [WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!
Page 85: [WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!

Tailored4WPwww.tailored4wp.com

Page 86: [WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!
Page 87: [WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!

Izazovi

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

Optimizacija

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

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

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

Tehnologija

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

StandardiProblemi koje nismo znali da imamo

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

Proces

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

Planiranje 1 2 3 4

Dizajn 1 2 3 4

Development 1 2 3 4

Iteracija Finalno

I1 I2 I3 I4

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

Web-dizajn je mrtav,živio responzivni web-dizajn!

PS. to je ista stvar!

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

Pitanja i odgovori

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

Hvala

Lucijan Blagonić[email protected]

Blagonić Brothers@lucijanblagonic