Jste tu poprvé? - Skrýt (musíte být přihlášeni)

Formátování textů - estetický pohled

1. 1. 2008 v 0:00 1 Formátování textů - estetický pohled

Článek o velmi časté chybě na webech, špatném formátování textu a jak se mu vyhnout. Snažil jsem se probrat většinu případů a dále také poukázal na skutečné problémy na cizích stránkách.

Co to vlastně formátování textu je?

Když se mluví o formátování textu v html, myslí se tím obvykle různá oddělení textu jinými značkami, aby bylo vidět, že jedna část textu je třeba méně důležitá než druhá. My budeme mluvit o formátovní textu z estetického hlediska, jelikož to sem také patří. Já sám používám výrazu „mizerné formátování textu“ v případě, že tvůrce nevhodně umístil text s obsahem do své stránky. Většinou jde o to, že text má různé nevyhovující pozice, u některého by slušelo více posunout od okraje, jiný by si zasloužil větší písmo, nebo zarovnání do bloku na obou stranách.

V souvislosti s tímto článkem doporučuji Pixyho článek o typografii, kde se naučíte, jak správně psát interpunkci, speciální znaky a také formátovat text z jiného hlediska, než estetického, tedy praktického.

Pro příklad si představme následující situaci: Jste kvalitní grafik, schopný, kterému nedělá potíže své představy převést do programu a dát webu podobu, jakou si přeje. Podceníte ale pozdější úpravu písma v html a pěkný vzhled zkazíte špatným písmem, které bude nevkusně zasazeno do designu. Nyní nemluvím o špatné barvě, díky které text nepůjde přečíst. Jde tu o to, že byste měli umět odhadnout a vytvořit vzhled písma, které se bude k vašemu webu hodit (čili nedáte k vážnému webu komiksový font), ale hlavně si dáte pozor, jak ho do něj zasadíte. Může vám to být klidně jedno, ale jelikož jsme na webu, který se zabývá grafikou, doufám, že se tu najde dost lidí, kterým ten pixel sem, pixel tam, není lhostejný. Tady nejde o chyby, které by návštěvníkům zabránily prohlížení webu, ale přinejmenším ukážou, že tvůrce je lajdák. V horších případech dokážou pokazit i jinak pěkný web. Ještě není jasné, o co jde, takže nejlepší bude demonstrace při praktické ukázce.

Špatné a správné formátování.
Pro zvětšení klikněte na obrázek

Jednoduše řečeno pokud uděláte pěkný design, kde jste si dali záležet, aby přinejmenším skoro všechno pěkně zapadlo do sebe a potom to zkazíte tím, že tam bez rozmýšlení plácnete písmo tak, jak se vám hodí, abyste to rychle měli za sebou, je to prasárna. Třeba jste si to naplánovali v Photoshopu úplně jinak a potom narazili při kódování. Anebo jste byli příliš líní to provést.

Pro dnešní článek si můžeme pustit něco rychlejšího – kdo má rád stylové techno, ať jde za mnou.

Praktické příklady

Ukážeme si několik jednoduchých příkladů na různých částech webu.

Odsazení – skutečný odstavec se bez něj neobejde

Když ve škole píšete (či psali jste…) slohovou práci, tak vás nutí psát v odstavcích. I v knize vidíte odstavce, aby vám usnadnily čtení. Proč se na webu objevují tak zřídka? Jde o pouhé lajdáctví ze strany tvůrců – je správným krokem odsazení používat. Dále jde o horní mezeru mezi dvěma odstavci – jaká velká by asi měla být? Jde o individuální záležitost, ale nejlepší je kolem jednoho a půl až dvou řádků.

Rozdíl mezi odstavci.
Pro zvětšení klikněte na obrázek

Blok textu – nejlépe setříděné věty

Jelikož nyní jde o formátování v html, tak budete nutně potřebovat znalosti css (kaskádové styly). Kupříkladu pokud jde o vlastnosti text-align, je dle mého v naprosté většině případů nejlepší používat text-align: justify. Tím budete mít váš text vyrovnaný do bloku a nebudou v něm žádné zuby ani vlevo, ani vpravo. Můžou se vyskytnout komplikace, pokud do takovéhoto bloku dáte nějaká nevhodně zvolená slova, takže se může stát, že blok ve snaze vše vyrovnat udělá obrovské mezery mezi slovy.

Formátování bloku

Jak nejlépe zkazit menu a jak ho poté opravit

