Webový dizajn vs. tlač: Prvky tlačového dizajnu nepatria na web - Zajtra.sk
spájame
slovenskú
IT komunitu
pridaj sa
Registrácia · Login

Peter Druska 7.1.2011
Hodnoť článok:
0 0

Webový dizajn vs. tlač: Prvky tlačového dizajnu nepatria na web

Mnohí ľudia si myslia, že webstránka je len elektronickou verziou novín, časopisu, či letáku. Nie je a ani nikdy nebude. Mnohé grafické prvky v tlači bežné, sa na web jednoducho nehodia.

Z čoho pramenia konflikty, ktoré dnes riešime vo webovom dizajne? Myslím si, že je to preto, že všetky konfliktné spôsoby sú prevzaté v plnej miere z tlačovín. Riešenie leží v prijatí metód tvorby webových sídiel odlišných od tých z tlače. Treba si uvedomiť, že web vyžaduje iný prístup, ako noviny, či kniha.

Skúsme vymenovať množinu problematických častí, ktoré boli prevzaté a stali sa tak prameňom bežných riešení na webových sídlach (to ale neznamená, že sú to správne riešenia):

  • fixné rozmery reklamných plôch,
  • fixné rozmery celého sídla,
  • delenie slov,
  • stĺpce,
  • malá veľkosť písma,
  • listovanie strán (v zmysle „ako v knihe“),
  • abecedné zoraďovanie tam, kde to nie je vhodné,
  • strach z hypertextu (neodkazovanie sa na iné konkurenčné zdroje),
  • televízny program jednej stanice vypísaný pod seba.

O flexibilných reklamných plochách som už písal ako aj o flexibilných webových sídlach. Poďme sa pozrieť na ďalšie problematické riešenia.

Delenie slov

Delenie slov prešlo z tlačovín rovnako aj na webové stránky. A síce:

  • zarovnanie naľavo spôsobí zubatý pravý okraj,
  • zarovnanie do bloku spôsobí rieky bielych znakov v texte,
  • ak sa lámu slová po slabikách, tak sa lámu zle.

Zarovnanie naľavo spôsobí zubatý pravý okraj:
Zarovnanie textu na webe doľava

Zarovnanie do bloku spôsobí rieky bielych znakov v texte:
Zarovnanie textu na webe do bloku
Zarovnanie textu na webe do bloku

Na uvedenom príklade zarovnania do bloku to nebolo tak výrazné, ale jav sa vyskytol a vyskytne sa takmer vždy. Je relatívne málo zdrojov, ktoré to robia naozaj poctivo a dobre.
Riešením pre webový text by bol slovník, podľa ktorého by sa do slov vkladali entity ­­, ktoré zabezpečia zlom slova na nový riadok, ak sa to už nevôjde. Naviac, použitím pevných medzier   sa zase zabráni zlomu na nový riadok:

<p>
Na u­ve­de­nom prí­kla­de za­rov­na­nia do blo­ku to ne­bo­lo tak vý­raz­né,
ale jav sa vys­ky­tol a vys­kyt­ne sa tak­mer vždy. Je re­la­tív­ne má­lo zdro­jov,
kto­ré to ro­bia nao­zaj poc­ti­vo a do­bre. Rie­še­ním pre we­bo­vý text by bol slov­ník,
po­dľa kto­ré­ho by sa do slov vkla­da­li en­ti­ty &shy;­, kto­ré za­bez­pe­čia zlom
slo­va na no­vý ria­dok, ak sa to už ne­vôj­de. Naviac, použitím pevných
medzier &nbsp; sa zase zabráni zlomu na nový riadok:
</p>

K tomu by sa chcelo pridať aj CSS 3, ktoré by malo riešiť parchanty: vdovy a siroty, kde uvedením celého čísla určíme počet riadkov na konci (orphans), resp. začiatku (widows) strany/stĺpca:

.clanok p {
	orphans:2;
	widows:2;
}

Táto vlastnosť sa neprejaví pri výpise celého článku na jednu stranu, ale napríklad pri použití multi-column vlastnosti alebo pri tlačení textu z webovej stránky (@media print), alebo pri prezentácii (@media projection).

Stĺpce

