T-Mobile verzus Orange

Prvý dojem

Už pri prvom prezretí si môžeme všimnúť veľké rozdiely medzi porovnávanými stránkami. T-Mobile má úvodnú stránku plnú informácií, ktoré plnia funkciu reklamných pútačov. Orange má na úvodnej stránke minimum takýchto informácií, ale dominuje na nej veľký reklamný banner. Rozdielny je aj čas, ktorý stránky potrebujú na svoje zobrazenie, kde Orange je vďaka jednoduchosti stránky jasný víťaz. Obe stránky sú elegantné, prehľadné a originálne.


Pohľad do kódu [Orange.sk]:

- Kód JavaScriptu je zle definovaný. Na stránke je chybne použitý len atribút LANGUANGE, ale povinný atribút TYPE je vynechaný. Práve atribút TYPE identifikuje o aký typ skriptu presne ide!

- Element BODY obsahuje nepodporované atribúty (VLINK, TOPMARGIN a podobne). Tieto atribúty by mali byť nahradené vhodným definovaním vlastností v CSS.

- Obrázky nemajú špecifikovaný ALT atribút. Tento atribút je dôležitý pre hendikepovaných, lebo nahrádza informačnú hodnotu obrázku.

- Pri tabuľkách a iných prvkov sú používané nepodporované atribúty (napr. pri elemente TR atribút HEIGHT, pri elemente IMG atribút NAME). Tieto atribúty by mali byť nahradené definíciami vlastností v CSS.

- Niektoré elementy na stránke nie sú uzavreté alebo obsahujú prevyšujúce konečné značky. Nezatvorené elementy alebo nadbytočne konečné značky môžu spôsobiť napr. rozpadnutie stránky, či iné zobrazovacie problémy.

- Chýbajúce konečné značky, ktoré uzatvárajú element. Napr. pri elementoch A môže v takomto prípade nastať situácia, že odkaz sa rozšíri aj o ďalší text, prvky, ktoré už do odkazu nepatria.

- Absencia dôležitých elementov, ktoré obsahuje hlavička stránky (meta-tagy). Úplne chýbajú nepárové elementy DESCRIPTION a KEYWORDS, ktoré sú pomerne dôležité pre vyhľadávače a element TITLE je stále rovnaký. Hodnota elementu TITLE by sa mala meniť podľa toho, kde presne sa v štruktúre stránky nachádzame!

- Celková podivná architektúra stránky. Opakujúce sa elementy HTML, TITLE a podobne, ktoré by mali byť na stránke jedinečné, sú len malým príkladom chaosu, ktorý sa nachádza v kóde tejto stránky.


Kód stránky je už veľmi starý a pomerne nezvládnutý. I keď väčšina chýb, ktoré na stránke nájdete súvisia s absenciou ALT atribútov, či nesprávnym uzatvorením otvorených elementov a podobne. Autori tohto portálu mali byť pri jeho tvorbe dôslednejší!


Pohľad do kódu [T-Mobile.sk]:

- Ich stránka je takmer valídna, obsahuje len tri chyby, ktoré autori urobili asi z roztržitosti. Jedná sa o chybu zdvojeného ALT atribútu pri obrázkoch v prihlasovacom formulári. Odstránením týchto nadbytočných atribútov bude ich stránka plne valídna podľa zvolenej normy XHTML 1.0 Transitional, čo je chvályhodné. Atribút ALT slúži ako alternatívny popis „obsahu“ obrázku. Tento atribút je dôležitý napríklad pre nevidiacich alebo ľudí, ktorí majú vypnuté zobrazovanie obrázkov. V prípade, že obrázok slúži len na dekoratívne účely, zvykne sa nevypĺňať.

- Všetky dôležité elementy (meta tagy), ktoré obsahuje hlavička stránky, sú správne vyplnené. DESCRIPTION, KEYWORDS a TITLE sú dôležité pre vyhľadávače, pri čom najväčšiu váhu z nich má TITLE. Hodnota TITLE sa mení podľa toho, kde presne sa nachádzame v štruktúre stránky.

- CSS štýly by mohli byť značne menšie, keby sa využívala efektívnejšie dedičnosť, zlučovanie podobných vlastností a nahradzovanie rozšíreného zápisu vlastností ich jednoduchšou formou (napr. background-color a background-image sa dajú definovať aj pomocou background).


Z celkového hľadiska je XHTML A CSS kód zvládnutý na veľmi dobrej úrovni! Samozrejme ešte stále sa nájdu miesta, kde by sa to dalo výrazne vylepšiť, ale tento stav je uspokojivý a autori týchto stránok odviedli slušnú prácu.


