Upload
lucijan-blagonic
View
571
Download
5
Embed Size (px)
DESCRIPTION
Citation preview
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