V novinách sú stĺpce prítomné neustále, odkedy sa tlačia. S prihliadaním na optimálnu veľkosť písma a rozmer papiera sú stĺpce z hľadiska čitateľnosti ideálnym riešením. Pri krátkom rozhovore s Tomášom Ulejom mi bolo vysvetlené, že pri tak pestrej palete veľkosti článkov, formátov a útvarov iný spôsob od stĺpcov, ako ich zmestiť na tlačenú stranu, nejestvuje. Výsledkom je viac čitateľného a pritom rôznorodého textu na jednej strane.

Stĺpce na titulnej stránke denníka SME

Prečo je toto problém na webovom sídle? Pretože web nie sú noviny. To je podstatný rozdiel. Kým noviny sú papier, držíte ich v ruke a krkvete a musíte si sadnúť do dobrého kresla s oknom za chrbtom a majú relatívne veľkú plochu, web sa číta na displeji, nedá sa chytiť a o okne za chrbtom ani neuvažujte (my s lesklými displejmi). Noviny sa čítajú lineárne, na webovom sídle sa kliká, pozerajú sa videá, počúvajú rozhovory a hrá sa s animáciami. Dva spoločné prvky, ktoré sú prienikom tlačovín a webových sídiel sú: obrázkové a textové informácie. Všetko ostatné je rozdiel.

Stĺpce na titulnej stránke webovej stránky SME.sk

Snaha o podobnosť webového sídla s tlačeným formátom je potom kameňom úrazu aj kvôli stĺpcom. Prekážkou nie je technická náročnosť ich realizácie, ale ich nepochopenie, ktoré súvisí s veľkosťou písma a s bielym miestom. Ja tvrdím, že kvalitné spravodajské webové sídlo sa dá urobiť aj bez stĺpcov s príjemným množstvom bieleho miesta. Problémom (a veľmi zaujímavým) ostáva: ako zabezpečiť, aby sa také veľké množstvo informácií, ktoré spravodajský magazín generuje, zobrazovalo aj bez nutnosti použiť stĺpce, bez nutne malého písma a s príjemnými bielymi miestami? Odpoveď zatiaľ nepoznám. Možno sa v tomto mýlim a o pár rokov sa budem sám na sebe smiať, čo som to tvrdil.

Treba pripomenúť, že keď hovoríme o stĺpcoch, tak sa jedná o stĺpce textu. Nemyslí sa postranná navigácia, ktorá je prevzatá z iných používateľských rozhraní iných produktov, no stĺpcom v uvedenom význame nie je.

Malá veľkosť písma

Malé písmená používané na webových stránkach sú taktiež dôsledkom pôsobenia tlačovín. V snahe zmestiť na stránku čo najviac informácií (často textových) sa písmo zmenšuje do neúprosných rozmerov (až do 11 pixlových „bĺch“). Je pravda, že toto sa dá zmeniť pričinením používateľa, ale pravda je aj to, že používateľ to robiť nechce (často ani nevie).

Kameň úrazu je, že 11 pixlov je skutočne málo. Povedzme, že 3,5 palcový displej má na výšku 960 pixlov, 11 pixlov z toho tvorí 0,85 milimetra. To je veľmi málo na to, aby sa informácia dala prečítať. Áno, iOS (Android OS) vie približovať pohľad na stránku jednoduchým gestom, ale to nie je dôvod pre ospravedlnenie. Veľkosť písma má byť taká, aby toto zväčšovanie nebolo treba vykonávať (alebo len veľmi zriedka), a zároveň aby písmo bolo čitateľné.

Malé písmená prišli spolu so stĺpcami. Keby sme sa stĺpcov zbavili, písmo by sa okamžite zväčšilo na úroveň, aká na webové sídlo patrí. Musím však pripomenúť, že stále rozprávame o webových sídlach vo všeobecnosti. To, že má sme.sk alebo pravda.sk väčšie písmo nemení fakt, že iné sídla majú písmo až moc malé, alebo že sa nedá použiť ešte väčšie a optimálne.

Listovanie strán (v zmysle „ako v knihe“)

