Het is 10 maanden geleden dat we Page Builder Sandwich aan het publiek hebben gepresenteerd. We hebben nu ongeveer 6.000 actieve installaties, en dat is een hele prestatie voor ons. We hebben er ook een enorme hoeveelheid feedback over gekregen, zowel goed als slecht. De consensus is echter dat mensen het waarderen hoe eenvoudig het is om lay-outs te bouwen en hun content te creëren in vergelijking met andere pagebuilders op de markt.
Een groot deel van de feedback die we kregen bestond uit functieverzoeken, en we hebben de afgelopen maanden veel van die functies toegevoegd. Maar terwijl we dat bleven doen, begonnen we gaandeweg ook langzaam de gebruikersinterface te veranderen. En daardoor veranderden we ook de gebruikerservaring… ten kwade. Het was echter op een punt gekomen dat we de interface opnieuw moesten doordenken, omdat het simpelweg niet meer soepel werkte en de verschillende functies er ook niet goed mee samengingen.
De verouderde interface
In de vorige versies van PBS wilden we dat alles de vorm van knoppen had. Waarom? Omdat knoppen gemakkelijk te gebruiken zijn. Je klikt er gewoon… op. In de oudere versies van de inspector (de zijbalk op de afbeelding hierboven) verhoogde het klikken op een knop een waarde, en shift+klikken op een knop verlaagde deze. Dat klinkt eenvoudig genoeg. Maar met de toevoeging van carrousels, tabbladen, kaarten en andere nieuwe elementen en functies werden al die knoppen een wirwar van verschillende pictogrammen met verschillende ontwerpen, en begon het er meer uit te zien als hiërogliefen dan als een toffe interface. Dit was geen probleem voor doorgewinterde gebruikers, maar het is behoorlijk intimiderend om te zien als je nieuw bent bij PBS.
Vervolgens doken er een paar problemen op in de inspector. Het oorspronkelijke idee was om alles eenvoudig en beschikbaar te maken binnen de inspector. En met alles bedoelde ik alles – van het veranderen van tekst in koppen tot het aanpassen van achtergrondkleuren, tekstkleuren, noem maar op. In de huidige staat bevat de inspector echter nu een heleboel opties waardoor je constant met het muiswiel op en neer moet scrollen. Heel wat anders dan de inspector die ik voorheen hoopte te maken voor gebruikers.
Ten slotte hebben we onlangs shortcode-mapping voor je favoriete plug-ins. Voor deze functie moesten we tekstvelden, getallenschuifregelaars, selectievakjes en extra nieuwe optietypes maken die nodig waren om je ervaring met het bewerken van shortcodes aangenamer te maken. Aanvankelijk was het een goed idee, en ja, het maakte het manipuleren van shortcodes gemakkelijker voor je. Maar opnieuw week deze functie af van onze interface met ‘alleen knoppen’. Achteraf gezien was het echt onmogelijk om alleen knoppen te gebruiken voor het wijzigen van shortcode-attributen. Nu, in de nieuwste versie, zijn we geëindigd met 2 soorten bedieningselementen: de knoppen en de shortcodevelden.
Er zijn nog een paar redenen waarom we besloten dat onze interface niet langer voldeed (of niet meer geschikt was voor onze behoeften), maar de bovenstaande punten zijn de belangrijkste. Eén ding was echter altijd zeker: we wisten dat we de interface moesten updaten.
Bepalen hoe een pagebuilder idealiter zou moeten werken
In plaats van er meteen in te duiken en dingen te veranderen, hebben we honderd stappen teruggedaan om de hele pagebuilder-ervaring onder de loep te nemen. We wilden de interface nieuw leven inblazen. Eerlijk gezegd wilden we het niet jaar in jaar uit blijven herbouwen. Het is uitputtend en helpt de WordPress-community zeker niet noemenswaardig vooruit. Deze keer besloten we de dingen langzaam en zorgvuldig aan te pakken. We hebben elk hoekje van Page Builder Sandwich bestudeerd en gekeken wat het een goede pagebuilder maakt, en uiteindelijk de hele bewerkingservaring uitgewerkt in een paar kernconcepten.
Essentieel concept #1: Direct in je content typen om dingen te bewerken
Een van de belangrijkste redenen om een pagebuilder te installeren, is om los te komen van de beperkingen van de backend-teksteditor van WordPress. Het is niet zo dat de backend-editor niet goed is, maar bij het maken van je webpagina’s laat deze je niet meteen zien hoe je webpagina eruit zou zien voor je websitebezoekers, en kun je je content ook niet buiten een lay-out met één kolom indelen. Je ziet er alleen je tekst en wat afbeeldingen, maar niets van de meer geavanceerde dingen (bijv. contactformulieren). Je kunt shortcodes toevoegen, ja, maar die worden niet in hun gerenderde vorm weergegeven*.
* Er worden door anderen plug-ins gemaakt om dit aan te pakken, zoals Shortcake UI, maar dat doet niet ter zake.
Dat is waar frontend-pagebuilders om de hoek komen kijken. Ze halen de bewerkingservaring weg uit de backend en brengen deze naar de frontend, waarbij je je site bewerkt zoals je bezoekers deze echt zouden zien. Zoals Pippin het zou verwoorden: What you see is what you get (WYSIWYG).
Een ander voordeel van een frontend-editor is dat het je de mogelijkheid biedt om je tekst direct te bewerken. Het typen van koppen en paragrafen biedt het gemak van de gebruikelijke tekstverwerker bij het bouwen van websites. Knoppen en tabbladlabels zouden ook aanpasbaar moeten zijn door er simpelweg op te klikken en te typen.
Dit is het gebied waar de meeste andere pagebuilders niet goed op presteren. De meeste dwingen je om in een tekstveld te typen om alles te bewerken. Nogmaals, dit zou bij echte frontend-pagebuilders niet het geval moeten zijn. Direct tekst typen en bewerken is sinds versie 2 een sterk punt van Page Builder Sandwich geweest, en we hebben ervoor gezorgd dat dit in versie 3 behouden blijft.
Essentieel concept #2: De muis gebruiken voor snelle aanpassingen
De muis is een krachtig hulpmiddel dat vaak over het hoofd wordt gezien bij pagebuilders. Vaak gebruiken pagebuilders de muis alleen om mensen dingen te laten verslepen en op verschillende locaties neer te zetten, of om op knoppen of invoervelden te klikken. Hoewel dit prima is, kun je op het gebied van pagina’s bouwen nog zoveel meer met de muis doen.
Om te beginnen is er geweldige visuele feedback bij het gebruik van de muis als hulpmiddel bij het bewerken van de pagina, vooral bij het aanpassen van visuele eigenschappen zoals marges, paddings en formaten. Nu wordt het finetunen van je elementen een natuurlijke ervaring.
In PBS versie 3 kun je met je muis een aantal dingen aanpassen. Je kunt marges/tussenruimtes tussen afzonderlijke elementen aanpassen, de paddings binnen je kolommen, evenals de formaten van afbeeldingen, pictogrammen en kaarten. We hebben ook knoppen waarmee je numerieke waarden kunt wijzigen vervangen door schuifregelaars.
Essentieel concept #3: Tekst moet gemakkelijk op te maken zijn
Als je even afstand neemt van je beeldscherm, merk je dat het meeste van wat je aan je webpagina’s toevoegt tekstuele content is. Ja, we hebben afbeeldingen en pictogrammen om die te vergezellen – en de laatste tijd hebben we de neiging om grotere afbeeldingen aan onze sites toe te voegen. Maar het leeuwendeel van de belangrijke content is allemaal tekst: koppen, opsommingslijsten, paragrafen, citaten, enz. Daarnaast bepalen we hoe we onze tekst opmaken zodat deze aansluit bij onze ontwerpen. We veranderen de formaten en kleuren, of maken het vetgedrukt of cursief. Dit is om onze content leesbaarder, relevanter en aantrekkelijker te maken voor onze respectievelijke lezers.
Omdat we tekst vaak opmaken, moeten knoppen waarmee we stijlen kunnen aanpassen heel toegankelijk zijn. Ze moeten niet weggestopt zitten in een pop-upvenster dat we eerst moeten openen. De meeste pagebuilders lijden aan deze kwaal. Om hun gebruikersinterface als ‘overzichtelijk’ te kunnen bestempelen, worden zelfs de meest gebruikte opties aan het zicht onttrokken.
Om dit op te lossen, hebben we gekeken naar de meest gebruikte tekstverwerkers. We merkten op dat ze meestal een rij met heel veel knoppen bovenaan het scherm hebben om tekst op te maken, en hebben voor versie 3 dezelfde indeling overgenomen. We hebben nu een rij met alle knoppen voor tekstopmaak die altijd bovenaan je scherm aanwezig is. Dit maakt stylen heel snel en sluit naadloos aan bij je natuurlijke manier van tekst bewerken.
Essentieel concept #4: Geavanceerde stijlopties moeten flexibel en toch gemakkelijk te begrijpen zijn
Het komt er bij een pagebuilder op neer dat mensen eenvoudig verbluffende ontwerpen moeten kunnen maken. Dit betekent dat we veel verschillende instellingen en opties moeten bieden zonder dat er sprake is van een steile leercurve. Marges en paddings kunnen aanpassen en tekst opmaken is geweldig, maar daarmee ben je er nog niet. Je hebt veel geavanceerdere opties nodig om de klus te klaren, opties zoals achtergrondafbeeldingen, patronen, randen, vaste achtergronden en meer. Al die verschillende instellingen op elkaar stapelen kan een beetje overweldigend worden, dus hebben we sommige vereenvoudigd en georganiseerd in categorieën om de zaken in versie 3 gebruiksvriendelijker te maken.
Essentieel concept #5: Ondersteuning voor shortcodes
Laten we tot slot niet vergeten dat onze pagebuilder bovenop WordPress draait. We moeten het platform en zijn functies omarmen en ze niet beperken of ervan afwijken. Een enorme functie die WordPress biedt, zijn shortcodes. Het betekent niet dat de volledige inhoud uit shortcodes moet bestaan – dat zou een rommeltje worden – maar in plaats daarvan moeten we er gewoon compatibel mee zijn. Veel plug-ins en thema’s gebruiken shortcodes, en het zou eeuwig zonde zijn als we die allemaal zouden negeren. Sterker nog, shortcodes bieden gebruikers ultieme flexibiliteit als het gaat om het maken van pagina’s.
Een paar weken geleden hebben we ons shortcode-mappingsysteem geïntroduceerd, en daardoor hebben we honderden shortcodes van honderden plug-ins in kaart gebracht. We hebben prioriteit gegeven aan de populairste plug-ins in de WordPress-plug-indirectory, dus de kans is groot dat je ze op je eigen sites tegenkomt. Dit is in versie 3 alleen maar versterkt, en we zullen dit in de toekomst blijven verbeteren.
Conclusie
We hebben al die essentiële eigenschappen hierboven meegenomen en ingebouwd in Page Builder Sandwich versie 3. Het is de beste pagebuilder die we tot nu toe voor WordPress hebben gebouwd. Hij is intuïtiever en natuurlijker in gebruik, presteert sneller, is gemakkelijker te gebruiken en vriendelijker dan ooit.
Als je ideeën hebt over een essentiële pagebuilder-functie, laat het ons dan hieronder weten in een reactie.