TÉMY

O AUTOROVI

Ahoj, volám sa Martin a toto je môj blog. Zaoberá sa webom, technológiami, novinkami ako aj všednými témami nášho života.

Zopár krokov k lepšiemu webu

14. október 2007 16:40 Web, Tipy a triky 46 komentárov

Pri surfovaní po slovenských weboch a blogoch som zistil, že nie všetky stránky dodržiavajú pravidlá tvorby prístupného a použiteľného webu. Po krátkom zamyslení vám prinášam zopár pravidiel ako vytvoriť lepší web.

Zmysluplné nadpisy

Ak začínate čítať článok v novinách, či knihe, väčšinou si ho prebehnete celý očami, aby ste získali predstavu o tom, čo sa dozviete. Zachytíte zopár slov, nadpisy. Ak vás zaujme, začnete čítať. Presne tak funguje aj web.

Stačí zopár jednoduchých, pútavých slov ...

Nadpis článku a perex rozhodnú o tom, či si používateľ článok otvorí - záleží na jednom kliknutí - tak veľa ale aj málo.

Po zobrazení celého článku používateľ potrebuje zistiť, ako článok vyzerá. Nielen rozdelenie do odsekov, ale aj zmysluplné nadpisy dotvárajú správnu štruktúru obsahu. Preto zohľadnite obsah nasledujúcich viet, odsekov a vytvorte nadpis, ktorý čitateľa zaujme.

Text na stránkach

Okrem už spomínaných nadpisov je potrebné aj logicky štruktúrovať text. Vo všeobecnosti platí - samostatná myšlienka v samostatnom odseku. Takto rozdelený text sa jednoduchšie číta, čitateľ sa v ňom nestráca.

Ak potrebujete zvýrazniť nejakú časť textu, prosím použijte tagy na to určené <em> a <strong>.

<em>text uzatvorený v tagu em bude napísaný kurzívou</em>

<strong>text bude tučný</strong>

Prosím, podčiarkujte hypertextové odkazy

Jedna z vecí, ktorú nemám rád je, ak developer zruší podčiarkovanie hypertextových odkazov. Následne je niekedy náročné, ba priam až nemožné určiť, čo je odkaz a čo text. Používatelia bývajú zmätení a veľa času trávia hádaním.

Je dobrým zvykom na webe podčiarkovať hypertextové odkazy. V ostatnom čase sa stretávame aj s orámovaním (border) odkazov - čiarkovaný (dashed), bodkovaný (dotted).


a{
	     text-decoration: underline;
}


a{
     text-decoration: none;

        border-bottom: 1px dotted #336699;
}

Chcel by som preto poprosiť všetkých, ktorí majú možnosť ovplyvniť túto vlastnosť hypertextových odkazov, aby ich podčiarkli. Zmena farby nie je vždy postačujúca. Dotýkam sa už prístupnosti stránok - ľudia s poruchou vnímania farieb môžu mať potom problém rozlíšiť odkaz od ďalšieho textu.

Štruktúra odkazov

Každá virtuálná zložka (teda text medzi dvoma /) by mala obsahovať kľúčové slovo charakteristické pre váš web. Napríklad www.vasweb.sk/nazov-produktu/

Takýto prístup je nielen lepší z hľadiska SEO ale takýto typ adresy je ľahšie zapamäteľný. (Medzi nami: skúste www.vasweb.sk?index.php?type=page&display=web&id=99007 nadiktovať známemu do telefónu :)

Mapa stránok

Je dobrý nástroj, ktorý dopĺňa použiteľnosť a prístupnosť stránok. Najmä pri rozsiahlejších internetových stránkach môže byť pre nového návštevníka problém v konečnom krátkom čase zorientovať sa.

Nezabúdajte na ostatných (prístupnosť webu)

Vždy, ak obrázok nesie informáciu, musí obsahovať ALT text. Alternatívny text ocenia nielen ľudia s pomalším internetovým pripojením, vypnutými obrázkami, ale aj vyhľadávače, či hendikepovaní ľudia. Vyhľadávače a nevidiaci bez popisku nezistia, čo je na obrázku zobrazené.

A myslím, že nie je taktiež opodstatnené pridávať alternatívny text ku každému obrázku - stále sa môže stať, že obrázok dopĺňa dizajn. V takomto prípade radšej alt text nevypĺňajte - zbytočne bude obťažovať a komplikovať čítanie webu najmä nevidiacim používateľom webu.

Samozrejme, toto je len zopár tipov, ktoré robia weby lepšími a nepokrývajú celú problematiku tvorba internetových stránok. O tom neskôr, nabudúce. Ak máte nejaký tip, napíšte mi pomocou kontaktného formuláru alebo nechajte odkaz v diskusii.