Rozdelenie veľkého množstva obsahu na viac strán zmysel má. Listovanie webových stránok celého sídla (netreba si mýliť s aplikáciou pre operačný systém) ako v knihe je však nesprávne pochopené, pretože:

  1. webové rozhrania sa ovládajú klikaním, ťapkaním,
  2. obsah na stránke sa číta spoločne s posúvaním obsahu zhora nadol, nie otáčaním strany - preto je mätúce, ak tok textu na stránke pokračuje na začiatku nového stĺpca (ak stranu chápeme ako stĺpec) a nie pod ním.

Preto je vhodné, aby dlhý článok ostal jedným dlhým článkom. Článok v tlačovine býva rozdelený, ak treba, lebo existujú objektívne fyzické obmedzenia strany. Áno, existuje aj fyzické obmedzenie pre displej, no ten umožňuje obsah posúvať pohodlne bez toho, aby bol rozsekaný. Kým rozsekaný článok pretŕha plynulosť čítania, výpis celého článku ju podporuje.

Rozdelenie agregovaných údajov na webovom sídle význam má, pretože by sa mohlo stať, že sťahované dáta by presiahli mieru únosnosti a stránka by bola až príliš veľká. Článok však nikdy nedosiahne takú veľkosť, aby nebol stiahnuteľný, preto je jeho rozdelenie nevhodné.

Webnoviny umožňujú listovanie šípkami na nasledujúci článok v sekcií
Nevhodné použitie listovania, a ešte na nevhodnom mieste. Chápem, že tu bola snaha o zjednodušenie preklikávania sa medzi článkami danej sekcie, ale neviem si predstaviť, ako listujem o 10 článkov ďalej len preto, že 11-ty ma zaujíma. Nie, toto sa nerobí. Web sa nečíta ako noviny, listovaním. Web sa číta skokovo, skenuje sa zrakom.

Abecedné zoraďovanie tam, kde to nie je vhodné

Abecedné zoraďovanie obsahu má svoje miesto, ale nie všade. Teda väčšinou nám ho netreba, ak sa nejedná o telefónny zoznam, kde meno, aspoň sa to prepokladá, poznáme. Telefónny zoznam chápem v tomto prípade ako tlačovinu to, od čoho bol odvodený adresár v mobilných zariadeniach a na počítačoch. Každý má svoj osobný telefón pod kontrolou, mená v adresári pozná a vie, kde v abecede približne ležia (na začiatku, v strede, na konci, …).

Toto zoraďovanie má význam pri vymenovaní názvov, mien, ktoré sú jasne identifikovateľné a používateľ vie, čo hľadá. Chápem, že je to jednoduché vyrobiť pri rôznych webových katalógoch (menovať nebudem), no nikto sa nad tým nikdy nezamyslel, či to aj reálne funguje k plnej použiteľnosti. Zamyslenie sa nad iným a lepším riešením by bolo náročné.

Ak hľadám zubného lekára neviem, či bude pod písmenom L alebo Z. To záleží čisto od vývojárov, a to je chyba. Katalóg by mal v tomto prípade fungovať inak. Keď sa tam nakoniec dostanem, zistím, že sa vôbec nejedná o abecedné radenie, pretože som to mal hľadať pod S (služby a remeslá). Keď to skúsim, vôbec sa v katalógu niečo ako služby a remeslá pod písmenom S nenachádza. Funguje, resp. nefunguje to akosi zvláštne.

Ortopédia v katalógu Azet.sk

Príčinou je zdedené abecedné zoraďovanie všade tam, kde nie je vhodné. V tomto konkrétnom prípade katalógov by bolo lepšie geografické štítkovanie, kde by som vedel zvoliť podľa kúčových slov to, čo hľadám. K tomu však treba vypisovať údaj do práve jedného formulárového prvku <input type=text>.

Strach z hypertextu (neodkazovanie sa na iné zdroje)

V tlačovinách sa odkazuje na druhých ľudí relatívne náročne oproti webu. Je pravda, že sa to robí pomocou zoznamu odporúčanej, použitej a inej literatúry, ale to konkrétne prepojenie chýba (zohnať niekedy uvedený zdroj býva nemožné). Toto často prechádza aj do webového sídla, kde chýbajú odkazy na druhých ľudí, ktoré tam zjavne byť mali. Môže to mať dve príčiny:

  1. nevedomosť, že je to vhodné, a že sa to dá,
  2. nechcenie, veď na čo budem odkazovať na konkurenciu a uberať sa o návštevníkov.

