Ha valami csillagászati jelenség, csillag vagy csillagkép neve van a blogcikk címében, már sokan dörzsölik a tenyerüket, hiszen tudják, hogy új választható kinézet érkezett az Unas rendszerbe. A tavalyi évben három új sablont publikáltunk Polaris, Antares és Pollux néven. Az idei évet kezdjük az éjszakai égbolt legfényesebb csillagáról elnevezett kinézetcsaláddal, ami nem más, mint a Sirius.
A név görög fordítása pezsgőt jelent, ami remekül tükrözi a kinézetcsalád izgalmasságát, a benne rejlő sokrétű lehetőséget. Színbeállítástól függően egyaránt alkalmas vibráló, lendületes vagy nyugalmat árasztó, visszafogott megjelenésre is. Mint ahogy minden új kinézetnél hozunk újdonságokat is, új lehetőségeket, nincs ez most sem másként. A Sirius kinézetcsaládhoz egy manapság divatos menürendszert és kategória elrendezést társítottunk. Rengeteg módosítható elemet helyeztünk el a főoldalon, valamint a mobilos használhatóság érdekében is fejlesztettünk újdonságot.
A téma már kiválasztható béta tesztelésre az adminisztrációs felületen. A visszajelzések alapján a következő időszakban még optimalizáljuk, ami által történhetnek benne kisebb változtatások.
Legfőbb jellemzők
Mivel szinte nem létezik olyan termék a világon, ami ne lenne kapható valamelyik Unas áruházban, ezért ezt a kinézetcsaládot is úgy alkottuk meg, hogy testreszabhatósága és az átszínezhetősége miatt bármilyen termékpaletta forgalmazására alkalmas legyen.
Fejléc és kategória menü új mobil funkcióval
A fejléc sávja a vezérszínben jelenik meg, ami lehet egyszínű vagy vízszintesen átmenetes két szín között (gradiens). Nagyobb méretű kijelzőn a fejléc bal oldalán a logó helyezkedik el. A webáruházakban sokszor előfordul, hogy a logó nem optimális, rossz összhatást kelt, ezért ezt a részt nézzük át részletesebben. A logó mérete tág határok között mozoghat. A fejléc sávjának minimális magassága ebben a kinézetcsaládban 90 pixel, ha ennél magasabb logót töltesz fel, a fejléc sáv magassága is nőni fog. Maximális értéknek 120 pixelt határoztunk meg, ennél magasabb fejléc használata már nem ideális. Vízszintesen is te döntöd el, hogy milyen széles legyen a logód. Maximumként 400 pixelt javaslunk, hogy legyen elég hely mellette a további menüknek és a keresőmező se legyen túl kicsi. Tájékoztatásképpen a kategória menü szélessége 350 pixel, amihez szintén igazíthatod a logód megjelenését.
Mire ügyelj még a logónál? Legfőképp a háttérre. Ha egyszínű fejlécet használsz megcsinálhatod úgy is, hogy ugyanazt a háttérszínt adod neki, mint a fejléc színe. Azonban színátmenetes fejléc esetén csak az átlátszó hátterű (transzparens) logó fog jól kinézni. Gondolj a nagy felbontású, retina kijelzőkre is, ahova érdemes dupla méretű logót feltölteni. Ha ezt nem teszed meg, a böngészők az alaplogót fogják nagyobb méretben megjeleníteni, ami homályosodáshoz vezet. Ha viszont a retina felbontáshoz is feltöltöd ugyanazt az alaplogót, akkor arányaiban lesz kisebb a kialakított helyhez képest.
A logótól jobbra kapott helyett a kategória menü, ami a főoldalon alapból nyitva van. A Sirius kinézetnél azt a megoldást alkalmazzuk, amelyet sok mostanában készített arculat is, ötvözi a felső menüs és az oldalt elhelyezkedő menüs kinézetek sajátosságait. Általa nagyobb mennyiségű főkategória is jól megjeleníthető, oldalsó box oszlop nélkül. A főoldalon elhelyezkedő nagy banner magassága határozza meg, hogy a kategória dobozban hány főkategória fog kiférni. További aloldalakon a lenyíló kategória ablak maximális magassága 600 pixel, amibe kb. 14 főkategória fér el gördítés nélkül. A főkategóriák jobbra nyithatók tovább, ahol két kategória szint fog a látogató elé tárulni.
A kategória menüje mellé további plusz menüket, oldalakat szúrhatsz be. Ide minél több menüt helyezel, annál kisebb lesz a keresőmező, ezért érdemes csak annyit elhelyezni, amitől a keresés még jól kezelhető marad. Tovább haladva jobbra - használat esetén - a pénznemváltó, a nyelvváltó kap helyet, jobb szélen pedig a profil ikonja és a kosár található.
Itt jön egy újdonság, ami a mobilos használhatóságot segíti elő. Korábban az volt a szokás, hogy a mobil nézetek fejlécei annyiban különböztek az asztali verziókhoz képest, hogy a menüket ikonokra cserélték vagy akár egy menü ikon alá rendezték az összeset. Az ikonsor általában a mobil kijelző tetején helyezkedett el. A manapság használatos nagy méretű mobilokon ez a menü egy kézzel nem kezelhető jól. Emiatt a Beállítások / Kinézet, Arculat / Kinézet testreszabása / Kinézet beállítások menüben több más beállítás mellett azt is szabályozhatod, hogy a mobil menü alul vagy felül helyezkedjen el. Ha alulra teszed, akkor egy kézzel, hüvelykujj segítségével is navigálni tud a látogatód.
Főoldali elemek
Nézzük milyen további módosítható elemeket használhatsz még ennél a kinézetcsaládnál. Az oldal tetején, a fejléc felett megtalálod a nanobart, amiben időszakos feliratokat érdemes megjeleníteni. Ez szokás szerint egy bezárható sáv a tartalom felett. A kategória - slideshow páros alatt, egy termékajánló kapott helyet, kiemelt cím dobozzal. Utána következik a bizalmi sáv, amibe asztali kijelzőkön 4 elemet javasolt elhelyezni, de tetszőlegesen bővíthető további elemekkel is. A következő elem egy szintén bővíthető, de 2 oszlopban megjelenő bannercsoport, ami után egy 4 oszlopos csoport következik, amit kategória ajánlónak a legjobb használni.
Lefele haladva ismét egy termékajánlót használhatsz, aztán a kiemelt blogcikkeid jelennek meg. Az oldal alján pedig a márka slider és a lábléc zárja a sort.
Listaoldal
A listaoldalhoz is érkeztünk egy új funkcióval, ami eddig az egyedi kinézetek sajátja volt csak. Ha egy terméknek több változatát, több altípusát forgalmazod, biztosan használod már az összevonást a rendszerben. Ilyen esetekben az összevonásban szereplő termékek oldalán a látogató az összevonásra használható paraméterek mentén át tud navigálni az egyes verziók között. Ha megnézed az alábbi képen láthatod, hogy a Sirius kinézetben, a listaoldalon termékkártyára kiemelt paraméterek felett is megjelentek ezek a változatok. Például ha egy terméked több színben elérhető, akkor itt a színekre kattintva a megfelelő típushoz érkezik a látogató, illetve eleve látja a listán, hogy több színben érhető el a termék. Természetesen nem csak szín paraméterrel működik ez a funkció, a közös paraméter lehet szabadszavas vagy szám is. Ilyen esetben, mivel választani kell a típusok között, részletek gombot helyeztünk el kosárba helyezés helyett.
Termékoldal
A termékoldalt úgy terveztük, hogy a legfontosabb termékadatok és a kosárba gomb is a hajtás felett helyezkedjen el. Mobil kijelzőkön pedig a hosszú oldalon keresztül gördítve az oldal alján egy fix kosárba helyezési lehetőség rögzül, hogy az bármikor elérhető legyen, ezzel is növelve a konverziót. Amit érdemes megemlíteni, hogy az asztali verzión a termékhez feltöltött összes fotó látszik. Így akár 10 termékképet is megmutathatsz egyszerre a látogatóidnak.
A termékoldalból két féle típust készítettünk, amit a Beállítások / Kinézet, Arculat / Oldal kinézetek menüben tudsz átváltani. A lényegi különbség, hogy asztali nézetben, az egyiken lapfüles (tabos) megoldással helyeztük el a termékhez kapcsolódó tartalmakat, másiknál pedig ezek egymás alatt jelennek meg.
Lábléc
A lábléc ezúttal 4 oszlopból áll. Az első kettőbe érdemes a legfontosabb linkjeidet elhelyezni. A harmadikat használhatod például kapcsolati adatok megjelenítésére. A jobb szélén pedig a hírlevél feliratkozásra van lehetőség. Ez különbözik a korábbi megoldásoktól, mivel nem a feliratkozás mezőit láthatod, hanem gomb viszi a látogatót a feliratkozó oldalra. Mivel a különböző robotfeliratkozók elleni védelem szkriptjei pontvesztéssel járnak a pagespeed elemzéseken, így nem kerül bele ez a kód minden oldalba, csak ahol valóban űrlapokat lehet kitölteni. A hírlevélre feliratkozó oldalt pedig máshonnan is linkelheted a webáruházadban, emailes kommunikációdban.
Színváltozatok, átszínezhetőség
Szokásunkhoz híven a Sirius kinézetcsaládot is négy színvilágban készítettük el, így a termékpalettádhoz a legjobban illő verziót egyszerűen ki tudod választani. Ha egyik színvilág sem passzol a céged arculatához, saját kezűleg átszínezheted az elemeket az adminisztrációs felületen. A Beállítások / Kinézet, Arculat / Kinézet testreszabása menüben találod a kinézet színeit, amiket módosíthatsz. A színeken felül a következő lapfülön saját kiegészítő CSS-t is alkalmazhatsz, amivel egyéb elemek is módosíthatók. Ha nagyobb szakértelmed van HTML/CSS területen, a béta tesztelési időszak után le is töltheted a kinézet fájljait, amiből kiindulva teljesen egyedi arculatot készíthetsz.
Otthonosság és kényelem
A Sirius család 1-es típusát pasztelles barna árnyalatokban mutatjuk be, amelynek természetes, barátságos hatása kiváló választás lehet bútor, lakberendezés, de akár egészség vagy élelmiszer kínálatú webáruházak számára is.
Lágy nőiesség
A Sirius családnak jól állnak a nőies, rózsaszín és lila alapú árnyalatok is, így a 2-es típust ezekkel a színekkel alakítottuk ki. Az ilyen színvilág csajossá tesz minden ruházati, divattal kapcsolatos vagy más női tematikájú termékeket forgalmazó webáruházat. A mintaáruházat is ruhákkal töltöttük fel.
Erő és lendület
A Sirius család 3. bemutató áruházát élénkebb színnel képzeltük el, bemutatva, hogy a kinézet az erősebb, teltebb színekkel is ízléses megjelenést ad. Az erőteljes színek energikussága kiválóan illik például sporttal, mozgással kapcsolatos vagy fiatalos, vidám jellegű termékek forgalmazására.
Kimért elegancia
A Sirius kinézetcsalád hideg vagy fekete-fehér árnyalatokkal is remekül használható. Ezen színek eleganciája kiváló alapot ad kiemelkedő minőségű vagy luxuscikkek értékesítéséhez, illetve a professzionalizmus hatását is hangsúlyozhatod ilyen árnyalatokat használva. Ezért a család 4. tagját acélkék színvilággal és ékszerekkel mutatjuk be.
Bemutató oldal
A támogatott választható kinézetekhez hasonlóan mind a négy verzióhoz készítettünk a bemutató áruházakon felül bemutató oldalakat is, amik színeikben, hangulatukban, témakörükben mutatják be a sablont. A képernyőképekkel, kiemelt elemekkel illusztrált oldalak alapján könnyen eldöntheted, hogy melyik a neked legjobban megfelelő design, valamint itt is megismerheted a kinézetcsalád legfontosabb jellemzőit.
Technikai háttér
A választható kinézeteknél mindig törekedünk arra, hogy ne csak küllemében kövessék a trendeket, hanem a technikai háttér is megfelelő legyen. Az sablon képes kiemelkedő eredményeket hozni a Google sebesség tesztjein, valamint SEO szempontból is támogatja a jó organikus helyezéseket. Azonban fontos megemlíteni, hogy az értékeket nagyban ronthatja a feltöltött tartalom. Ha nem megfelelő méretű módosítható elemeket alkalmazol, mindenféle külső szkriptet szúrsz be a webáruházadba és olyan integrációkat is bekapcsolsz, amiket nem is használsz, az nagyban lassíthatja a működést. Ha pedig a tartalom nem megfelelő, akkor hiába jó a technikai háttér, nem lesznek jó eredményeid.
Mikor válts Siriusra?
Nem győzzük hangsúlyozni, hogy nem feltétlen kell azonnal váltani a megjelenő új kinézetekre. Bár mindig igyekszünk, hogy legyenek benne újdonságok, mégis lehet, hogy valamelyik termékkörhöz vagy célközönség számára egy másik lesz a jó választás. Ha például kevés főkategóriád vagy kevés kategória szinted van, akkor a Sirius nem lesz optimális számodra, válaszd inkább a Polarist. Azonban 10-15 főkategóriánál, amelyek legalább 2 alsóbb szinttel is rendelkeznek, jó választás a Sirius. Ha sok összevont terméked van, ahol érdemes láttatni a listaoldalon is az altípusokat, akkor is érdemes cserélned a kinézetet. Ha minden termékedhez sok fotót töltesz fel és azt szeretnéd, hogy a termékoldalakon mindet egyszerre lássa a vásárló, akkor is alkalmas lehet számodra a Sirius.
Sokan kérdezik, hogy mivel jár a dizájnváltás. A feltöltött kategóriákat, termékeket, termékadatokat, cikkeket a kinézet cseréje nem befolyásolja. A módosítható elemek azok, amik témánként változnak, ezeket érdemes a mintaáruházak alapján elkészíteni és váltás után egyből feltölteni őket.
