Mobiele bewerkingen hacks in Squarespace Fluid Engine
De Squarespace Fluid Engine Editor is halverwege 2022 gelanceerd en daarmee kregen alle Squarespace gebruikers meer creatieve controle en flexibiliteit. Ook ik bij Made by Anouk, ben dolenthousiast geworden van de vrijheid en mogelijkheden die Squarespace 7.1 Fluid Engine biedt.
Een van de meest opvallende veranderingen die Squarespace met de Fluid Enginge doorgevoerd heeft, is dat de Squarespace Fluid Engine editor jou de mogelijkheid geeft om een aparte mobiele versie van je website te maken, los van het grote scherm ontwerp. Met rond 50% van al het websiteverkeer in Nederland* afkomstig van mobiele apparaten, is deze functie nu belangrijker dan ooit!
Het nadeel hiervan is echter dat je computer- en mobiele website afzonderlijk moet aanpassen. Hoewel dit noodzakelijk is voor een goed mobiel webdesign, kost het toch wat extra tijd.
En daar komt dit artikel van pas! Als webdesigner die voortdurend websites ontwerpt met Squarespace, heb ik handige trucs bedacht om het bewerken van de mobiele versie in Squarespace Fluid Engine sneller te maken. Dus blijf lezen!
HOE je naar de MOBIELE wEergave IN squarespace 7.1 FLUID ENGINE komt
Klik op het mobiele pictogram rechtsboven en je scherm past zich aan aan het ontwerp voor mobiele apparaten. Alle bewerkingsfuncties voor de grote scherm versie zijn ook van toepassing op mobiel. De mobiele editor gebruikt dezelfde bewerkingsfunctie als voor de desktop website. Het is gewoon in een mobiel formaat. Dus je hoeft niets nieuws te leren als je eenmaal weet hoe je op desktop bewerkt. Natuurlijk zijn dingen veel kleiner en onder elkaar op mobiel en is het schermformaat compleet anders, maar daarom is het belangrijk om aan te passen en ervoor te zorgen dat alles er ook goed uitziet op mobiel. Dat is altijd al zo geweest, maar nu kun je het daadwerkelijk onafhankelijk doen.
GEBRUIK PIJLTJESTOETSEN OM JE BLOKKEN TE VERPLAATSEN (In plaats van te klikken en slepen met je muis)
Als je hebt geëxperimenteerd met Squarespace 7.1 Fluid Engine Editor, weet je dat het slepen van een blok van de ene positie naar de volgende soms wat hapert. In plaats van je muis te gebruiken om blokken te klikken en slepen, gebruik je in plaats daarvan je pijltjestoetsen van je toetsenbord.
Omdat de editor van Squarespace blokken vastzet in het raster, gebruik dan de pijltoetsen voor een gestroomlijnde en nauwkeurige ervaring. Bovendien hoef je je geen zorgen te maken over het vastpakken van het juiste blok wanneer blokken elkaar beginnen te overlappen.
GEBRUIK DE PIJLEN "OMHOOG" EN "OMLAAG" VOOR een snelle MOBIELe volgorde
Squarespace vult de layout van de mobiele versie in volgens de volgorde waarin je het blok aan je desktopontwerp hebt toegevoegd. Dus niet volgens de positie in je desktopontwerp! Dit betekent dat je blokken soms moeten worden herschikt.
Versnel het proces door de pijlen "omhoog" en "omlaag" om de blokken snel de volgorde van je mobiele website te wijzigen. Door op de "omhoog" pijlen te drukken, verplaats je een blok zodat het boven het blok erboven komt te staan, en door op de "omlaag" pijl te drukken, verplaats je het blok onder het blok eronder.
Opmerking: Squarespace werkt aan een nieuw systeem om dit aan te passen, zodat de blokken zich aanpassen aan de plaats waar je ze op je desktoppagina hebt toegevoegd, in plaats van de volgorde waarin je ze hebt toegevoegd. Dus binnenkort ga je merken dat de blokken er op mobiel behoorlijk goed uitzien wanneer je aan het bouwen bent! Maar het zal nooit perfect zijn en je zult altijd moeten aanpassen.
GEBRUIK MEER SECTIES OP JE PAGINA
Gebruik in plaats van al je inhoud in een zeer lange sectie te plaatsen, meerdere secties om je pagina te maken. Als je het uiterlijk van een sectie wilt behouden in plaats van meerdere secties, stel dan de sectiethema's in op dezelfde kleur en verlaag de sectieopvulling tot 0. Dit geeft hetzelfde effect. Als je dingen wilt verplaatsen, gebruik dan eenvoudigweg de omhoog en omlaag knoppen om secties te verschuiven. Dit maakt het vooral op mobiel gemakkelijker en sneller. Als je een lange sectie hebt, kan het verplaatsen van items op mobiel traag en haperend zijn. Denk aan het werken met "kleine brokken" wanneer je meer secties hebt.
GEBRUIK HET AANTAL RIJEN IN DE INSTELLINGEN IN PLAATS VAN HET BLAUWE PIJLTJE TE SLEPEN OM RIJEN VAN DE SECTIE TE VERMINDEREN
Een cool aspect van Squarespace Fluid Engine is dat je de grootte van je sectie kunt bepalen zonder dat je space blokken hoeft toe te voegen. Echter je gaat merken dat bij het werken met Fluid Engine er vaak extra rijen onderaan je sectie worden toegevoegd die je moet verwijderen. Dit gebeurt helaas vaak bij de mobiele weergave.
Als je jezelf met extra rijen op je mobiele site vindt die je moet verwijderen, raad ik je aan om de gewoonte aan te nemen om het aantal rijen in het gedeelte Instellingen te gebruiken in plaats van te proberen het blauwe pijltje omhoog en omlaag te slepen. De sleepfunctie bij het bewerken op mobiel vertoont vaak haperingen, maar het aantal rijen in de instellingen niet.
Open de instellingen van je sectie, klik binnen het aantal rijen en gebruik vervolgens je pijltjestoetsen om rijen toe te voegen of te verwijderen. Naar onze ervaring is dit de meest soepele manier om dit te doen, zonder haperingen!
Squarespace heeft hard gewerkt aan het verbeteren van Fluid Engine en de mobiele editor.
Hoewel we het er allemaal over eens kunnen zijn dat er nog veel werk aan de winkel is, heb ik de afgelopen maanden veel kleine veranderingen gezien die een grote impact hebben gehad. Ik hoop dat deze tips je helpen om sneller te ontwerpen.
Ik hoop dat je deze blog waardevol vond! Ik kijk uit naar de functionele en creatieve wijzigingen die je aan je mobiele Squarespace website gaat toevoegen. Als je wat extra assistentie nodig hebt of als je iets anders in gedachten hebt, weet dan dat ik voor alle Squarespace support altijd klaar sta. Ik kan je met mijn expertise en kennis je site er helemaal laten uitzien zoals jij het wilt! Als je een hele nieuwe website wilt
* Bron: Statcounter