Napríklad zaujímavá retrospektíva na počiatok konkurenčného boja prehliadačov od Ronyho. Odkaz si najprv skopírujte a potom vložte do riadka pre adresu v prehliadači - http://spravodaj.madaj.net/view.php/2011/01-aky-by-bol-web-bez-firefoxu. Treba si uvedomiť, že hypertext je nosným pilierom a dôvod, prečo dnes internet poznáme taký, aký je. By ma zaujímalo, koľkí z vás daný odkaz skopírovali skôr, ako sa dostali na koniec tohto odseku a článok o počiatkoch konkurencie prehliadačov otvorili priamo :-).
Prepáčte mi tento pokus o demonštráciu, ale niekde to tak naozaj robia.

Televízny program jednej stanice vypísaný pod seba

Televízny program je na webe veľmi zlý a neprehľadný. Znovu je to spôsobené preberaním tejto techniky z tlačovín bez toho, aby sa niekto skutočne zamyslel nad použiteľnosťou. Televíznemu programu sa chcem venovať v samostatnom článku, preto teraz uvediem len základné črty, ktoré mu vytýkam:

Niekomu to možno vyhovuje, posúvať programy donekonečna:
TV program vedľa seba

Vyhovuje však niekomu toto?
TV program vedľa seba aj pod sebou

Riešením by bolo program jednej stanice vypisovať horizontálne a stanice pod sebou. Jediný televízny program v tomto tvare som našiel na upc.sk alebo umožniť ľuďom prepínať si zobrazenia ako má tvprogram.cz.

TV program horizontálne

Peter Druska Peter Druska

Vyše 13 rokov som robil CSS/HTML šablóny webových sídiel ako Pokec.sk, Azet.sk a iných. Robil som vlastné iOS appky, neskôr som prešiel programovať najskôr do Starbug.eu, neskôr do Inloop.eu. Pomedzi to som učil chvíľu na gymnáziu, no odišiel som, pretože som bol myslením nekompatibilný. Po inloope som prešiel do firmy become.sk, kde mám za úlohu vybudovať oddelenie mobilného vývoja. Tomu sa teraz venujem naplno, popri tom robím aj vývoj pre iOS. Tu sme založili značku Bedots.eu.


Hodnoť článok:
0 0

14 komentárov k článku:

Komentovať môžu iba prihlásení

Zaregistruj sa cez bezplatnú registráciu alebo použi login cez Facebook (FB Connect)

Prihlás sa tu, ak už máš profil na Zajtra.sk:


Zabudol som heslo

0 0 Rastislav Leo Blažek Hewlett (fb) 27.3.2011 00:00:00
Pekné to je celé ale nemyslím si že je vhodné tv stanice písať horizontálne... je to dosť rozťahané a pre mňa neprehľadné
0 0 Vladimir Vanek (fb) 13.1.2011 00:00:00
@Palo Červenka - Pali, Riesenia su tu:)
0 0 Jozef Benko (fb) 11.1.2011 00:00:00
Toto si mohol napisat aj jednym odstavcom. :)
0 0 Peter Angelov (fb) 10.1.2011 00:00:00
Televízny program "ako" UPC má už dávnejšie http://esprievodca.magio.tv/#action=program
0 0 Janko Horo (fb) 10.1.2011 00:00:00
A este si neodpustim poznamocku, cely clanok na mna posobi ako vytrhnuta cast z dakej diplomovej prace, tam tento obsah by uspel
0 0 Janko Horo (fb) 10.1.2011 00:00:00
Autor asi chcel napisat, v skratke "vsetky weby na svete to robia zle, len upc mozno dobre" Lenze upc ma koncept postaveny na epg a settopboxoch, ktory ma napriklad aj magio pri zobrazovani programu, tam pochopitelne sa to hodi, na web bohuzial nie, kedze user scroluje koleckom smerom nadol a nie doprava vacsinou a hlavne nemusi nikam klikat (pri tv programoch) vid tvprogram.sk, ten pouzivam a vyhovuje mi lebo ma klasicke zobrazenie a webmaster by si mal toto iste uvedomit, ludia su na nieco zvyknuty, to je to iste ako experimenty s umiestnenim navigacneho menu / loga na weboch a pod.
0 0 Ján Bokor (fb) 10.1.2011 00:00:00
Televízny program na UPC? Neviem, mne tento štýl zobrazenia akosi nesedí. Pôsobí to takým rozhádzaným dojmom a keď chcem viac info o relácii, musím nad ňou chvíľu myšou zotrvať, nehovoriac o krátkych reláciách, ktorých názov sa do malého políčka ani nezmestí. Kompromisom medzi prehľadnosťou a množstvom informácií je preto spôsob zobrazenia, v ktorom, keď chcem napr. vedieť čo dávajú o ôsmej večer na obľúbených staniciach, tak mi stačí skrolovať len jedným smerom - horizontálne. A zobrazenie relácii pod sebou je možno odpozerané z tlačených programov, ale ľudia sú na to zvyknutý, je to prehľadné, tak načo to meniť?
0 0 Tomas Bella (fb) 8.1.2011 00:00:00
No, napríklad to stránkovanie na webe asi nikto nerobí preto, že by si naozaj myslel, že to je lepšie, ale jednoducho to zvyšuje pageviews, čiže robia to najmä weby, ktoré sú vypredané a stránkovanie im okamžite prináša viac peňazí.

