Velké změny na Maxiorel.cz

Dnes byly na webových stránkách Maxiorel.cz provedeny větší změny týkající se designu, navigace a rozdělení článků. Čtenáři se tak snáze dostanou ke svým oblíbeným tématům, nový způsob navigace by měl přispět rychlejšímu přechodu do konkrétní části webu.

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.

Buďme ve spojení, přihlaste se k newsletteru

Odesláním formuláře souhlasíte s podmínkami zpracováním osobních údajů. 
Více informací v Ochrana osobních údajů.

Autor článku: Jan Polzer

Tvůrce webů z Brna se specializací na Drupal, WordPress a Symfony. Acquia Certified Developer & Site Builder. Autor několika knih o Drupalu.
Web Development 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.

Komentáře k článku

návštěvník

Jak řešíte úvodník bez CCK, resp. co to znamená? Proč neřešit úvodník přes CCK?

Profile picture for user Jan Polzer

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 :)

návštěvník

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.

návštěvník

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.

Profile picture for user koho

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

návštěvník

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.

Profile picture for user Jan Polzer

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.

návštěvník

Chcelo by to ubrat reklamu. Je jej tu privela, navyse zle optimalizovana. No offence.

návštěvník

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ší.

Profile picture for user Jan Polzer

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? ;-)

návštěvník

Bude na Maxiorlu publikovat i někdo jiný, nebo to bude stále osobní web JP?

Profile picture for user Jan Polzer

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ý.

návštěvník

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.

Profile picture for user Jan Polzer

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.

Přidat komentář

Odesláním komentáře souhlasíte s podmínkami Ochrany osobních údajů

reklama
Moje kniha o CMS Drupal

 

Kniha 333 tipů a triků pro Drupal 9


Více na KnihyPolzer.cz

Sledujte Maxiorla na Facebooku

Maxiorel na Facebooku

Hosting pro Drupal a WordPress

Hledáte český webhosting vhodný nejenom pro redakční systém Drupal? Tak vyzkoušejte Webhosting C4 za 1200 Kč na rok s doménou v ceně, 20 GB prostoru a automatické navyšováním o 2 GB každý rok. Podrobnosti zde.

@maxiorel na Twitteru

Maxiorel na Twitteru