7 tips voor het optimaliseren van de mobiele versie van je Squarespace website
NB1: Squarespace heeft zowel in 7.0 als in 7.1 een ingebouwde mobile view, zodat je kunt zien hoe je website er op mobiel uit komt te zien. Echter, elk type telefoon heeft een andere schermresolutie, dus wat Squarespace je laat zien is niet op iedere mobiele telefoon zo. Zie het dus als een goede indicatie.
NB2: hieronder komt CSS ter sprake. Voor werken met CSS in Squarespace is het Business Plan nodig. Met het Personal Plan kan dit niet.
Tip 1 > mobiele navigatie
Bekijk de mobiele navigatie voor je telefoon via de mobile view in Squarespace.
SQS 7.0 > Brine
In de Site Styles (via Design > Site Styles) heb je diverse opties om je mobiele vormgeving aan te passen. Tik bovenin in het zoekveld ‘mobile’ in en alle mobiele settings die je aan kunt passen komen tevoorschijn.
Denk bijvoorbeeld aan:
de kleur van de teksten
de achtergrondkleur
de kleur van het menu-icoontje
de vorm van het menu-icoontje
SQS 7.1
Site Styles is in deze versie helaas verdwenen. Hiervoor in de plaats zijn Fonts en Colors teruggekomen. In deze versie zitten (nog) geen opties op je mobiele menu aan te passen. Squarespace bepaalt zelf wat goed voor je is. Wel kan je een kleurenthema kiezen voor je mobiele navigatie.
Tip 2 > witruimte verwijderen in navigatie
Verwijder in je mobiele navigatie de extra witruimte tussen je primary en secondary navigation.
SQS 7.0 > Brine
Als je alleen de primary navigation gebruikt, dan heb je hier geen last van. Maar mocht je op de desktop versie je logo in het midden van je navigatie hebben staan, dan staan hoogstwaarschijnlijk de elementen die links van je logo staan in je primary navigation en de elementen rechts van het logo in je secondary navigation.
In het mobiele navigatie valt dan een gat tussen deze twee. Om dit op te lossen kan je de volgende code gebruiken:
/*verwijder ruimte nav tussen primary & seconday navigation op mobiel*/ .Mobile-overlay-nav--secondary .Mobile-overlay-nav-item:first-child { padding-top: 0 !important; }
SQS 7.1
Primary en secondary navigation is in versie 7.1 komen te vervallen.
Tip 3 > fontgroottes
Pas met CSS de fontgroottes aan voor je H1, H2, H3 en body teksten.
SQS 7.0 > Brine
Squarespace heeft de neiging om de H3 teksten op mobiel groter te tonen dan de H2 teksten. Met CSS kan je dit zelf aanpassen. Copy paste deze code in je CSS veld (Design > CSS), verwijder de code van de Headings die je niet wilt aanpassen en pas het aantal pixels aan naar de gewenste fontgrootte.
@media only screen and (max-width: 640px) {h1 { font-size: 45px !important; }} @media only screen and (max-width: 640px) {h2 { font-size: 35px !important; }} @media only screen and (max-width: 640px) {h3 { font-size: 25px !important; }}
Zie voor meer codes voor het aanpassen van tekstgroottes deze blogpost: https://www.samenmetsan.nl/blog-overzicht/aanpassen-fontgrootte-mobiel
SQS 7.1
In Design > Fonts werkt Squarespace standaard met rem en niet met pixels. Heel kort gezegd komt het erop neer dat het werken met rem vriendelijker is voor de gebruiker. Een browser werkt vaak met een standaardinstelling voor het laten zien van het basisfont (bv 16px), maar dit kan iemand zelf aanpassen (naar bv 20px). Als je in Squarespace werkt met px dan blijft de tekst bij de gebruiker 16px. Als je rem gebruikt, dan schaalt de tekst naar 20px. Je overige teksten schalen bij het gebruik van rem netjes in de verhouding mee die je hebt ingesteld.
Lees in dit artikel meer over pixels en rem (en em): https://engageinteractive.co.uk/blog/em-vs-rem-vs-px
Codes voor het aanpassen van de fontgroottes voor 7.1 volgt nog.
Tip 4 > AMP aanzetten
Heb je een blog dan kan je overwegen om AMP aan te zetten.
SQS 7.0 & 7.1
AMP is een soort gestripte versie van je blogposts. Ze laden daardoor sneller. En een sneller website vindt Google alleen maar fijn. Dit draagt dus bij aan je SEO.
Je eventueel mooi opgemaakt blogposts komen er door het aanzetten van AMP wel anders uit te zien, dus het is een overweging wat je belangrijker vindt.
Standaard staat AMP uit, maar je kan het aanzetten via Settings > Blogging > Accelerated Mobile Pages.
Lees hier meer over AMP: https://digitalmarketinginstitute.com/blog/what-is-amp-and-why-should-i-be-using-it
Tip 5 > formaat logo
SQS 7.0 > Brine
Je logo kan op mobiel heel klein getoond worden. Met deze code kan je zelf instellen hoe groot je logo wordt laten zien op mobiel:
(verander uiteraard het aantal pixels naar de gewenste grootte)
/* Logo voor mobiel groter */ .Mobile-bar-branding-logo { width: 200px; }
SQS 7.1
In 7.1 hoef je niet met code aan de slag om de grootte van je logo voor mobiel aan te passen. Je kan de grootte bepalen via: Edit Site Header > Site Title & Logo > Mobile Logo Max Height.
Tip 6 > buttons even breed maken
Als je een pagina hebt gemaakt voor al je Instagram links die je plaatst in je Instagram bio (ipv een Linktree pagina), dan krijg je waarschijnlijk te maken met buttons die qua breedte allemaal verschillend zijn. Met code kan je alle buttons op een pagina dezelfde breedte maken.
SQS 7.0 & 7.1
De volgende code plaats je in de header injection van je pagina (in je pagina Settings, tabblad Advanced).
<style> .sqs-block-button-element--small {width: 280px !important;} </style>
De breedte van de buttons kan je aanpassen door het getal in de code te wijzigen. 280 pixels geeft mijns inziens het mooiste beeld op mobiel.
Belangrijk: Check even welke 'maat' buttons jij gebruikt op je IG pagina. Gebruik je 'medium' buttons, verander dan 'small' in bovenstaande code in 'medium'. En voor 'large'.... you get it.
Tip 7 > voeg een zoekfunctie toe
Als je een zoekfunctie hebt toegevoegd aan je desktop versie, wil het nog niet zeggen dat de mobiele versie van je website deze ook heeft. Zo voeg je ‘em toe:
SQS 7.0 > Brine
Ga naar Design > Sites Styles > Mobile: search icon
Hier kan je instellen waar je het icoon wilt laten zien in de navigatie.
SQS 7.1
Vooralsnog niet mogelijk.