Rýchlosť zobrazenia stránky [Orange.sk]:

- Celková veľkosť stránky je 47 991 bajtov. Orange.sk sa návštevníkovi s pripojením 56k (dial-up) zobrazí do 10 sekúnd. To je veľmi dobré, ale ideálne by bolo, keby to bolo ešte trochu menej. Podstatné zrýchlenie zobrazenia stránky by autori dosiahli, keby prešli z tabuľkového layoutu na CSS layout.

- Veľkosť všetkých obrázkov na stránke je len 5 820 bajtov, čo je veľmi dobré. Stránka sa vďaka tomu zobrazí veľmi rýchlo!

- Celková veľkosť CSS štýlov je až 23 115 bajtov, čo je neúmerne veľa vzhľadom na jednoduchosť portálu. Značné zmenšenie veľkosti štýlov by autori mohli dosiahnuť lepším používaním rôznych predností CSS.

- Celkový počet HTTP požiadaviek je až 26, čo je pomerne dosť. Autori by mali používať menšie množstvo obrázkov. Každá HTTP požiadavka navyše znamená určité spomalenie načítania stránky.


Tomuto portálu by rozhodne pomohlo, keby mala menší počet HTTP požiadaviek a menšiu veľkosť CSS štýlov, ktoré ju môžu značne spomaľovať. Ich zredukovaním by táto stránka bola ešte rýchlejšia.


Rýchlosť zobrazenia stránky [T-Mobile.sk]:

- Celková veľkosť úvodnej stránky je až 141 973 bajtov, čo znamená, že stránka sa na pripojení 56K (dial-up) zobrazuje až 29 sekúnd. V súčasnosti ešte stále platí fakt, že väčšina slovenských užívateľov internetu disponuje pomalým pripojením. Väčšina užívateľov je ochotná čakať na zobrazenie stránky až 10 sekúnd, potom ich kroky smerujú inde, väčšinou ku konkurencii.

- Veľkosť všetkých obrázkov na stránke je až 72 709 bajtov. Počet obrázkov (56) by sa mal zredukovať a najmä by na ne mala byť použitá lepšia kompresia.

- Celková veľkosť CSS štýlov je až neuveriteľných 46 200 bajtov. CSS by malo byť značne zjednodušené, ak nie komplet prerobené. I keď T-Mobile.sk je pomerne veľký portál, nevidím dôvod, aby CSS štýly dosahovali takých mamutích veľkostí. Myslím si, že veľkosť CSS štýlov je možné niekoľkonásobne zmenšiť.

- Celkový počet HTTP požiadaviek je až 66, čo značne spomaľuje zobrazenie tejto stránky. Redukovaním tohto vysokého počtu HTTP požiadaviek, napr. zredukovaním počtu obrázkov a alternatívnych štýlov, sa zvýši rýchlosť odozvy stránky a jej zobrazenia návštevníkovi.


Ideálna veľkosť úvodnej stránky by nemala presahovať 30 – 60 KB, pričom z toho veľkosť CSS by nemala presahovať 4KB - 8 KB. Autori by mali zapracovať najmä na veľkom počte obrázkov a gigantickej veľkosti všetkých CSS štýlov.


Orange.sk z hľadiska prístupnosti a použitelnosti:

- Stránka neobsahuje mapu stránok, ktorá je pomerne dôležitá pre hendikepovaných. Mapa stránok uľahčuje orientáciu v štruktúre stránky.

- Niektoré časti stránky sú po vypnutí podpory JavaScriptu nefunkčné (napr. funkcia rýchleho vyhľadávania). Stránka by mala byť vytvorená tak, aby ostala funkčná, aj keď návštevník nemá k dispozícii JavaScript alebo si ho zakázal.

- Stránka sa nesprávne zobrazí po vypnutí štýlov. Pri vypnutých štýloch by sa mala zobraziť v štruktúrovanej podobe, nevytvárajúc žiadnu formu.

- Element TITLE by nemal obsahovať stále tú istú hodnotu. Pre hendikepovaných je práve hodnota TITLE prvým údajom, ktorý ich napríklad informuje o zmene obsahu stránky.

- Odkazy sú nedostatočne zdôraznené a identifikované. Niektoré odkazy používajú rovnaký text, i keď smerujú na rôzne miesta. Jednoznačný text odkazov pomáha hendikepovaným lepšie identifikovať, kam ich odkaz zavedie. Všetky odkazy na stránke by mali byť podčiarknuté, niektorí užívatelia nedisponujú možnosťou rozlíšenia zmeny farby textu odkazu.

