A Mókuslekvár új oldala

Másnak is megmutatnád? Oszd meg!

Ahonnan indultunk

A Mókuslekvár oldal egy közel 10 éve működő honlap, amit eredetileg testvérek szerkesztettek. Kézműveskedés, dekoráció, receptek, utazás, nagyon sokféle téma megjelent rajta. Hajni örökölte végül a Mókuslekvár márkát és a weboldalt mint működtető-szerkesztő. Elképesztően széles körben foglalkozik sütéssel-főzéssel: kenyerek és péksütemények, kínai ételek, lekvárfőzés, fermentálás, aszalás, sajtkészítés – mindenhez ért. Ráadásul cukrász és szakács végzettsége is van. A weboldal így az elmúlt évek során egy hatalmas receptgyűjteménnyé vált, amit nagyon sokan használnak.

Új célok

Hajninak végzett cukrászként és szakácsként átalakultak az üzleti tervei is. Már nem a weboldalon elhelyezett reklámokból akart bevételre szert tenni, hanem abból, hogy segít másokat megtanítani egy-egy fogás vagy sütemény tökéletes elkészítésére.

A nagy receptgyűjteményt így át akartuk alakítani egy üzleti weboldallá (ahol azért még mindig nagyon sok a recept).

Helyzetfelmérés

Egy hosszabb beszélgetést követően készítettünk egy oldal leltárt. Számba vettünk minden oldalt, minden bejegyzést:

• mi a tartalma, milyen típusú (pl. blogbejegyzés vagy recept);
• megtartsuk-e, az üzleti célhoz hozzájárul-e (pl. a szerzői gyűjtőoldalak megszűnnek);
• hiányzik-e tartalom közülük (pl. eddig nem voltak szolgáltatási oldalak);
• megfelelően van-e minden szövegezve (pl. a bemutatkozás).

Hajni újragondolta a kategóriák és címkék használatát mind a receptek, mind a blogbejegyzések esetében, és egy tiszta, világos, átlátható struktúrát alakítottunk ki. Újragondoltuk a főoldalt és az oldalak egymáshoz való kapcsolódását.

Ezt egy óriási, másfél ezer soros táblázatban dolgoztuk ki.

A táblázat alapján kidolgoztuk, hogy az új sablonban milyen oldalakra, oldaltípusokra lesz szükség, milyen grafikai terveket kell elkészítenünk és hogyan lesz majd kódolva az oldal.

Új arculat

A tartalom és a felépítés tervezése közben, azzal párhuzamosan haladt az arculat újratervezése.

A régi logó már nem tetszett Hajninak, túl vastagnak és böhömnek érezte, nem tetszett neki a színvilága sem. Úgy gondolta, ha már új weboldala lesz, újuljon meg minden arculati elem is. Olyan logót szeretett volna, ami könnyed, légies, akár kicsit játékos is. Mókust és lekvárosüveget képzelt bele. Külön kérése volt, hogy ha lehetséges, inkább négyzet alapba férjen bele, ne téglalapba.

Ezek alapján négy különböző tervet készítettünk neki, egyelőre felirat nélkül és feketében. Ezek közül a másodikat választotta:

A színvilágot illetően az volt Hajni kérése, hogy meleg pasztell színek legyenek a weboldalon, elsősorban barnás és narancsos vagy lilás. Élénk és neon színeket semmiképp nem akart.

Két színpalettát állítottunk össze neki és végül a narancs – barna kombináció lett a nyerő. Miután megvoltak a színek, már a választott logót is el tudtuk készíteni színesben és rákerült a felirat is. Ezzel egy körben meghatároztuk a weboldalra kerülő két betűtípust is.

A logót többféle színváltozatban is elkészítettük, hogy világos és sötét háttéren is, rugalmasan lehessen használni. A sötétbarnát leginkább a szöveg színének, illetve grafikai elemeknél használtuk a weboldalon.

Váltás klasszikus szerkesztőről Guttenberg editorra

A recepteket kezelő plugin lecserélése előtt merült fel egy nagyobb feladat: közel 1500 bejegyzés és oldal esetében kellet lecserélnünk az oldalszerkesztőt. A Classic Editor plugin gondoskodott róla, hogy minden bejegyzés klasszikus szerkesztőben készüljön, de a weboldal hosszú távú fenntartásához fontosnak tartottuk, hogy az oldal a modernebb, több lehetőséget biztosító blokkszerkesztőt használja.

A recepteket kezelő plugin

A régi oldalon egy olyan plugin kezelte a recepteket, ami utoljára 6 éve lett frissítve, és biztonsági problémák miatt már egy ideje nem is volt ajánlott használni. Emiatt muszáj volt ezt lecserélni.

Nagyon sokáig keresgéltünk Hajninak, hogy minden szempontból megfelelőt tudjunk választani. Végül a WP Recipe Maker-re esett a választás, mert ez tűnt a legrugalmasabbnak, ez nyújtotta a legtöbb formázási és beállítási lehetőséget, és a weboldalon megjelenő recept blokkot az utolsó szóig le lehetett fordítani magyarra. Már csak hab a tortán, hogy jelenleg az ingyenes verziója is megfelelő számára. Később majd lehet, hogy Hajni átvált a fizetősre, mert nagyon vonzó lehetőségek érhetők el (például könnyedén lehet szakácskönyvet, receptgyűjteményeket összeállítani).

