Már 10 hónap telt el azóta, hogy nyilvánosságra hoztuk a Page Builder Sandwich-et. Jelenleg körülbelül 6 000 aktív telepítésünk van, és ez hatalmas eredmény számunkra. Rengeteg visszajelzést is kaptunk ennek köszönhetően, jókat és rosszakat egyaránt. Az általános vélekedés azonban az, hogy az emberek szeretik, milyen egyszerű elrendezéseket építeni és tartalmat létrehozni a többi elérhető oldalépítőhöz képest.
A kapott visszajelzések nagy része funkciókérésekből állt, és az elmúlt néhány hónapban ezek közül sokat hozzá is adtunk. Ám ahogy ezt folytattuk, a folyamat során lassan elkezdtük módosítani a felhasználói felületet is. Ennek következtében pedig a felhasználói élményt is megváltoztattuk… méghozzá rosszabb irányba. Eljutottunk arra a pontra, hogy újra kellett gondolnunk a felületet, mert egyszerűen már nem működött gördülékenyen, és a különböző funkciók sem passzoltak egymáshoz.
A megszűnt felület
A PBS korábbi verzióiban azt szerettük volna, hogy minden gombok formájában jelenjen meg. Miért? Mert a gombokat egyszerű használni. Csak… rájuk kell kattintani. Az ellenőrző panel régebbi verzióiban (a fenti képen látható oldalsáv) egy gombra kattintva növelni lehetett az értéket, a Shift+kattintással pedig csökkenteni. Ez elég egyszerűen hangzik. Azonban a körhinták, fülek, térképek és más új elemek, illetve funkciók hozzáadásával mindezek a gombok különböző dizájnú ikonok zagyvalékává váltak, és kezdtek inkább hieroglifákra hasonlítani, mintsem egy menő felületre. A tapasztalt felhasználóknak ez nem jelentett gondot, de meglehetősen ijesztő látvány volt, ha valaki új volt a PBS-ben.
Aztán megjelent néhány probléma az ellenőrző panelen is. Az eredeti elképzelés az volt, hogy mindent egyszerűvé és elérhetővé tegyünk az ellenőrző panelen belül. És a minden alatt tényleg mindent értettem – a szöveg címsorrá alakításától a háttérszínek és betűszínek módosításáig, bármit, amit csak el tud képzelni. A jelenlegi állapotában azonban az ellenőrző panel már rengeteg olyan beállítást tartalmaz, ami miatt folyamatosan az egérgörgővel kell fel-le görgetni. Elég messze áll attól az ellenőrző paneltől, amit eredetileg szerettem volna létrehozni a felhasználók számára.
Végezetül, nemrég bevezettük a shortcode-leképezést a kedvenc bővítményeihez. Ehhez a funkcióhoz szövegmezőket, számléptető csúszkákat, jelölőnégyzeteket és további új beállítástípusokat kellett létrehoznunk, amelyek szükségesek voltak ahhoz, hogy kellemesebbé tegyük a shortcode-ok szerkesztési élményét. Kezdetben ez jó ötlet volt, és igen, megkönnyítette az Ön számára a shortcode-ok kezelését. De ez a funkció ismét csak eltért a „csak gombok” elvű felületünktől. Utólag visszagondolva tényleg lehetetlen volt kizárólag gombokat használni a shortcode attribútumok módosítására. Most a legújabb verzióban végül 2 típusú vezérlőelemünk lett: a gombok és a shortcode-mezők.
Volt még néhány egyéb ok is, ami miatt úgy döntöttünk, hogy a felületünk már nem hatékony (vagy nem felel meg az igényeinknek), de a fentiek a legfontosabbak. Egy dolog azonban mindig biztos volt: tudtuk, hogy frissítenünk kell a felületet.
Annak meghatározása, hogyan kellene ideális esetben működnie egy oldalépítőnek
Ahelyett, hogy fejest ugrottunk volna a dolgokba és azonnal változtatásokat hajtottunk volna végre, tettünk száz lépést hátra, hogy megvizsgáljuk a teljes oldalépítői élményt. Új életet akartunk lehelni a felületbe. Őszintén szólva, nem akartuk évről évre újraépíteni. Ez kimerítő, és határozottan nem jelent érdemi segítséget a WordPress közösség számára. Ezúttal úgy döntöttünk, hogy lassan és körültekintően járunk el. Alaposan áttanulmányoztuk a Page Builder Sandwich minden szegletét, valamint azt, hogy mitől jó egy oldalépítő, és végül néhány alapvető koncepcióba sűrítettük a teljes szerkesztési élményt.
1. alapkoncepció: Gépelés közvetlenül a tartalomban a szerkesztéshez
Az oldalépítők telepítésének egyik fő oka a WordPress adminisztrációs felületének (backend) szövegszerkesztőjéből fakadó korlátok leküzdése. Nem arról van szó, hogy a backend szerkesztő ne lenne jó, de weboldalak készítésekor nem mutatja meg azonnal, hogyan fog kinézni a weboldal a látogatók számára, és nem teszi lehetővé a tartalom egyhasábos elrendezésen kívüli elrendezését sem. Ott csak a szöveget és néhány képet láthat, de a bonyolultabb dolgokat (pl. kapcsolatfelvételi űrlapokat) már nem. Shortcode-okat persze hozzáadhat, de azok nem jelennek meg a végleges formájukban*.
* Mások készítenek bővítményeket ennek megoldására, mint például a Shortcake UI, de ez most mellékes.
Itt jönnek képbe a frontend oldalépítők. Kimozdítják a szerkesztési élményt a háttérből a weboldal látható felületére (frontend), így úgy szerkesztheti webhelyét, ahogyan a látogatók valóban látni fogják. Ahogy Pippin fogalmazna: Amit látsz, azt kapod (WYSIWYG).
Egy másik előnye a frontend szerkesztőnek, hogy lehetővé teszi a szövegek közvetlen szerkesztését. A címsorok és bekezdések közvetlen begépelése a megszokott szövegszerkesztők könnyedségét hozza el a weboldalkészítésbe. A gombok és a fülek feliratainak is módosíthatónak kell lenniük egyszerűen rákattintva és gépelve.
Ez az a terület, ahol a legtöbb más oldalépítő nem teljesít jól. A legtöbbjük arra kényszeríti Önt, hogy egy szövegmezőbe gépelve szerkesszen mindent. Ismétlem, egy igazi frontend oldalépítőnél ennek nem így kellene lennie. A szövegek közvetlen begépelése és szerkesztése a Page Builder Sandwich egyik erőssége a 2-es verzió óta, és gondoskodtunk róla, hogy ez a 3-as verzióban is megmaradjon.
2. alapkoncepció: Az egér használata a gyors finomhangolásokhoz
Az egér egy nagy hatású eszköz, amelyet gyakran elhanyagolnak az oldalépítőkben. Az oldalépítők sokszor csak arra használják, hogy lehetővé tegyék az elemek húzását és különböző helyekre történő ejtését, vagy a gombokra és beviteli mezőkre való kattintást. Bár ez rendben van, az oldalépítés terén sokkal több mindent lehet tenni az egérrel.
Egyrészt nagyszerű vizuális visszajelzést ad, ha az egeret használjuk az oldal szerkesztésének eszközeként, különösen az olyan vizuális tulajdonságok beállításakor, mint a margók, a belső margók (padding) és a méretek. Így az elemek finomhangolása természetes élménnyé válik.
A PBS 3-as verziójában számos dolgot beállíthat az egér segítségével. Beállíthatja az egyes elemek közötti margókat/térközöket, az oszlopokon belüli belső margókat, valamint a képek, ikonok és térképek méretét. A numerikus értékek módosítására szolgáló gombokat pedig csúszkákra cseréltük.
3. alapkoncepció: A szövegnek könnyen formázhatónak kell lennie
Ha egy lépést hátralép a monitortól, észreveheti, hogy a weboldalaihoz hozzáadott elemek többsége szöveges tartalom. Igen, vannak képek és ikonok is kísérőként – és az utóbbi időben hajlamosak vagyunk nagyobb képeket elhelyezni az oldalainkon. De a fontos tartalom többsége mind szöveg: címsorok, felsorolások, bekezdések, idézetek stb. Emellett ott van az is, hogyan formázzuk meg a szöveget, hogy illeszkedjen a dizájnhoz. Vagy a méretüket és színüket változtatjuk meg, vagy félkövérré, illetve dőltté tesszük őket. Ez azért szükséges, hogy tartalmaink olvashatóbbak, relevánsabbak és vonzóbbak legyenek olvasóink számára.
Mivel gyakran formázunk szöveget, a stílusok megváltoztatását lehetővé tevő gomboknak nagyon könnyen elérhetőnek kell lenniük. Nem szabad egy felugró ablakba rejtve lenniük, amelyet először meg kell nyitnunk. A legtöbb oldalépítő ettől a betegségtől szenved. Azért, hogy felhasználói felületüket „letisztultnak” lehessen nevezni, még a leggyakrabban használt funkciókat is elrejtik a szem elől.
Ennek megoldására megnéztük a leggyakrabban használt szövegszerkesztőket. Észrevettük, hogy a képernyő tetejéhez közel általában egy rengeteg gombot tartalmazó sor található a szöveg formázására, és ugyanezt az elrendezést vettük át a 3-as verzióhoz. Mostantól a képernyő tetején folyamatosan jelen van egy sáv az összes szövegformázó gombbal. Ez igazán gyorssá teszi a formázást, és olyan természetessé, mint a rutin szövegszerkesztés.
4. alapkoncepció: A haladó formázási beállításoknak rugalmasnak, mégis könnyen érthetőnek kell lenniük
Az oldalépítők lényege az, hogy lehetővé tegyék a lenyűgöző tervek egyszerű létrehozását. Ez azt jelenti, hogy rengeteg különféle beállítást és opciót kell biztosítanunk anélkül, hogy meredek tanulási görbével terhelnénk a felhasználókat. A margók, a térközök beállítása és a szövegformázás nagyszerű dolgok, de önmagukban nem elegendők. Sokkal részletesebb beállításokra van szükség a munka elvégzéséhez, mint például a háttérképek, mintázatok, szegélyek, rögzített hátterek és egyebek. Mindezek a különböző beállítások egymásra halmozva kissé nyomasztóak lehetnek, ezért leegyszerűsítettünk néhányat közülük, és kategóriákba rendeztük őket, hogy a 3-as verzióban barátságosabbá tegyük a rendszert.
5. alapkoncepció: Shortcode-támogatás
Végül ne felejtsük el, hogy az oldalépítőnk a WordPress alapjaira épül. Magunkévá kell tennünk a platformot és annak funkcióit, nem pedig korlátozni vagy eltérni tőlük. A WordPress egyik hatalmas funkcióját a shortcode-ok jelentik. Ez nem azt jelenti, hogy a teljes tartalomnak shortcode-okból kellene állnia – az zűrzavaros lenne –, hanem azt, hogy egyszerűen kompatibilisnek kell lennünk velük. Rengeteg bővítmény és téma használ shortcode-okat, és óriási veszteség lenne, ha mindet figyelmen kívül hagynánk. Valójában a shortcode-ok maximális rugalmasságot biztosítanak a felhasználóknak az oldalak létrehozásakor.
Néhány hete mutattuk be a shortcode-leképező rendszerünket, és ennek köszönhetően több száz shortcode-ot képeztünk le több száz bővítményből. A WordPress bővítménytárban található legnépszerűbb bővítményeket részesítettük előnyben, így nagy valószínűséggel a saját oldalain is találkozni fog velük. Ez csak tovább erősödött a 3-as verzióban, és a jövőben is folytatni fogjuk a fejlesztését.
Összegzés
A fenti alapvető tulajdonságokat mind átültettük a Page Builder Sandwich 3-as verziójába. Ez a legjobb oldalépítő, amit eddig a WordPresshez készítettünk. Intuitívabb és természetesebb a használata, gyorsabban működik, könnyebben kezelhető és barátságosabb, mint valaha.
Ha bármilyen észrevétele van egy nélkülözhetetlen oldalépítő-funkcióval kapcsolatban, ossza meg velünk alább egy hozzászólásban!