Menu vlevo

• Uživatelé jsou zvyklí – Návštěvnící stránek jsou na menu zvyklí a nechtějí se nic nového učit. Taková změna jako přehodit menu doprava by je mohla zmátnout. To ale není podle mě pravda, když navigace nebude zplývat s pozadím, tak si jí čtenáři určitě všimnou.
• Málé rozlišení, menu nikde – Uživatelům, keří mají mále rozlišení monitoru, se menu zkrátka na obrazovku nemusí vejít, a tak si ho nemusejí na první chvíli všimnout a pak také musejí scrollovat doprava. To mi připadá jako celkem rozumný argument, protože se rozmáhá éra netbooků, kteří opravdu mají malou obrazovku .

Menu vpravo

• Čteme zleva doprava – To je asi nejrozšířenější argument, proč menu vpravo. Vlevo nás navigace ruší a musíme ji při čtení přeskakovat. Je zvláštní, že kdyý dočítám řádek, tak mě zas ruší menu vpravo. Také musíme vzít v  potaz, že např. u firemní prezentace si chceme společnost nejpve prohlédnout, a proto proklikáváme menu, kterého si více všimneme vlevo. U blogů všichni řvou, menu vpravo, nerušme čtenáře. Když já jsem navrhoval tento design, nějak jsem nepřemýšlel, kam navigaci dám, a tak zůstala vpravou a smísila se s drtivou většinou blogů.
• Úspora pohybů myší – Posuvník u prohlížeče je napravo, proč by tam nemělo být i menu, aby se ušetřila ruka. Co je za důvod? Máme nyní přece kolečka na myši.

Z tohoto celkem vyplívá, že menu můžeme dát kamkoliv. Pro malé prezentace mi ale připadá nejlepší udělat horizontální menu. Všimne si ho každý, neruší nepřekáží. Zbytek už je jen na vás, mě připadá, že je celkem jedno, kam tu zatracenou navigaci dáte. Ona taky není nekonečná, takže vám nebude u delšího článku pořád vadit.

Některé informace převzaty z tohoto článku na Intervalu.

1. krok – Získávání informací o budoucím webu

Ať už děláme web pro klienta nebo pro sebe, vždycky si zjistíme, co by měla taková stránka obsahovat. Uvedu příklad, pokud dostanete zakázka na vytvoření designu pro internetový obchod a hned se pustíte do tvoření, stane se vám např. že se budete soustředit na menu s kategoriema a úpln+ zapomenete na další menu, kam byste mohli dát stránky typu Obchodní podmínky, doprava, … Proto je lepší si nejdříve nějaký e-shopy projít, podívat se, jaké prvky obsahují, protože designování na slepo nevěstí nikdy nic dobrého.

Jestli si děláte web pro sebe, taky si řekněte, jestli má web smysl. Nemá cenu dělat webovky, které vás za 14 přestanou bavit, a vy pak začnete dělat další, které zanedlouho taky odkopnete – já takové lidi znám, a tak vím, co mluvím.

2. krok – Rozvržení webu

Nákres je docela dobrá věc pro utřídění získaných informací. Je totiž dobré si srovnat, kam co přijde. Taky je návrh dobrý, pokud dělate grafický vzhled na zakázku. Nejdříve totiž udělate rorvržení, které schválí, aby si potom, co dokončíte design, nemohl stěžovat, že chtěl menu vpravo, hlavičku 2x větší, …

3. krok – Tvorba designu

Už víme, jak bude web přibližně vypadat, a tak můžeme vytvořit jeho grafický návrh. Design se snažte udělat tak, aby byl pohldený a přístupný pro co nejvíce lidí – tzn. nedělejte weby např. obří. Když budete mít web 2000px široký, navštěvníky přestane za chvíli bavit pořád scrollovat. Typická dnešní šířka stránky je okolo 960 px. Také se snažte mít dobrý kontrast písma a pozadí – už sem viděl webovky, kde bylo šedé písmo na černém podkladu. Musel jsem mít hlavu úplně u monitoru, abych něco přečetl.

Pokud víte, že váš soubor bude používat někdo další – např. kodér, snažte se zachovat mezi vrstava určitý pořádek. Dávejte je do skupin, pojmenovávejte je. Nikdo se nechce hrabat v práci, kde je 40 vrstev různě smíchaných.

4. krok – Kódování

Design je hotový. Než však začnet kódovat, návrh rozřezejte na obrázky, které použijete, a uložte je do nějaké složky, (třeba images) ať sevám nepletou v kořenovém adresáři. Následně si vytvořte soubor, kam bude psát HTML (já používám index.html) a soubour s CSS (u mě style.css). V kódu udržujte nějakou strukturu, účelně pojmenovávejte (např. navigace, hlavička, protože až se budete ke kódu později vracet, těžko se vyznáte v obsahu, když tam budete mít názvy box 1 – 137).

