1.
Web designerʼs guide to
the Web
Honza Sládek Ondřej Válka
@honzasladek @ondrejvalka
honzasladek.com valka.info
http://flic.kr/p/6ZMFj

2.
The Web has changed.
I feel it in the water.
I feel it in the earth.
I smell it in the air.
Much that once was is lost, for none
now seems to remember it.
- web se zmenil

3.
Before Zeldman
The early 90ʼs
- ale pojdme se vratit na zacatek
- začneme rekapitulací minulosti
http://flic.kr/p/r9sUq

4.
Larry Sergey
- uplynulo hodne vody od doby, kdy se Larry a Sergey potkali na Stanfordu

5.
Larry Sergey
- a stali se partnery

6.
800 × 600
- byly to doby, kdy web bylo mozny prohlizet jen na zaflusanem CRTcku

7.
- mobil mel tedhy malo kdo
- vite, kdy byla odeslana prvni SMS (Finsko, 1993)

8.
16 mil.
- pripojeni k internetu mělo 16 mil. uživatelů

9.
Browser wars
- a znali jsme jen války prohlížečů

10.
After Zeldman
About 2001
- a pak se to stalo
http://flic.kr/p/53TUE

11.
table
less
- v kódovacím světě bylo důležité, že jste nepoužívali tabulky pro layout
- WEB STANDARDS PROJECT

12.
0,7 bil.
- připojeno vice nez 0,7 mld. lidí

13.
1024 × 768
- zvětšilo se rozlišení obrazovky

14.
Today
Who is this @zeldman?
- zkratka a dobre, do dneska bylo dost dobre mozne prohlizet web jen na desktopu
- jedinna velka zmena byly beztabulkove layouty, tj. standardy
http://flic.kr/p/2jvkF

15.
1,9 bil.
- jenze dnes je pripojeno temer 2 miliardy lidi

16.
480 × 32
800 × 60
1024 × 768
960 × 640
- prisly laptopy, mobily, iPady, Kindly...

17.
- mame 5 miliard mobilu na 6,8 miliard lidi
- OLPC neni uplne uspesne, ale vice lidi ma mobil nez pristup na k elektrine (Afrika)

18.
530 mil.
- ctvrtina uzivatelu internetu jsou mobilni uzivatele

19.
- koncem roku 1999 prekrocily nakupy na Amazonu 1 miliardu
- za posledni rok nakoupili jen mobilni zakaznici pres 1 miliardu

20.
- 500 mil. users
- more than 150 million active users accessing Facebook through their mobile devices
- mobile users devices are twice more active on Facebook than non-mobile users

21.
Mobile phones will
overtake PCs as the most
common web-access
devices worldwide by
2013.
Gartner
- konkurence tvrdi 2015

22.
? ? ? ?
? ? ?
? ? ?
? ? ? ?
? ? ? ?
? ? ?
? ? ?
? ? ? ?
- tak ještě jednou: je tu mobilni web, mo-bil-ni web
- a co maji spolecneho uzivatele mobilni a desktopovi?
- hledaji informace

23.
- a informace je nutne dorucit ve forme vhodne pro konkretni zarizeni

24.
Responsive Web Design
Design, který reaguje
- definoval Etan Marcotte, z Happy Cog, spoluautor Handcarfted CSS, Designing with Web
Standards
- navrh respektujici ruzna rozliseni
http://flic.kr/p/6ngGKN

25.
This changes everything. Again.

26.
- program WebExpa neni na iPhonu nic moc

27.
valka.info/projects/webexpo2010
- 10 radku kodu CSS, pul hodiny prace
- neni to idealni reseni, ale jak to bylo snadne

28.
<link
media="print"
href="print.css"
rel="stylesheet">
- pamatujete na tiskove stylopisy?

29.
<link
media="only
screen
and
(max-­‐device-­‐width:
480px)"
href="iphone.css"
rel="stylesheet">
- tzv. media queries byly pro CSS3 rozsireny a maji ted siroky zaber

30.
@media
screen
and
(max-­‐device-­‐width:
480px)
{
…
}

31.
@media
screen
and
(resolution:
163dpi)
{
…
}
@media
screen
and
(min-­‐width:
480px)
{
…
}
@media
screen
and
(orientation:
landscape)
{
…
}

32.
- web autora loga Firefoxu a Thunderbirdu
- husty designer, ktery si weby koduje sam!

33.
- plynule se roztahuje, vyzkousejte sami

34.
- demonstracni web pro clanek o Responsive Web Design v .net magazine

35.
Itʼs different
to design!
- neni to tezke
- muze to byt rychle a funkcni stejne jako tiskove stylopisy

36.
960 px
- jen ten hloupy pixel perfect design musi umrit

37.
www.on-car.com
www.in-a-bus.com
- kreativni kampan, web ve Flashi a reklama v tramvaji
- kolik lidi si doma pujde otevrit ten web, kdyz si ho muze otevrit na iPhonu a... nemuze
- nepoukazujeme na Flash, ale na nesmyslnost inzerce/webu

38.
Make love!
- kodér je designér a designér je kodér
- nebudme ale schizofrenici: staci DOSTATECNE komunikovat

39.
What if…
- jenze co kdyz se vas web nikdo neuvidi?

40.
Semantics
Ehm, again?
- doručit informaci, každému, kamkoli, kdykoli
- a navíc pohodlně
- proto je potreba mit dobre oznackovana data
http://flic.kr/p/7Ukd4W

41.
HTML is your API.
- a jeho prvni aplikace je CSS: jedna z moznosti prezentace dat

42.
Microformats
+
Microdata
+
RDFa

43.
<div
class="vevent
talk
{id:
70}
design
clearfix
empty">
<header>
<h4>Jan
Sládek,
Ondřej
Válka</h4>
</header>
<div
class="fl">
<h5
class="summary">The
web
designer's
guide
to
the
web</h5>
<p>…</p>
<div
class="fr">
<span
class="where"><span
class="location">Design
Hall</span>
<span
class="dtstart">
<span
class="value-­‐title"
title="2010-­‐09-­‐25T14:30:00+02:00">
14:30
</span>
</span>
</span>
<p>…</p>
</div>
</div>
</div>
- mikroformaty vam muzou velmi usnadnit praci

44.
RSS, iCal, vCard…
- je krucis nutne pouzivat pro RSS zvlastni XML soubor?

45.
Google Rich Snippets
- uvidi vas web vubec?

46.
Google Magic Snippets
- neuvidi, ale uvidi data, ktera na webu mate

47.
- uvidi vas web vubec?
- na spravnem zarizeni?

48.
So what!?
Hey Joe, where you going…
http://flic.kr/p/7bcPXT

49.
Good for today is not
good enogh.
- někeří řeknou, že dneska to ještě není tak markantní a mohou počkat
- jenže jak dlouho vydrží váš web?
- můj třeba 2 roky...

50.
We can choose to
ignore all of this.

51.
Sell the desktop-only
Web sites for another
3 years.

52.
Or we can start
delivering what people
really need.

53.
Information.
Pure. To everyone. Everywhere.

54.
The choice is ours
del.icio.us/ondrejvalka/webexpo2010
http://flic.kr/p/y6jNe