Webdesign I
PV005 Služby počítačových sítí Tomáš Obšívač | 2010
Webdesign za 90 minut?
No way! A za 270? :-)
 Web?!
 Návrh – design?!
 Informační architektura, obsah (texty) a vzhled, použitelnost
 Realizace
 CMS, přístupnost
 Provoz
 Analýza návštěvnosti, marketing, SEO
Děkujeme sire Berners-Lee!
 Net
III: International Information
Infrastructure
↓
 Web ~ hypertext
WWW: World Wide Web
↓
 Graf
GGG: Giant Global Graph
 Mobilní web
Web?! | Design | Realizace | Provoz
ARPANET
1969
e-mail 1972
TCP 1974
IPv4 1980
Idea 1945
← 1989 →
Za 5 let?
A za 50?
Dnes?!
Gimme some numbers…
 Přes 100 mil. webů,
asi 30 mld. stránek
 + 500x deep web (?!)
 2/3 ve vyhledávačích
 Index Jyxo: 181 mil.
(123, 166, 97), Morfeo:
164 (172, 144, 108)
 Během této přednášky
vzniknou tisíce dalších 2003 2004 2005 2006 2007 2008*
0
100000
200000
300000
400000
500000
1600
1199
899
539
449
249
Počet Cena [Kč]
 .cz domény:
 6 angl. TLD: 124 mil.
Web?! | Design | Realizace | Provoz
Jak uspět? Obsah je král.
 Designu předchází záměr. Doufám.
 Začněte plánování (nejen) webu odpověd’mi:
 Mám co říct/nabídnout?
 Bude mě to bavit i za rok?
 Uživím se tím? Mám jinou motivaci?
 Funguje jen to, co uživatelům přináší jasný
užitek.
– Marek Prokop
Web?! | Design | Realizace | Provoz
Uspořádání informací 1/2
 Informační architekt – webdesigner s chutí na
plat analytika? :-)
 IA =
– uživatelé (čtenáři) – jazyková forma, barevnost, user
centered design
– obsah – struktura webu, kategorizace obsahu
– kontext – marketingové cíle, návratnost investic
 Hledáme rovnováhu mezi cíli zadavatele a
potřebami uživatele.
Web?! | Design | Realizace | Provoz
Uspořádání informací 2/2
 Podřídit se SEO?
– Základem keyword research
 Kategorizace nabídky
– Řazení kartiček, tabule plné nálepek, …
 Zaměření na uživatele
– Persony
 Site maps, prototypes, storyboards
Web?! | Design | Realizace | Provoz
Psaní textů pro web
Copywriter...
...vznešené označení jedničkáře z češtiny?
...je prodavač za psacím strojem.
– Judith Charles
 Zaujmout, udržet, přesvědčit a přimět k akci
 Jak? Kreativní psaní, působení na city
 Jsem slepý, prosím pomozte.
 Čtení: seriál Píšeme pro web (Interval.cz)
Web?! | Design | Realizace | Provoz
Strukturování textu
 Na webu lidé nečtou, ale „skenují“. Nečekají
esej, román, vyprávění, vyplňování složenky.
 Pro udržení pozornosti využijte
 Nadpisy (max. 8 slov)
 Seznamy, odstavce
 Střídmé zvýraznění
 Popisky k obrázkům
 Obrácená pyramida (anotace)
 Stručnost – škrtejte, zkracujte
Web?! | Design | Realizace | Provoz
Grafická úprava
 Obsah je král. Nahý král? Obal prodává.
 Návštěvník rozhodne za 5 vteřin, jestli (ne)má web rád.
 Pokud se mu nelíbí, je těžké přesvědčit o čemkoliv dalším.
 Ale pozor, nejhonosnější obal mívá nej*ší obsah.
 Proto: jednoduchost, přehlednost, konzistence.
 Cíl: identita (jedinečnost), důvěryhodnost.
