středa 21. července 2010

Pravidla tvorby webu

A dost! Na webu je dnes mnoho samozvaných profesionálních webových studií a všechny jsou přesvědčeny, že je jejich práce skutečně odvedená profesionálně, ovšem při pohledu na výtvory těchto firem se může mnoha lidem udělat značně nevolno. Nebudu se snažit nikoho přesvědčovat, obzvlášť ne senior webdesignery, s jejich léty prověřenými postupy, které by se ovšem daly zařadit mezi muzejní kousky. Naopak chci pomoci Vám, mladým webdesignerům, k rychlejšímu prosazení v oboru a k celkovému nabízení lepších služeb. K tomuto účelu jsem vypracoval seznam nejčastějších chyb a nedostatků, se kterými se můžete denně na webu setkat. Snažte se těmto chybám vyvarovat a dodržujte má doporučení, pomůžete tím urychlit vývoj webu a razantně zpříjemníte práci návštěvníkům vašich webových stránek.

Moderní web by neměl obsahovat:

  • Vstupní stránku
  • Dlouhý bezvýznamný úvodní text
  • Layout tvořen tabulkami
  • Dynamicky generovanou nebo embeded navigaci
  • Nesmyslné ikony a "ubírače prostoru" (počitadla, validiní HTML a CSS, online uživatelé, apod.)
  • Nekontrastní texty
  • Nevkusné animace
  • Mnoholi nevyužitých JavaScriptových knihoven ( Kvůli jednomu efektu načítat celé jQuery? )
  • CSS hacky ( Web se dá nastylovat i bez nich a ČISTĚJI )
  • Poskakující texty ( všechno co se hýbe se špatně čte - platí hlavně v menu )
  • Stylování textu za pomocí tagu FONT.

Má doporučení - Používejte:

  • HTML kostru dobře vypadající i bez zapnutého CSS
  • Stylované odkazy:
    • barevně a stylově odlišené od ostatního textu
    • hover efekty (uživatel tak vycítí funkčnost)
  • Správnou sémantiku inline tagů (pro HTML5 to platí dvojnásob)
  • Rozčlenění nadpisů
  • Správné odstavce
  • Podrobně vyplněnou hlavičku (title, desc, keyword, robots, autor, apod. )
  • Větší výšku řádků pro lepší čitelnost
  • U rozsáhlejších dokumentů tlačítka "Back to TOP"
  • Alternativní styly pro tisk

Každý web by měl obsahovat:

  • Ikonu home
  • Kontaktní formulář
  • Odkazy "Nevíte kam dále?" či "Související články"
  • Detailnější popis a shrnutí v patičce a kontakt na správce webu.
  • Bublinové nápovědy
  • Soubor robots.txt
  • Soubor sitemap.xml
  • CoolUrls
  • AcessKeys

Dynamický web by měl obsahovat:

  • Tagy (tags cloud)
  • Unifikované místo pro "chybové zprávy" a případně "progress bar"
  • Inteligentní validátor formulářů, který nesmaže předchozí data při chybně zadaném poli
  • RSS + ATOM
  • Napojení na sociální weby

Dobrovolné:

  • U nadpisů v podobě ikonky tlačítko "go-to-previous-heading"
  • Komprimované obrázky jako webslices, pro omezení počtu požadavků na server
  • Komprimování CSS stylů, HTML kódu a JavaScriptu (Na finální verzi webu je přehledný kód plný komentářů zbytečný a můžete tím částečně odlehčit internetové konektivitě Vašeho serveru)
    Pozn. Samozřejmě si verzi s komentáři ponechte pro budoucí úpravy!
Pokud Vás napadají další prohřešky a doporučení, prosím, podělte se o ně s námi v komentářích pod článkem.

1 komentář:

Josh řekl(a)...

Co to je za hromadu kecu? V celym postu zaznely jen tri "opodstatneni" tech tvych doporuceni... a opodstatneni je v uvozovkach protoze se tak ani tri vysvetlujici slova nedaj brat...
To tady mas tak sirokou zakladnu ctenaru a hlavne uctivatelu, kteri zacnou nekompromisne dodrzovat kazde doporuceni co tu zverejnis, bez toho aniz by se zajimali proc by meli?
Pochybuju...
Priste tady neztracej cas nesmyslnym mlacenim prazdne slamy a radsi se zamer na jedno z tech tvych doporuceni... pekne si ho obhaj, vysvetli jak to ma vypadat a jak to nema vypadat...
takovej post by mel totiz 100x vetsi hodnotu nez to cos predvedl tady. Pro tebe, pro me, nahodneho kolemjdouciho i tve uctivatele :D