Po dokončení kódování si stránku otestujte v používaných internetových prohlížečích – Mozzila Firefox, Google Chrom, Opera, Safari, Internet Explorer 6, 7. Občas je taky dobré si vytvořit zvláštní styl pro IE 6, protože stránka se většinou nezobrazí správně – viz. podmíně komentáře.

Taky si při psání kódu dejte pozor na chyby, kterým jsem věnoval minulý článek.

5. krok – Dokončování webu

Nyní se rozhodneme, jaký typ stránky děláme – statickou či dynamickou. U statické stránky už mít moc práce nebudeme. Tam stačí vyplnit odkazy v menu, index.html si párkrát zkopírovat a sepsat nějaký obsah. U dynamického webu se však musí celá struktura překopat, některé redakční systémy vyžadují více souborů, některé míň. Např. u WordPressu se pohybuje počet souborů v šabloně kolem 10, u internetového obchodu Magento kolem 40. Také si můžete svůj CMS naprogramovat sami a PHP kód vkládat přímo do HTML, ale to už je složitější a už se počítá s tím, že tomuto odvětví rozumíte.

Záleží jen na vás, jakou cestou se dáte. Dynamické weby jsou na tvorbu složitější, ale na pozdější úpravu jednoduší. Tsaky bude záležet na rozsahu, jestli úlánujete 3 – 4 stránky, nemá tam cenu nějaký CMS cpát.

Doufám, že vám tento článek alespoň trochu pomohl, i když zde moc podrobných informací není. Je to spíše návod, jak vytvořit kompletní web od A až po Z. Zase někdy na-viděnou.

1. Block vs inline tagy

HTML elemety můžou být zobrazovány buď jako block nebo inline. Block tagy se používají ke strukturování dokumentu – např. div nebo nadpisy. Inline tagy se vždycky mají vkládat do block tagů a ne naopak. Patří k nim odkazy, značky pro formátování, …

2. Křižení tagů

Křižení tagů je chyba, ale internetové prohlížeče to stjně interpretují správně. Pokud si chcete stránku zkontrolovat, tak ji prožeňte validátorem, ten odhalí všechny chyby.

3. Nevyplňování ALTu u nnetexových prvků

Atribut alt je je u netextových prvků jako například obrázek, protože se zobrazí, pokud se např. obrázek nenačte nebo je mají uživatelé vypnuté. Nevyplnit tento atribut je HTML chyba, takže ho vždy vyplňte, pokud ho chcete zanechat prázdný, napište jen alt=”".

4. Inline CSS

I když inline css není chyba, je to ten nejhorší způsob, jak zapsat css. Proč? Až budete později něco měnit ve svém designu, který bude mít více stránek, a v každé budete muset změnit jeden řádek, řeknete si, proč jsem byl tehdy liný a místo style=”…” jsem tehdy nedal class=”…” a nenapsal jsem to do externího stylu. Dalším důvod je, že se stránka déle načítá, protože se pokaždé načíta inline css, zatímco externí styl by se načetl jen jednou.

5. Nevyužívaní správných tagů

Využívejte správné html značky, jako například pro nadpisy – <h*>, zvýraznění – <strong> NE <b>, pro formátování textu používejte <p> nebo <span> NE <font>. Tagy <h*> používejte z rozvahou – <h1> používejte jen jednou. Navigaci dávejte mezi tagy <ul></ul>:

<ul>
<li><a href="#">Odkaz 1</a></li>
<li><a href="#">Odkaz 2</a></li>
<li><a href="#">Odkaz 3</a></li>
</ul>

6. Validujte

Pokud stránka obsahuje mnoho chyb, může se u klienta zobrazit špatně – prohlížeč může také špatně CSS. Chyby můžou způsobit např. neuzavřené divy, nevyplňené alty, … Špatná validita má taky meněí dopad na SEO.

Doufám, že jste se trochu poučili a opravili připádné nedostatky ve svém kódu. Toto je konec a tímto se tu s vámi loučím a zsa někdy na shledanou.

Tak tedy, jak oddělit blog od portfolia, aby byly zároveň propojené? Rešení, které se zdá zprvu komplikované, je nakonec velmi jednoduché. Vytvořil jsem si dvě nadřazené kategorie -> Blog a Portfolio. Pod rubriku blog jsem přesunul všechny dosavadní sekce. Poté jsem upravil sidebar.php a index.php, aby vypisovaly rubriky a články jenom z rubriky blog. Nyní už mi stačí udělat speciální šablonu pro stránku portfolio, do které už jen vložim nějaký cyklus pro výpis záznamu ze sekce Portfolio. Můžu být jen rád, že používám WordPress, protože si myslím, že jiný systém by to takhle lehce nesvedl.

