Mobiele website bewerkingen in Squarespace 7.1

De lancering van de Squarespace 7.1 Fluid Engine Editor in 2022 was een echte gamechanger voor iedereen die met Squarespace werkt. De verbeterde creatieve controle, flexibiliteit, en de extra layout scherm voor mobiele websites hebben ook bij mij het ontwerpen nog leuker en vrijer gemaakt vooral omdat steeds meer mensen websites via hun mobiele apparaten bekijken. De mogelijkheden zijn eindeloos, en ik kan niet wachten tot jij dit ook ervaart. Lees vooral verder voor enkele handige hacks om je mobiele website in Squarespace te verbeteren!

De Squarespace 7.1 Fluid Engine biedt je de mogelijkheid om een aparte mobiele website versie te ontwerpen, los van het ontwerp voor grote schermen.

Wat is de Squarespace 7.1 Fluid Engine

Een van de meest opvallende veranderingen die Squarespace met de Fluid Enginge doorgevoerd heeft, is dat de Fluid Engine Squarespace website 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 (bron Statcounter) 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 7.1 Fluid Engine sneller te maken. Dus blijf lezen!

 

Hoe je de mobiele website in Squarespace 7.1 gaat

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.

In Squarespace 7.1 website die de Fluid Engine Editor gebruiken, kun je de apparaatweergave gebruiken om jouw mobiele website te maken

Gebruik pijltoetsen 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 ‘omlag’ voor een snelle mobiele website 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 sections in je pagina om je mobiele website in Squarespace beter te maken

Gebruik meer sections in 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 rijden in de instellingen in plaats van het blauwe pijltje te slepen om rijen van de section te verminderen

Gebruik het aantal rijden in de instellingen in plaats van het blauwe pijltje te slepen om rijen van de section 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 de mobiele website editor

Squarespace heeft hard gewerkt aan het verbeteren van de mobiele website 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.

 
Made by Anouk

Dit artikel is geschreven door Made by Anouk, de Squarespace expert van Nederland.

Al jaren transformeer ik Squarespace websites van ‘saai’ naar ‘wauw, dit wil ik’. Met meer dan 250 ondernemers en bedrijven heb ik bewezen dat een goed ontworpen website het verschil maakt. Jouw tijd is te waardevol om te verdwalen – laat mij je helpen de perfecte website te ontwerpen.

https://madebyanouk.nl
Vorige
Vorige

Elegante website in Squarespace: YouTube Nicolas Fairford