Új tartalomtípus: receptek

A régi oldalon a receptek ugyanúgy lettek létrehozva, mint a blogbejegyzések. Ugyanazok a kategóriák és címkék vonatkoztak rájuk, néha össze is keveredtek megjelenítéskor. Sem grafikailag, sem URL-jükben nem különültek el egymástól.

Az új oldalon mindenképpen külön akartuk kezelni a recepteket, ezért létrehoztunk egy új bejegyzéstípust ezeknek a tartalmaknak.

Itt már láttuk, hogy az új oldal létrehozásához Hajninak ugyanolyan sokat kell dolgoznia, mint nekünk, hiszen mind a közel 1500 aloldalt végig kellett néznie, ellenőrizni az új tartalomszerkesztőt, átnézni és tipizálni a tartalmat, átírni a recept szövegét, ha kell. Át kellett variálnia a kategória és címke beosztásokat. És akkor nem beszéltünk még a weboldal képanyagáról, ami a 10 év alatt nagyon gazdaggá vált…

Receptekhez tartozó galéria

A bejegyzések átalakítása során lett egyértelmű, hogy a receptekhez tartozó galéria sem tartható meg aktuális formájában, mert a galériákat kezelő plugin már hosszú ideje nem frissül és nem használható a blokkszerkesztővel. Új galéria plugint választottunk és adatbázis szinten feldolgoztuk a honlap képanyagát, hogy az új pluginbe ne manuálisan kelljen újra válogatni a képeket.

Grafikai tervek

Hajni kérése az volt, hogy a weboldal ne egy arc nélküli receptgyűjtő oldal legyen, hanem árasszon melegséget, legyen személyes, családias és barátságos hangulatú. Azt tudta, hogy szeretne konyhával, ételekkel kapcsolatos ikonokat és lenyomat szerű grafikákat a háttérbe. Ehhez példákat is mutatott nekünk másoknál, amivel a mi dolgunkat is megkönnyítette.

Összesen 16 aloldal tervét készítettük el neki:

• főoldal
• szolgáltatási oldalak: egy szolgáltatás oldala, összes szolgáltatás gyűjtőoldala
• receptes oldalak: egy recept oldala, összes recept gyűjtőoldala, ugyanabba a kategóriába, alkategóriába vagy címkébe tartozó receptek gyűjtőoldala
• blog oldalai: egy cikk oldala, összes blogcikk gyűjtőoldala, ugyanabba a kategóriába tartozó blogcikkek gyűjtőoldala
• kapcsolat oldal
• bemutatkozó oldal
• sima oldal (pl. adatkezelési tájékoztató, impresszum, stb.)
• 404-es oldal
• keresési eredmények oldala

Az oldal létrehozása

A grafikai tervek véglegesítése után nekiláttunk az oldal felépítésének. Nem egy meglévő sablont alakítottunk át vagy egészítettünk ki, hanem kifejezetten Hajninak készítettünk egyedi sablont. Ez mindent rugalmasan és tökéletesen pontosan meg tud valósítani, amire szüksége van, de nincsenek benne az oldalt lassító, feleslegesen betöltődő funkciók.

Az aloldalak egy kis részének (pl. főoldal) tartalma teljes egészében a kódba került, így azokat Hajni nem tudja szerkeszteni az adminisztrációs felületen. A megbeszélések során tisztáztuk, mik azok a tartalmak, információk, amikhez nem szükséges, hogy módosítani tudja. A többi oldal szinte teljes egészében általa is szerkeszthető, illetve akár új oldalakat is létre tud hozni, ha új szolgáltatást szeretne felvenni.

(Természetesen bármikor meg tud minket keresni és tudunk módosítani az admin felületen nem hozzáférhető tartalmakon is.)

Ahogy korábban említettük, a receptek és a blog az új oldalon már teljesen elkülönülnek. Ennek köszönhetően az ide tartozó aloldalak is különböző tartalmú oldalsávot kaptak. Ez segít abban, hogy különböző látogatói utakat legyen lehetőség kialakítani a honlapon belül.

A weboldalba végül többféle űrlapot is bekötöttünk:

• hírlevél feliratkozás
• jelentkezés oktatásokra
• jelentkezés online előadásokra
• általános üzenetküldő űrlap

Élesítés és utómunkák

A honlap tervezése hosszú idő volt. A létrehozás, kódolás ehhez képest viszonylag rövid. Ezután a saját szerverünkön tettük elérhetővé Hajni számára az oldalt, és itt kapott lehetőséget arra is, hogy minden egyes bejegyzést átnézzen, módosítson, ellenőrizzen. Itt szerkesztette a recepteket és gondoskodott róla, hogy minden részlet pontos legyen.

Ebben a fázisban dolgoztuk ki és listáztuk az átirányításokat. Rengeteg oldalnak változott az URL-je, illetve több oldalt törölve lett. Az előkészítés miatt élesítéskor már azonnal éltek ezek az átirányítások is.

Ezzel a módszerrel szinte egyetlen olyan perc sem volt, amikor ne lett volna elérhető a honlapja. Mivel nagy az oldal látogatottsága, ez kiemelten fontos volt. Élesítés után pedig azonnal szuperül működött minden, a receptek és blogbejegyzések azonnal elérhetők voltak.

Mi is kipróbáltunk sokat Hajni receptjei közül, mindegyik szuperül sikerült!

Másnak is megmutatnád? Oszd meg!