Web designerʼs guide to the Web

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

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

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

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

Larry Sergey - a stali se partnery

800 × 600 - byly to doby, kdy web bylo mozny prohlizet jen na zaﬂusanem CRTcku

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

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

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

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

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

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

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

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://ﬂic.kr/p/2jvkF

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

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

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

530 mil. - ctvrtina uzivatelu internetu jsou mobilni uzivatele

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

- 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

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

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

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

Responsive Web Design Design, který reaguje - deﬁnoval Etan Marcotte, z Happy Cog, spoluautor Handcarfted CSS, Designing with Web Standards - navrh respektujici ruzna rozliseni http://ﬂic.kr/p/6ngGKN

This changes everything. Again.

- program WebExpa neni na iPhonu nic moc

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

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

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

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

- plynule se roztahuje, vyzkousejte sami

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

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

960 px - jen ten hloupy pixel perfect design musi umrit

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

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

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

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

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

Microformats + Microdata + RDFa

<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

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

Google Rich Snippets - uvidi vas web vubec?

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

- uvidi vas web vubec? - na spravnem zarizeni?

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

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

We can choose to ignore all of this.

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

Or we can start delivering what people really need.

Information. Pure. To everyone. Everywhere.

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

http://valka.info	243
http://webexpo.cz	116
http://web.summit.ifutu.tomasm.dev	17
http://webexpo.net	6
http://translate.googleusercontent.com	1
http://web.summit.ifutu.tomasm.dev.symbio.intra	1

Web designerʼs guide to the Web

by Ondřej Válka on Oct 05, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

6 Embeds 384

Statistics

Web designerʼs guide to the Web — Presentation Transcript