Leven met je Framer-site: wat je zelf aanpast en wat niet
De lancering van je Framer-site is het startpunt van het echte werk. Dat werk kun je grotendeels zelf doen. Een kop van CMSWire meldt dat Framer werkt aan slepen en neerzetten voor vertalingen. Daardoor kunnen meer mensen aan een live pagina sleutelen, en dat is fijn nieuws voor wie de site dagelijks onderhoudt.
Een duidelijke grens tussen jou en mij maakt het dagelijkse onderhoud makkelijker. Dat vraagt om een duidelijke grens. In dit artikel lees je waar die ligt.
Na de lancering begint het echte werk
Bij een Framer-site is de lancering het startpunt. Ik zie regelmatig dat een homepage die drie weken later nog de oude aanbieding toont, aanvragen kost. Ik zie ook regelmatig dat teams stoppen met aanpassen omdat niemand weet wat veilig is. Uitstel kost meer dan een verkeerde edit, want de site blijft met verouderde teksten staan.
Dit stuk gaat over de grens tussen jou en mij. Je laat de site bouwen en runt hem daarna zelf, geen eenmalige overdracht. Zoekopdrachten als framer design en framer framed gaan meestal over het bouwen. Hier gaat het over de maanden erna.
Ik leg per klant een vaste verdeling vast. Tekst, beeld, CMS-items en sectievolgorde zijn van jou. Beweging en opbouw blijven bij mij. De regels staan achterin op één pagina.
De drie categorieën die je grens bepalen
Ik verdeel elke edit in drie groepen: zelf doen, doen met een controle, naar de ontwerper.
De indeling volgt één vraag: wat gebeurt er op een kleiner scherm? Een edit die alleen tekst raakt, breekt niets. Een edit die ruimte raakt, valt bij 390 pixels (mijn eigen praktijkwaarde, de WCAG-norm ligt op 320 px) uit elkaar.
Ik noteer per regel waarom die in een categorie staat. Bij twijfel vraag je het vóór het publiceren, niet erna. Wat een editor toestaat verschilt per project en versie. Ik loop ze per site met je door bij de livegang.
Wat je zelf veilig aanpast
Categorie 1 is de simpelste, want dit zijn de edits die je zonder overleg doet. Elk moment, ook op vrijdagmiddag voor een feestdag.
Ze raken de inhoud en laten de opbouw staan. De plek van elk element op het scherm blijft precies hetzelfde. Denk aan een prijs, een datum, een aanbieding, een klantnaam, een link of een alt-tekst.
Eén voorwaarde: het veld bestaat al en je vult het met een vergelijkbare lengte. Een kop van vijf woorden wordt niet veilig als je er tien woorden aan toevoegt.
Je hoeft niets te melden. Zet het wel in de weekly check-in, dan zie ik meteen of er iets afwijkt. Tekst is hier de meest voorkomende edit, en daar begint de eerste valkuil.
Tekst aanpassen zonder de layout te breken
Voor tekst gelden een paar extra regels. Blijf binnen het aantal tekens en vervang een zin door een zin, geen hele alinea.
Test de langste versie: zet je nieuwe kop erin en kijk op 390 pixels breed (mijn eigen praktijkwaarde, de WCAG-norm ligt op 320 px), dan op je laptop. Op mobiel wordt diezelfde kop drie regels en duwt een knop onder het scherm.
Laat de vaste onderdelen staan: hero-kop, regel onder de knop, knoptekst. Die zijn op lengte gemaakt.
Controleer bij een nieuwe link de bestemming op een telefoon, want een verkeerde link kost je een aanvraag.
Houd hetzelfde koppenniveau aan, want een sprong van h2 naar h4 breekt de opbouw voor zoekmachines en schermlezers, zoals de W3C-richtlijnen voor koppen uitleggen.
Beelden en logo's vervangen
Na de tekst zijn de beelden de volgende veilige aanpassing. Vervang een beeld door een beeld met dezelfde verhouding. Verhouding is belangrijker dan pixels.
Als vuistregel gebruik ik 2000 pixels aan de lange kant, niet een origineel van 6000 pixels. Zware bestanden vertragen de eerste weergave op mobiel, optimalisatie van beeldloading beïnvloedt de Largest Contentful Paint.
Bekijk de uitsnede op drie plekken: telefoon, tablet, laptop. Het midden van het beeld blijft meestal staan, de randen verdwijnen. Ik houd zelf de buitenste 15 procent vrij van gezichten en tekst. Daar snijdt het kader het eerst.
Een logo vervang je alleen als het bestand hetzelfde kader heeft. Een breder logo wordt klein of valt weg. Gebruik streepjes in bestandsnamen in plaats van spaties en hoofdletters. Dat houdt de map leesbaar voor iedereen.
CMS-items toevoegen en aanpassen
Bij CMS-items ligt het net anders dan bij beelden. Een nieuw item in een bestaande collectie is meestal veilig, want het ontwerp hangt aan de velden, niet aan het item zelf.
Vul elk verplicht veld. Een leeg veld laat een kaart instorten of een titel wegvallen.
Uit mijn ervaring past een titel van twee regels op een kaart; vier regels duwen de datum weg. Houd de lengte aan van de items die er al staan.
Verander niets aan veldnamen of structuur. Dat raakt de koppeling tussen de collectie en de pagina, en dan breekt er meer dan je denkt.
Een nieuwe collectie of een extra veld vraag je aan mij. Dat is werk aan de opbouw, niet aan de inhoud.
Verwijderen is een aparte regel. Staat een item op de homepage, haal het daar eerst weg, daarna uit de collectie.
Secties herordenen op een pagina
Bij de pagina zelf ligt de grens net iets anders.
Secties verplaatsen binnen dezelfde pagina mag je zelf doen, zolang de achtergrond en de breedte gelijk blijven.
Een sectie met een andere achtergrond of volle breedte hoort bij de opbouw. Die laat je staan.
Kijk na het wisselen of de eerste sectie nog bij de titel past. Kop en eerste beeld horen bij elkaar.
Op een landingspagina met een vaste route van probleem naar bewijs naar aanbod is de volgorde het argument zelf. Vraag het daar eerst.
Zet een sectie nooit twee keer op een pagina om meer te laten zien. Dat maakt het geheel rommelig en de pagina traag.
Doen met een controle: de edits die je eerst test
Sectievolgorde is stap één. Een langere kop of een extra zin raakt de ruimte op de pagina. Die edits mogen, met een korte controle voor je publiceert. Vier checks.
Drie breedtes. Ik check op drie breedtes: 390, 768 en 1440 pixels, dat zijn twee minuten werk.
Knoppen boven de vouw. Op mobiel hoort de knop nog in beeld te staan. Een knop onder het scherm kost je klikken.
Snelheid. Test of de pagina nog vlot opent op een telefoon met een normale verbinding.
Hardop lezen. Lees de nieuwe tekst voor. Kromme zinnen hoor je sneller dan je ze ziet.
De test die het vaakst iets vindt: stel je bij elke edit de vraag wat er misgaat als de tekst een stuk langer uitvalt dan je typte. Vraagt een edit meer dan deze checks, dan hoort die bij mij.
Wat naar de ontwerper gaat
Dan blijft er een groep edits over waar je beter van afblijft. De vier onderwerpen hierna, motion, layout, paginatypes en tracking, leg ik toe in aparte subsecties.
Dit werk hoort bij de kern van het ontwerp. Het moet blijven werken op elk scherm en in elke taal. Formulieren test ik met een echte inzending voordat ze live gaan.
Motion en animaties
Animaties horen bij mijn kant van de grens. Een animatie stuurt je blik. Die vertelt waar je moet kijken en in welke volgorde je leest.
Tijden, vertragingen en bewegingsrichting hangen aan elkaar, dus één waarde aanpassen laat de rest uit de maat lopen. Een nieuw element in een animatie vraagt om een nieuw begin- en eindpunt. Naar mijn ervaring vraagt dat een half uur tot een dag, niet vijf minuten.
Wil je een animatie zachter of sneller, beschrijf dan het effect dat je zoekt. Ik pas de reeks aan en test hem op mobiel.
Beweging kan ook te veel worden. Op een langzame telefoon voelt een zware animatie als haperen.
Layout, nieuwe paginatypes en tracking
De animatie is één laag. Layout en paginatypes zijn de laag eronder. Een nieuwe pagina begint bij een ontwerp, niet in de editor. Zo blijft het geheel één site in plaats van losse stukken. Een nieuw paginatype betekent nieuwe velden, nieuwe verhoudingen en meestal een nieuw CMS-onderdeel.
Tracking staat in de code, niet in het zichtbare deel van de pagina. Naar mijn ervaring telt een verkeerd geplaatste pixel een deel van je aanvragen niet mee. Formulieren en koppelingen test ik met een echte inzending voordat ze live gaan. Dat is de enige test die telt.
Voor grotere wijzigingen plan ik vaste delivery days, zodat je weet wanneer iets klaar is.
Vertalingen en meerdere talen
Naast layout en tracking komt er bij meertalige sites een extra laag bij. Ik werk in het Engels, Nederlands en Spaans.
Vertaalde tekst wordt vaak aanzienlijk langer, afhankelijk van de lengte van de zin, tot 30 procent bij langere zinnen, meer bij korte. Een kop die in het Nederlands past, kan in het Spaans meer ruimte vragen.
Houd bij elke taal dezelfde veldstructuur aan. Vertaal de inhoud en laat de opbouw staan. Zo blijft de pagina hetzelfde werken, ongeacht de taal.
Test elke taal apart op mobiel. Een pagina die in het Engels klopt, valt in het Spaans net anders uit.
Nieuwe talen zijn een uitbreiding van de opbouw. Vraag die aan mij, ook als je de teksten zelf aanlevert.
De regelset op één pagina
Zet die afspraken, ook per taal, op één A4. Drie labels, met achter elk label een voorbeeld van wat er misgaat.
Zelf doen. Een prijs of datum vervangen. Gaat het mis, dan staat er een oude aanbieding op de site.
Zelf doen met een controle. Een nieuwe kop van zeven woorden in plaats van vijf. Test die op 390 pixels breed (mijn eigen praktijkwaarde, de WCAG-norm ligt op 320 px), anders duwt hij de knop onder het scherm.
Naar de ontwerper. Iets raken aan de hero-kop, de regel onder de knop, de knoptekst of het klantlogo. Die zijn op lengte gemaakt en vallen uit elkaar als je ze langer maakt.
Bewaar de lijst in het project, niet in een mail van zes maanden geleden. Deel hem met iedereen die de site aanraakt, ook de stagiair en de freelancer. Herlees hem elk kwartaal, want een site verandert en de regels moeten mee.
Zo richt ik de build in voor deze grens
Een regelset werkt alleen als de build hem ondersteunt. Daarom doe ik dat werk al tijdens het bouwen.
Ik noem CMS-velden in Framer naar wat ze zijn, niet naar waar ze staan. Een veld heet "titel-aanbieding", niet "bovenste blok links". Verhuis je die sectie later, dan klopt de naam nog steeds.
Vaste onderdelen krijgen een herkenbare stijl, zodat je meteen ziet waar je beter van afblijft. Per pagina lever ik een korte uitleg mee met de velden die je vrij kunt vullen.
In de eerste maanden plan ik een weekly check-in. Kleine afwijkingen vang ik op voordat ze normaal worden.
Je hebt één aanspreekpunt van de first call to the last file. Bij een vraag krijg je antwoord, geen formulier. En je krijgt een vaste prijs voor het bouwwerk voordat je iets beslist, zodat onderhoud geen verrassing wordt.
Conclusie
Met de velden op naam en de uitleg per pagina is de basis gelegd. Begin met een regelset op één pagina en één aanspreekpunt voor alles wat buiten die regels valt.
Wil je deze grens voor jouw site ingericht hebben? Dan doe ik dat van de eerste call tot de laatste file.
Veelgestelde vragen
Wie is verantwoordelijk voor het dagelijkse onderhoud van een Framer-site na de lancering?
De blogpost stelt dat je de site laat bouwen en daarna zelf runt, geen eenmalige overdracht. Een duidelijke grens tussen jou en de ontwerper maakt het dagelijkse onderhoud makkelijker. Tekst, beeld, CMS-items en sectievolgorde zijn van jou. Beweging en opbouw blijven bij de ontwerper.
Welke edits kan ik zonder overleg zelf doen?
Edits die alleen de inhoud raken en de opbouw laten staan, zoals een prijs, datum, aanbieding, klantnaam, link of alt-tekst. Het veld moet al bestaan en je vult het met een vergelijkbare lengte. Een kop van vijf woorden wordt niet veilig als je er tien woorden aan toevoegt.
Hoe test ik een tekstwijziging voordat ik publiceer?
Zet de langste versie van de nieuwe kop erin en kijk op 390 pixels breed, en daarna op je laptop. Controleer bij een nieuwe link de bestemming op een telefoon. Houd het koppenniveau gelijk, en lees de tekst hardop voor. Stel jezelf de vraag wat er misgaat als de tekst langer uitvalt dan je typte.
Waar let ik op bij het vervangen van beelden en logo's?
Vervang een beeld door een beeld met dezelfde verhouding, want verhouding is belangrijker dan pixels. Gebruik als vuistregel 2000 pixels aan de lange kant. Bekijk de uitsnede op telefoon, tablet en laptop, en houd de buitenste 15 procent vrij van gezichten en tekst. Een logo vervang je alleen als het bestand hetzelfde kader heeft.
Wat moet ik doen met wijzigingen die naar de ontwerper gaan?
Wijzigingen aan de hero-kop, de regel onder de knop, de knoptekst of het klantlogo gaan naar de ontwerper, omdat die op lengte zijn gemaakt. Ook animaties, layout, nieuwe paginatypes, tracking en nieuwe talen horen bij de ontwerper. Vraag bij twijfel vóór het publiceren, niet erna.