Toto je konec minizprávičky, která měla většinu informovat a možná některým pomoci, jak lze udělat blog a portfolio na jedné instalaci WordPressu, aby se do sebe vzájemně nepletly. Pokud by vás to zajímalo hloběji, piště své dotazy do komentářů. Tak zase někdy tady na mém blogu.

Takže jak začít?

1. Najděte si stránku s pěkným vzhledem – pokud o žádné nevíte, navštivte nějakou z webových galerií. Vyčerpávající seznam najdete zde. Za sebe doporučuji CSS Mania.
2. Otevřete si grafický program, který používáte pro tvorbu webdesignu. Udělejte si screenshot celé stránky a vložte si ho do programu. Poté se snažte identicky okopírovat design.
3. Během tohoto procesu budete mít spoustu možností něco podle vás změnit a určitě brzy najdete svůj styl.
4. Hotový návrh převeďte do HTML/CSS.
5. Cvičení opakujte.

Toto je podle mě velmi dobrý způsob, jak se zlepšit, protože když budete zkoušet něco vlastního, o kterém ani nevíte, co to bude, tak zůstane pořád tam, kde jste byli. Také bych vám doporučil si přečíst tento článek. Jsou tam popsány základní chyby začínajících webdesignerů. Určitě vám to taky pomůže.

Zajímavé stránky pro webdesignery

Jaku už jsem psal, dobrý zdroj inspirace jsou webové galerie. Ale existují i další webové stránky, kde najdete spoustu typů, návodů, kolekcí stránek…

Smashing Magazine

Tato stránka je asi jedna z nejlepších a nejužitečnějších stránek pro webdesignery, které znám. Najdete zde velké kolekce ruzných stránek, návodů i scriptů.

Pattern Tap

Toto také není špatná stránka, když hledáte inspiraci. Je zde kolekce např. vzhledů komentářů, chybových stránek 404, navigací, …

Abduzeedo

Tento web už není zas tak užitečný pro webdesignery, ale zaujal mě spíše svými články a designem.

Tak doufám, že vám tento článek pomohl a zas někdy příště.

Squarespace

Vzhled mě zaujmul díky svému obrovitému nápisu blog. Barvy byly také vybrány dobře, nebijí do očí, černé písmo na bílém podkladu se nejlépe čte, je to přehledné. Snad jediné, co bych já osobně změnil, je písmo u kategorií a archívů v postraním panelu, protože se tam podle mě moc nehodí.

Midnight Shift Studio

Zde se mi opět líbí kombinace barev a přehlednost. Zase co bych udělal já jinak, je pole pro komentáře a vyhledávání, zvýraznil bych je. Web také slouží jako portfolio, což bohužel mně připomíná, že bych měl svoje také udělat. Takže výsledný dojem je také příjemnný, asi jake u všech stránek, které zde dnes publikuju.

MIX Online

Tohoto blogu jsem si všiml díky svému barevnému menu, které do tmavého šedého pozadí pčinese alespoň trochu “světla”. Autor také použil jiné barvy pro určité sekce, takže výsledek je pěkný. Jen mám broblém s písmem. Nevím, jestli je to jen u mě, ale prohlížeč ho špatně vykresluje a je hranaté. I když se mi předchozí dva blogy líbily více, tento také není vůbec špatný.

Line 25

Další blog, který jako celek působí velmi pěkně, jen bych vytkl přílišnou “chladnost” – i když mě nenapdá žádná barva, která by se tam hodila. Co se mi líbí, je zpracování obráků k článku, které pak překrývá nadpis.

Stopdesign

Velice zajímavý blog, který využívá jednoduchosti, hrou s textem a barev – barevná schémata se mění pro každou sekci. Všechny sekce jsou velmi dobře zpracované, opět je u blogu portfolio, také skvělě a přehledně provedené.

Behind my scenes

Další velice jednoduchý web, který má perfektně vybrané barvy (Kolikrát to už opakuji?), dobře a přehledně zpracovaný obsah. Zde také nemám co vytknout, no možná jen bych tu černou patku dal až úplně dolů a logo vložil do ní.

GoMediaZine

A jak se řiká, to nejlepší na konec. A i zde je to pravda, tento blog vsadil na propracovanost, spoustu detailů, barevnost (hlavně hlavička) – a je z toho perfektní výsledek. Určitě je to nejlepší web z dnešního článku.

To je pro dnešek vše, doufám že se vám článek líbil, připomínky, dotazy, … směřujte do komentářů. Nebojte se inspirovat, to zatím ještě nikoho nezabilo . Tak někdy jindy u jiného článku.

Co na blogu plánuji?

Jednak bude blog sloužit jako prezentace mojich prací – v záložce Portfolio, dále bych zde chtěl přidávat různé články o webdesignu, který mě jako jedno z mála grafických odvětví baví. Takže se rozhodně máte na co těšit.