You know you've achieved perfection in design,
not when you have nothing more to add,
but when you have nothing more to take away.
– Antoine de Saint Exupery
Web?! | Design | Realizace | Provoz
Prvky stránky, rozmístění
 Sazební obrazec (Page grid)
– „znám“ rozměry strany (fold)
1. rozdělím na části – mřížka, zlatý řez
2. design (rozmístím titulek, navigaci, vlastní text, …)
 Navigace
 radí kam můžu?, ale taky kde jsem?
 umístěná mimo obsah (horizontální vs. vertikalní)
 konzistentní (na celém webu)
 Prázdné, bílé místo, wireframes
 Splash screen
Web?! | Design | Realizace | Provoz
Od obsahu ke vzhledu
 webstandards.org
Web?! | Design | Realizace | Provoz
“Moderní” grafické prvky
 Barevné gradienty (monochromatické)
 Odlesky („vlhká podlaha“)
 Měkké stíny
 Velké písmo, inputy
 Zaoblené rohy
 Barevnost:
 colorschemer.com/schemes/, Pixyho Generátor barevných
schémat 2, colourlovers.com
 Fotografie:
 sxc.hu, yotophoto.com, mojefoto.net, ...
Web?! | Design | Realizace | Provoz
Použitelnost (Usability)
 Čím se dosahuje?
 navigace, příjemná URL,
reakce na chyby,
nápověda, …
 Uživatelské testování
 stačí 5 uživatelů
 scénář (o čem je tahle
stránka?, obecné úkoly)
 sledovat problémy
 ptát se, ale neradit
 Web design – Nenuťte uživatele přemýšlet, S. Krug, Cpress
Web?! | Design | Realizace | Provoz
Systém pro správu obsahu
 Content Management System
 opensourceCMS.com
 Wordpress, Textpattern, Drupal, …
 Diskusní fórum (PunBB, phpBB), Wiki (Media
WIKI), blog (WordPress), galerie fotek, …
 Vkládání „textu“
 WYSIWYG editor? (TinyMCE, CKeditor)
 Wiki, Texy! či jiná syntax?
 HTML (dokonce PHP?!)
Web?! | Design | Realizace | Provoz
Vyhledávání na webu, ošetření chyb
 Funkční vyhledávání je nutnost
 Cizí fulltext
 rychle nasazený, levný
 Vlastní systém, nad svým datovým modelem
 přesný, možno omezit (metadata), výsledky pod kontrolou
 1. uživatel nechybuje,
2. když chybuje, platí 1.
 Přívětivé řešení problémů
 Vysvětlení, navigace, vyhledávání
 Prevence 404
 HTTP kódy 301 Moved Permanently, 410 Gone
Web?! | Design | Realizace | Provoz
Přístupnost (Accessability)
 Minimalizace bariér, které omezují nebo dokonce
brání návštěvníkům získat informace/použít službu.
 Zdravotní postižení (10 % populace) + tech. vybavení +
věk + úrazy + sluníčko + inteligence + omamné látky :-)
 Přístupnost vychází ze samotných základů webu a
nejde o žádnou nadstavbu. – David Špinar
 Pravidla pro tvorbu přístupných webových stránek (37
bodů)
 zákon 365/2000 Sb. § 5 účinný od 2008
 WCAG, BFW
 Tvoříme přístupné webové stránky, D. Špinar, Zoner Press
Web?! | Design | Realizace | Provoz
Spustili jsme web, koukej mámo!
 Uvedením webu do provozu práce nekončí.
 Naopak by měla začít
– Analýza a optimalizace
– Propagace
Web?! | Design | Realizace | Provoz
Zvyšování návštěvnosti?
 A k čemu je vlastně velká návštěvnost?
 – zátěž serveru, přenesená data, „helpdesk”, ...
 + žijete z objemu prodané reklamy, branding
 Konverze – proměna návštěvníka v zákazníka
 v průměru „pouze“ jednotky %
 Zvyšování kvality návštěvnosti
 Efektivní marketing (ROI)
 index.fireclick.com
 prům. session: 6 stránek za 3 minuty