Bezkonkurenčně nejlepší metoda je použít nějaké odpudivé barevné kombinace, třeba tmavě zelenou a hnědou, v lepším případě bílou, zelená stejně zkázu dokoná. K tomu připojit miniaturní písmo, ideálně menší, než velikost písma v obsahu webu! Dále je vhodné dělat, jakože už něco umím a nenechat menu jenom jako několik slov seřazených pod sebou s hnusným pozadím, ale také přidat ke každé řádce nějaký ten rámeček. Úplně nejlepší je ho udělat další, naprosto se neshodující barvou se zbytkem, a rámeček nechat přilnout k písmu, bez jakékoliv mezery. Tím dokážete, že na to máte a vaše odporné menu je na světě. To není legrace, někteří lidé to tak opravdu dělají. Náprava může být taková, že minimálně text zvětšíte na úroveň textu obsahu. Poté provedete pár základních kroků jako je vybrání barev, které se nejen shodují s designem, ale nedělá se vám z nich současně zle. Dále je hlavní věcí oddělit rámeček od písma mezerou – ale i písmo v rámečku není jen tak a dá se s ním dělat spousta věcí. Co třeba jestli je lepší ho zarovnat na střed nebo vlevo? To nemusí být lehká otázka, ale většinou je lepší ho umístit nalevo, vzácně napravo. A co třeba vyrovnat velikosti okrajů s rámečkem? Aby nahoře nebyly 3 pixely, vlevo 8 a dole 5? Tím, že tohle opravíte, vytvoříte nejen pohlednější menu, ale také dokážete, že vám na tom záleží. Pro příklad vezmeme nějakou šablonu zdarma a přidáme k ní odporné menu.

První odporné menu
Pro zvětšení klikněte na obrázek

Tak, máme ohavné menu a teď z toho zkusíme udělat něco normálního. Obrázek níže si zvětšete, v malém ze záhadného důvodu nejsou vidět jemné čáry mezi jednotlivými položkami.

Druhé, již normální menu

Pro zvětšení klikněte na obrázek

Raději jsem použil většinu věcí z původního obsahu, bohužel jaksi nevím, jaké písmo použil autor, tak jsem použil jemu podobné Times New Roman. Někteří lidé dávají přednost tomu, že text hodí hned k rámečku, tedy není tam žádné volné místo, ale to „možná“ vypadá dobře pouze na speciálních stránkách. Tady by to vypadalo jenom hrozně. Název sekce je nakonec vystředěný, protože nalevo to vypadalo díky rozdílné velikosti textů dost podivně a napravo raději ani nemluvě. Pokud se vám stane, že byste chtěli mít všechno pěkně zarovnané vlevo a přitom nějaká sekce by zasloužila delší název, nesnažte se to zkrátit. Proto jsem ani já nevybral dvě stejně krátká slova, protože někdy si zkrátka ani moct vybrat nebudete. Nakonec patří decentní hover. Obvykle to ovšem nevyjde napoprvé, můj první pokus (taky možná kvůli tomu, že ten layout jsem někde náhodně vybral a nedělal ho sám) byl dost hrozný:

„První

Takže pokud vám to poprvé vyjde tak, že s tím buď nebudete spokojení nebo vám někdo řekne, že je to odporné, rozhodně se nevzdávejte a zkuste to znovu.

Vyrovnání místa u bloku textu

Nejčastější ukázkou špatného formátování bývají mizerné okraje u bloků textu, když je text příliš nalepen na okraje, nebo naopak je zde příliš volného místa.

Špatně srovnaný text

To, co vidíte, je pouze příklad, jelikož dolní obrázek není celý, tak není vidět, že text je skutečně vyrovnaný. Ale je, jak se ostatně můžete přesvědčit, když se podíváte na první obrázek v článku, kde je vidět stavba stránky celá.

Pata stránek – opomíjená část

Pokud si myslíte, že nejde o nic důležitého, máte samozřejmě pravdu – v porovnání s patou jsou i ostatní věci, které zde popisuji, daleko důležitější a přitom jde v podstatě o samé maličkosti. Ale správný tvůrce má všechno vyrovnané a uspořádané, proto neodbude i tuto opomíjenou část. Samozřejmě, patu na webu mít nemusíte, ale je to vhodné pro umístění dodatečných informací, zvykem bývá kontaktní inforace a kdyžtak nějaké připomínky ke stránkám. Pokud na webu patičku máte, určitě ji nenechte zajít, ale vhodně napojte ke vzhledu. Písmo zde může být menší a ne tak kontrastní – přeci jen nejde o nezbytně důležité informace. Pokud je tam máte, tak jste je zřejmě umístili na nevhodné místo, jelikož patička opravdu není místo, kam nezbytně zabrousí většina návštěvníků.

Obecné příklady

Přejdeme nyní k příkladům celých stránek. Doufám, že se jejich autoři neurazí (pokud sem někdy náhodou zavítají), ale nechtělo se mi ještě vytvářet nějaké cvičné práce, když tu mám kolem sebe spoustu autentických prací. Na druhou stranu zase nechci pánům dělat reklamu, takže možné odkazy na jejich stránky jsou cenzurovány. Já vím, jsem hnusný odporník, ale naučil jsem se s tím žít.