- K vstupným poliam vo formulároch nie sú priradené elementy INPUT. Element INPUT označuje / identifikuje vstupné pole formulára.

- Stránka nemá identifikovaný jazyk v ktorom je jej obsah napísaný. Identifikovanie použitého jazyka sa dá dosiahnuť atribútom LANG v elemente HTML. Identifikovanie použitého jazyka je dôležité pre hendikepovaných. Ich čítačky si potom prestavia syntetizátor reči do určeného jazyka.


Z hľadiska použiteľnosti a prístupnosti má táto stránka viaceré vážne nedostatky. Autori stránky by mali na ich odstránení okamžite popracovať, lebo takto prichádzajú značnú klientelu, ktorú tvoria hendikepovaní užívatelia.


T-Mobile.sk z hľadiska prístupnosti a použitelnosti:

- Všetky obrázky majú správne vyplnený ALT atribút, ktorý je pre hendikepovaných užívateľov nesmierne dôležitý. Atribút ALT nesie informáciu, ktorá nahrádza obrázok.

- Väčšina odkazov nie je dostatočne zvýraznená. Každý odkaz by mal byť podškrtnutý. Zvýraznenie inou farbou, či zmenou farby pri hover efekte je nedostatočné.

- Niektoré odkazy majú rovnaké názvy, ale smerujú na rozdielne miesta. Každý odkaz by mal byť jedinečne identifikovateľný. Pre hendikepovaných je nesmierne dôležité, aby odkazy, ktoré smerujú na rôzne miesta, neboli rovnako označené (textom medzi tagmi A).

- Polia v prihlasovacom formulári nemajú priradený element LABEL, ktorý slúži pre označenie každej vstupnej položky formulára. Tento element je dôležitý pre hendikepovaných, lebo im uľahčuje orientáciu vo formulári. Element LABEL sa dá vhodne nahradiť atribútom ALT pri elemente INPUT.

- Stránka nevyužíva elementy určené pre nadpisy (H1 až H6) a podobne. Tieto zdôrazňovacie prvky slúžia pre lepšiu identifikáciu jednotlivých častí stránky, návštevník potom vie, čo konkrétne je nadpis prvej úrovne, druhej a podobne. Používaním zdôrazňovacích prvkov sa Vaša stránka stáva zrozumiteľnejšou aj pre vyhľadávače, ktoré sa Vám potom odmenia lepšou pozíciou vo výsledkoch.

- Stránka je plne funkčná aj po vypnutí podpory JavaScriptu. Niektoré prehliadače nemajú podporu JavaScriptu a niektorí ľudia si ho vypínajú, preto by mala byť stránka funkčná aj bez jeho podpory.

- Stránka obsahuje odkaz na mapu stránok, ktorá zjednodušuje orientáciu v štruktúre stránky. Jej existencia je dôležitá nielen pre hendikepovaných, ale i pre užívateľov, ktorí si chcú uľahčiť prácu so stránkou.

- Stránka nemá identifikovaný jazyk v ktorom je jej obsah napísaný. Identifikovanie použitého jazyka sa dá dosiahnuť atribútom LANG v elemente HTML. Identifikovanie použitého jazyka je dôležité pre hendikepovaných. Ich čítačky si potom prestavia syntetizátor reči do určeného jazyka.


T-Mobile.sk z hľadiska použiteľnosti a prístupnosti predstavuje na slovenské pomery nadpriemernú stránku, ale stále má čo doháňať. Je sympatické, že autori nezabudli napr. na mapu stránok, ale na druhú stranu je neprístupné, aby nepoužívali nadpisy a iné zdôrazňovacie prvky. Autori by mali svoje úsilie dotiahnuť do konca.


Záverečné vyhodnotenie

Obe stránky nie je problém nájsť vo vyhľadávačoch. Orange je dokonca na prvom mieste, keď jeho názov zadáte ako hľadaný výraz v Google. T-Mobile je pri rovnakom postupe až na desiatom mieste, ale predbehli ho len ostatné pobočky v iných krajinách.

T-Mobile sa za svoju stránku rozhodne nemôže hanbiť, ale nájdu sa na nej pozoruhodné nedostatky (nadmerná veľkosť, nepoužívanie zdôrazňovacích prvkov). Orange je na tom z niektorých hľadísk horšie, ale pri svojej stránke dopláca najmä na jej vek. Určite by nebolo na škodu, keby spravili redizajn. V každom prípade obe spoločnosti majú pred sebou ešte kus práce.

http://www.t-mobile.sk/ a http://www.orange.sk/

Michal Slančík / http://slancik.net/

Súvisiace články:
Pelikan.sk – letenky online