Dosavadní design stránek již nesplňoval nároky na snadnou navigaci ve stále se zvětšujícím počtu článků a příspěvků v diskusním fóru. Od vydání mé knihy o redakčním systému Drupal došlo k výraznému nárůstu komentářů a příspěvků ve fóru. Začal jsem se intenzivněji věnovat videonávodům, často si píšete o možnost snadného zobrazení všech článků týkajících se Drupalu.
Nový design a layout částečně vychází z původního návrhu a zachovává množství jeho prvků. Bylo mi líto dosavadní design zcela pohřbít a i vaše reakce ukázaly, že vám v podstatě vyhovuje. Jedno obrovské minus však dosavadní šablona vzhledu měla. Vznikala totiž postupnými úpravami šablony Internet Jobs, na které se přibalovalo hodně dalších doplňků tak, jak nastala potřeba, a bez nějakého plánování.
Výsledkem bylo přednostní načítání bočních sloupců, na obsah jste museli čekat nejdéle. Často došlo i k rozpadu layoutu u komentářů. To samozřejmě není vhodné ani z hlediska SEO optimalizací. Novou šablonu vzhledu jsem tedy vytvořil úplně od začátku.
Grafický návrh
Přiznám se, že se nepovažuji za dobrého grafika a ve Photoshopu zvládám jen základní věci. Přesto jsem se pokusil připravit grafický návrh nového designu tak, aby plně odpovídal tomu, co nyní vidíte na svých monitorech. Zavrhl jsem různé tutoriály řešící návrh designu webu krok za krokem a použil vlastní způsob práce.
Několikrát jsem použil PrintScreen a díky vrstvám ve Photoshopu jsem původní vzhled přemaloval na ten současný. Poté stačilo jen vhodně použít ořezové značky a grafiky vyexportovat.
Tvorba drupalovské šablony Maxiorel Color
Nejdelší část práce zabralo vytvoření nové šablony vzhledu. Rozhodl jsem se zachovat třísloupcový layout, na titulní stranu jsem však doplnil několik nových boxíků upozorňujících čtenáře na nové články, komentáře a diskuze. Pro zjednodušení navigace jsem se rozhodl odstranit boční boxíky s odkazy do jednotlivých částí webu a vše jsem umístil do horního menu, které je nyní rozbalovací.
Web jsem si samozřejmě zkopíroval do počítače, nainstaloval nové potřebné moduly a začal s přípravou nového vzhledu - tedy klasicky přes info soubory a vytvoření základní page.tpl.php, přes šablony článků, boxíků, komentářů atd.
Již při tvorbě minulého webu (BrnoMasáže.cz) se mi osvědčilo použití Yahoo Reset Styles v CSS a ukotvení layoutu pomocí šablony od Dynamic Drive. Díky tomu web téměř na poprvé dokonale seděl jak ve Firefoxu (kde jsem jej vyvíjel), tak v Internet Exploreru 8, Opeře, Safari a Google Chrome. Našlo se sice pár drobností, ale ty jsem vyřešil za několik minut.
Použité moduly
Na Maxiorel.cz používám celou řadu doplňkových modulů v čele s CCK a Views. Z těch, které se nyní doufám dostanou více na oči, a těch, které zde používám nově, bych rád zmínil tyto:
- Nice Menus - vytvoří pěknou rozbalovací navigaci
- Taxonomy Menu - automatické vytváření nabídek podle termínů vkategoriích
- Tagadelic - vytvoří tzv. tag cloud boxík
- Subscriptions - slouží kodebírání informací o nových komentářích a novém obsahu pomocí e-mailu
Přenos na ostrý web
Jakmile bylo vše na testovacím webu v počítači připraveno, nastal čas převodu na ostrý web. Maxiorel.cz byl dnes dopoledne na chvíli odstaven. Díky tomu jsem mohl překopírovat nové téma vzhledu, nainstalovat a nastavit nové moduly a především využít možností Exportu a Importu Views - radikálně se tím snižuje doba pro převod nastavení z jednoho webu na druhý.
Novinky na Maxiorel.cz
Pevně věřím, že novinky, které mají být vidět, rychle objevíte a změny, které přispějí k pohodlnější práci s webem, tak rychle zapadnou, že je nebudete považovat za zvláštnost. Pro pořádek mi dovolte stručný seznam změn:
- Rozbalovací navigace vhorním modrém menu
- Klikací logo (ano, konečně...)
- Boxík supoutávkou na vybraný článek
- Přesun krátkých novinek na levou stranu
- Čtveřice upoutávkových boxíků a upoutávkou proužek na titulce
- Uživatelské obrázky vkomentářích
- Podpisy uživatelů vkomentářích
- Odstranění odkazů na weby nepřihlášených uživatelů
- Přidání odkazů na weby přihlášených uživatelů vkomentářích
- Podbarvení sudých komentářů pro lepší přehlednost
- Úprava vzhledu ankety
- Tučný úvodník bez použití CCK
- Proužek s tagy pod úvodníkem
- Odkazy na předchozí a následující článek pod textem
- Upravená patička webu
Změn je docela hodně, snad jsem na nic zásadního nezapomněl. Jak jste si jistě všimli, u komentářů může být zobrazen odkaz na váš web spolu s obrázkem - avatarem. Doporučuji vám proto aktualizaci svého uživatelského profilu.
Pokud na webu najdete nějaký problém se zobrazením nebo funkcionalitou, pak mi to prosím ohlaste, nejlépe včetně screenshotu. Máte-li nějaké dotazy k implementaci funkcí, které jsem v tomto článku zmínil, pište.
A samozřejmě uvítám i vaše názory na nový vzhled webu.
Tvůrce webů z Brna se specializací na Drupal, WordPress a Symfony. Acquia Certified Developer & Site Builder. Autor několika knih o Drupalu.
Marketing Director v Lesensky.cz. Ve volných chvílích podnikám výlety na souši i po vodě. Více se dozvíte na polzer.cz a mém LinkedIn profilu.
Podobné články
Komentáře k článku
To by asi bylo na dýl, možná na samostatný článek. A proč jej neřešit přes CCK? Na novém webu bych asi použil CCK, tady ale potřebuju mít zpětnou kompatibilitu s již existujícími články a nechce se mi vyplňovat nějaké nově nadefinované políčko u tisícovky článků nazpátek :)
Jestli je to kvůli zpětné kompatibilitě, tak je to jasné. Mně bylo divné, co je špatné na řešení s CCK, že je nepoužíváte. Já to tak dělám běžně a právě mi přišlo jako jedno z nejlepších a hlavně nejčistších.
Gratuluji k novému designu. Je opravdu vydařený a přitom si zachovává to nejlepší z minulého designu. Věřím, že i nadále - a nyní možná ještě více - bude Maxiorel pro své čtenáře přínosným webem.
Chválím nový design, je přehlednější a modernější. Přeju spoustu zajímavých článků a vyšší a vyšší návštěvnost.
PH
Dobrý den. Nový design se mi moc líbí a chtěl bych se touto cestou zeptat, jak byl vytvořeni onen boxík s upoutávkou na vybraný článek? Děkuji za radu.
Zdravím. K článku jsem pomocí CCK a modulu ImageField definoval nové políčko pro upload obrázku. Pomocí Views jsem pak vytvořil blok, kde se zobrazí jediný článek, řadí se to podle příznaku Sticky a použijí se políčka nadpis, obrázek a teaser (úvodník). Ten je oříznut na určitý počet znaků. Celé dohromady je to pak poskládáno na sebe pomocí CSS.
Chcelo by to ubrat reklamu. Je jej tu privela, navyse zle optimalizovana. No offence.
To je pravda, je jí příliš mnoho. Moc blikající. Zkuste se inspirovat třeba novou MobilManíí - je jí tam také hodně, ale tolik neruší.
No to barevné blikání je tu hlavně kvůli reklamám z Billboardu. Uvidím, možná ji zruším pro registrované a přihlášené uživatele jako motivaci :-) Ale jinak si myslím, že tu tolik reklamních bloků není. Jeden proužek v článku, dva na boku. Reklamu v patičce nepočítám, tam to nikoho neruší.
Na druhou stranu musíte všichni pochopit, že ty "svoje moudra" tu dávám zcela zadarmo a stojí mě to minimálně dost času. Tak tu reklamu berte alespoň jako kompenzaci... Předpokládám, že pokud bych tu třeba o Drupalu radil za peníze, počet dotazujících se rázem klesne na nulu. Nebo se pletu? ;-)
Bude na Maxiorlu publikovat i někdo jiný, nebo to bude stále osobní web JP?
Když bude chtít publikovat někdo další a bude to dělat zadarmo, tak ano. Na rozdíl od jiných webů, které mám, není Maxiorel extra výdělečný.
Pěkné.
Jen ty světlešedé odkazy na komentáře nebo datum teda opravdu bez označení na bílém pozadí nepřečtu.
Díky za poznámku. Já jsem hodně přemýšlel nad tím, zda je nechat touto barvou (původně byly ještě podkresleny) nebo zda je ztmavit. Nakonec jsem nechal světlou barvu, ale pokud si více lidí myslím, že to není dobrý nápad, tak to změním.
Jak řešíte úvodník bez CCK, resp. co to znamená? Proč neřešit úvodník přes CCK?