První pán na holení má stránky vcelku v pohodě, až na to formátování. Červené kroužky s čísly vás navedou na popisovaný neduh stránek.

První web se špatným formátováním
Pro zvětšení klikněte na obrázek

  • 1. Nevýrazné a neosobní menu, malé písmo, přimáčknuté k okraji, neoddělené od sebe.
  • 2. Hnusný hover, který se nehodí ke stránce, rámec by měl být jenom nahoře a dole, nikoliv po stranách a navíc při najetí kurzoru posune písmo dolů. To se dá řešit tak, že tam před najetím už okraj bude, ale bude mít černou barvu.
  • 3. Datum přilepené k rohu i textu vpravo.
  • 4. Viz trojka, lepší by bylo, kdyby datum bylo nad příspěvkem a také zde bylo jméno autora. Nu ale proč se vlastně kvůli jedné či dvěma větám obtěžovat?
  • 5. Nezarovnaný text do bloku po obou stranách.

Přituhuje, tyto stránky jsou odporné a je tu vidět, že autor měl do dělat, aby vůbec vyrobil nějakou grafiku, natož aby se zajímal o nějaké formátování. Profesor Modryhadry by měl ještě tvorbu webů trénovat.

Druhý web se strašným formátováním
Pro zvětšení klikněte na obrázek

  • 1. Menu a hlavně jeho okraj je naprosto v rozporu se zbytkem stránky.
  • 2. Ošklivý nevýrazný text, přilepený k okrajům nahoře a dole.
  • 3. Nevyrovnaná výška a přilepení textu na znak », navíc hnusné.
  • 4. Text, přilepený k okraji.
  • 5. Žádné formátování do odstavce, slovo odstavec tu neexistuje.
  • 6. Text si jen tak pluje v těsné blízkosti obrázku.
  • 7. Hejkři sou drsný a podle všeho i blbí… minimálně ti, co si na to hrajou.

Jako poslední útok zde máme příspěvek od drsného Samce. Jeho web je hnusná šablona zdarma (PHP-Fusion), blbost jak po stránce kódu, tak po stránce vzhledové, takže to podle toho vypadá. Jediné, co je tam zřejmě jeho, je hnusná hlavička.

Třetí web podle obludné šablony
Pro zvětšení klikněte na obrázek

  • 1. Malé písmo, nevyrovnané mezery mezi ním a okraji.
  • 2. Odrážka odsune písmo, text pod ním již odsunutý není. Navíc kdo vymyslel tu barvu…
  • 3. Mrňavý nadpis, kterého si sotva kdo všimne. No, ne tak úplně, ale nadpis bych čekal někde úplně jinde.
  • 4. Úžasná ukázka toho, jaké mezery autor u textu praktikuje.
  • 5. Já vím, že posunout formulář není tak lehké, ale jde to, takže kdyby autor o tom něco věděl a uměl css, mohl by to vyrovnat.
  • 6. Opět jiné odsazení než text nad tím a příliš blízko okraji.

Tím naší malou exkurzi na cizí weby ukončíme, myslím, že to stačí.

Přestože jsem se snažil vyhrabat reálné příklady, kde to šlo, mělo by poselství být hlavně teoretické. Situace je přeci vždy jiná a jenom na vás záleží, jestli text bude pasovat (možná jsem to s komentáři těch cizích webů přehnal, ale u nich to je opravdu špatné). Doufám, že ti z vás, kteří tomu nevěnovali pozornost, si na to budou po přečtení tohoto článku dávat pozor.

Petr Široký Profil na fóru / Osobní stránky / Twitter Webdesignér povoláním, kritik přesvědčením, šašek duší, to vše zde najdete. Tutoriarts jsou poslední 3 roky můj největší osobní projekt. Kromě toho se zkouším věnovat jiným menším webovým projektům, živím se jako nezávislý webový designér a snažím se více hledět do budoucnosti, aby tyto stránky vzkvétaly.

Zdrojový soubor : Není k dispozici

Komentáře k článku

Nejste přihlášeni - před odesláním příspěvku vyplňte protispamovou kontrolu níže - váš komentář bude viditelný až po schválení správcem. Pro okamžité schválení se přihlašte, nebo registrujte. Registrace nezabere déle než minutu.

  • :-D
  • 8-|
  • :-/
  • 8-)
  • :-(
  • :-O
  • =(
  • =D
  • :-)
  • <3
  • ;-)

* Povinné položky

  • #1
  • Mandu
  • 5. July 2011 | 20:38
  • Skupina: Neregistrovaní

Tak túto stránku si ukladám do záložky. Ako tak pozerám, čaká ma veľa práce na mojich existujúcich stránkach.

Nahoru

Autoři: Jakub Houdek, Jakub Šimůnek, Petr Široký a příležitostní sebevrazi