Web?! | Design | Realizace | Provoz
Analýza návštěvnosti
 Co hledáme?
 kromě trendu statistik (visits, pageviews), např. odkud
přicházejí, jak dlouho setrvají, vstupní/výstupní stránky,
klíčová slova, …
 Logy webserveru
 AWStats, Analog, Webalizer, …
 combined format:
193.179.76.210 - - [06/Oct/2006:14:20:18 +0200] //
"GET /renovace/ HTTP/1.0" 200 7059 "http://domena.cz/x/" //
"Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; ...)"
 Externí služby
 Google Analytics, Yahoo! Web An., Toplist, Navrcholu, …
 Bijk.com, Monitoring-serveru.cz, Site24x7.com, …
Web?! | Design | Realizace | Provoz
Optimalizace webu
 Web Design is Dead (Ben Scratch)
 Dekorace vs. efektivní design
 First Best Guess Design není moc dobrý
 Měřitelné výsledky
1. Nalezení
2. Získání pozornosti
3. Přesvědčení
4. Výzva k akci
 Google Website Optimizer
 A/B a multivariantní testovaní
Web?! | Design | Realizace | Provoz
“Efektivní” grafické prvky
 Barevné gradienty, odlesky, blah, blah
 Call to action prvky
– tlačítka, slogany
– Unique Selling Proposition
Web?! | Design | Realizace | Provoz
Možnosti zviditelnění
 Tradiční metody
 Registrace do katalogů (www.dmoz.org)
 Public relations (tiskové zpráv, PR články)
 Direct e-mail
 Bannery
 Modernější
 Optimalizace pro vyhledávače (SEO)
 Search Engine Marketing (SEM)
 Platba za proklik (PPC) (AdWords, Sklik)
 Placené pozice (přednostní výpisy na klíčová slova)
 Affiliate – provizní systémy, kontextová reklama (AdSense,
bbKontext), viral marketing („šuškanda“), social networks, …
Web?! | Design | Realizace | Provoz
Optimalizace pro vyhledávače (SEO)
 Dlouhodobě nejvýhodnější typ investice do reklamy.
 viditelnost 1.–3. pozice 100 %, 4. 85 %, 5. 60 %
 on-page faktory
 klíčová slova (hustota), sémantické značkování (title, h1), URL, meta
keywords/description, čerstvost, dostupnost, site-size, site-age
 off-page faktory
 zpětné odkazy – PageRank, text (Google bomba), authority sites, IP
(DNS), BadRank, …
 http://www.seomoz.org/article/search-ranking-factors
 Budování odkazů (Link Building), aktuální obsah, „konkrétní“
stránky, velikost webu, stáří, chování uživatelů, doména,
traffic, …
 seo.nawebu.cz, vyhledavace.info, FF rozšíření SearchStatus
Web?! | Design | Realizace | Provoz
SEM – platba za proklik
 Pay Per Click (PPC)
 kontextová reklama
 ve vyhledávačích vs. na
webu
 Google AdWords, Sklik,
Etarget
 bbKontext a bbText,
AdFox (Centrum), MS
adCenter (Live.com), …
 Etarget (staré) průměry:
klik 2,81 Kč, CTR 2,5 %
 60 %, 50 %, 40 %, 30 %, …
 Kontrola nákladů (DRTV)
 www.google.com/sponsoredlink
s?hl=cs Eyetrack 2004
Web?! | Design | Realizace | Provoz
Uff. Co příště?!
 Příště: jaká část (realizace) vás zajímá?
 CSS?
 HTML, HTML5?
 JavaScript?
 Skripty na serveru
 Nástroje webdesignéra
 ?
 Přespříšte: GGG ~ Social Web ~ Semantic Web
 Web pro lidi
 Web pro roboty
Web?! | Design | Realizace | Provoz