Takisto pri hypertextoch som ešte nestretol šéfa webu, ktorý by "nemal vedomosť, že sa to dá" :))) - jednoducho ak web publikuje stovky článkov denne, tak aj keď sa to nezdá, tak pridávanie hypertextových odkazov je dosť prácne, a reálne rozhodovanie nepriebieha na línii "počul som, že sa dajú dávať odkazy, a tiež by som to chcel vyskúšať, keby mi to nejaký článok vysvetlil" ale "pridám radšej odkazy, alebo fotku/tabulku/graf/atď..."

Pár postrehov v článku je fajn, ale celkovo mi to pripadá trochu ako keby si radil výrobcom automobilov, nech do každého modelu montujú parkovacie kamery, klímu aj ESP, a nech všetky autá predávajú maximálne za 10 tisíc eur a potom sa im budú dobre predávať - a čudoval sa, ako to, že na to ešte sami tí hlupáci v automobilkách neprišli :)
0 0 MáЯIO Čižmárik (fb) 7.1.2011 00:00:00
suhlasim, vacsinou clovek nema tolko volneho casu a asi by aj privital kratsie clanky po castiach. taketo dlhe clanky niektorych citatelov podla mna odradza. Kvalita je ale fakt dobra :)
0 0 Alino Haviar (fb) 7.1.2011 00:00:00
Ja som ho zatiaľ ani nečítal, keď som videl, aký je dlhý, odpadla mi chuť. Akorát ma napadlo, že web, na rozdiel od tlače nie je odkázaný na dlhé články, lebo z nich môže urobiť seriál na pokračovanie. A zabije tak 1 ranou hneď niekoľko múch. Ktoré to sú, by mohol napísať napr. aj autor článku.
0 0 Janko Horo (fb) 7.1.2011 00:00:00
Ako by vyzerali noviny keby je web skorej ako noviny? Noviny boli silnou inspiraciou webu podla mna!
0 0 Slawo Rawas (fb) 7.1.2011 00:00:00
Mriežka sa dodržiava pri návrhu webov rovnako ako pri zalamovaní novín.
0 0 Martin Nixone Olešnaník-Gňyjë (fb) 7.1.2011 00:00:00
neviem ale zdá sa mi to veľmi dlhý článok bez nejakej podstatnejšej pointy...
0 0 Palo Červenka (fb) 7.1.2011 00:00:00
neviem či sa mýlim, ale nevidím tu žiadne riešenia...
Zajtra.sk > Programovanie > CSS/HTML > Webový dizajn vs. tlač: Prvky tlačového dizajnu nepatria na web


Kritika

Vieš ako robiť veci lepšie? Pomôž našim odvážnejším členom a skritizuj im projekty!

Reklama

Seriály zo Zajtra.sk

Reklama