Breakpoint? Nee, deze blog gaat niet over een epische ‘battle’ tussen Djokovic en Nadal. Hieronder gaan we nieuwe HubSpot functionaliteit bespreken voor het bieden van een prettige ‘web experience’ op smartphones. Mobile breakpoints voor HubSpot themes zijn een kleine uitbreiding met grote impact. Waarom?
Laten we voor het beantwoorden van die vraag eens kijken naar het marktaandeel van de 3 meest gebruikte devices. Eind 2020 was de verhouding desktop, mobiel en tablet:
- Desktop: 44,22%;
- Mobiel: 52,95%;
- Tablet: 2,83%.
Deze cijfers liegen niet! We zijn ‘telefoonverslaafd’ en daar moeten developers en marketeers meer rekening mee houden. Tegenwoordig bezoeken we websites immers het vaakst op onze smartphones.
Mobiele breakpoints voor HubSpot themes
Websites zijn tegenwoordig ‘responsive’. Dat betekent dat je mensen andere content, eventueel in een afwijkende vormgeving & stijl, voorschotelt op ‘devices’ als desktop, laptop en smartphone. De opmaak en layout passen zich daarbij op bepaalde breakpoints automatisch aan de 'viewport' aan. Je maakt één website die zich als een kameleon aanpast aan het scherm waarop hij bekeken wordt.
HubSpot geeft je sinds kort meer controle over deze ‘web experience’ op desktop en smartphone via ‘mobile breakpoints’. Dat is belangrijk, want hierboven hebben we gezien dat deze apparaten meer dan 97% van het marktaandeel vormen. Developers en marketeers kunnen de layout en styling voor de schermen van deze 2 ‘devices’ nu heel precies controleren. Dat is de droom van elke marketeer die een webpagina of landingspage wil bouwen voor een nieuwe campagne! Snel en efficiënt werken zonder een regel code te hoeven schrijven.
Verder heeft HubSpot de standaard themes geüpdatet. Wie voor zijn volgende project gebruik wil maken van zo’n theme, krijgt deze functionaliteit er automatisch bij.
Webpagina’s mobiel vriendelijk optimaliseren
Waarom zijn die ‘mobile breakpoints’ zo belangrijk? Ze maken deel uit van de ‘mobile first’ benadering. We weten dat de meeste mensen tegenwoordig browsen met hun smartphone. Dan moet je je ontwerp in de eerste plaats inrichten voor de mobiele gebruiker.
Op een mobiel heb je immers maar weinig schermruimte. Het is zaak om alleen de kernboodschap en noodzakelijke informatie overzichtelijk te tonen, terwijl je niet inlevert op een fraaie presentatie. Dat is nu heel snel te regelen binnen HubSpot.
Je kan ervoor kiezen om complete modules op mobiel te verbergen die je wel op desktop toont. Ook kan je afbeeldingen verbergen of specifieke ‘padding’ en ‘spacing’ meegeven, zodat je mobiele content fraai en rustig oogt.
Bij een ‘mobile first approach’ houd je ook rekening met andere factoren. Prent in ieder geval deze beginselen in je achterhoofd, dan ben je al een eind op weg.
- gebruik grote, leesbare tekst;
- plaats afbeeldingen met een zo klein mogelijke bestandsgrootte;
- kies voor een eenvoudige layout;
- maak gebruik van grote klikbare cta’s en links.
Het is belangrijk om aandacht te besteden aan de leesbaarheid (font-size en regelafstand) van paragrafen en headings. Anders moet de bezoeker voortdurend zijn smartphone voor z’n gezicht houden als hij jouw pagina’s bezoekt. Dat levert gevaarlijke situaties op.😉
Natuurlijk wil je een bouwvakker met kolenschoppen ook een klikbare cta aanbieden wanneer hij de webshop van jouw bedrijf voor bouwmaterialen bezoekt. Het is verder verstandig om de bestandsgrootte van afbeeldingen zo klein mogelijk te houden. Dat garandeert een snelle laadtijd.
Marketing met micro moments
Realiseer je dat we smartphones heel anders gebruiken dan desktops en tablets. Een mobiele telefoon pak je op allerlei momenten (eventjes) om op het web te surfen. Heel anders dan een desktop waar je letterlijk langer ‘voor gaat zitten’.
Voor marketeers is het noodzakelijk om rekening te houden met deze ‘micro moments’. De hele dag door gebruiken we onze smartphone om eventjes te zoeken, reviews te lezen, iets te bekijken of te kopen. Vaak zijn dit essentiële beslismomenten tijdens de customer journey om meer te weten te komen over een onderwerp of daadwerkelijk een aankoopbeslissing te maken.
Webpagina’s en productpages optimaliseren voor ‘mobile’ is geen luxe. Het is een noodzaak! Met HubSpot doe je het vlug zonder een programmeur te hoeven zijn.
Heb je vragen over het ontwerpen voor mobiel of wil je gewoon meer weten over inbound marketing, account based marketing of HubSpot? We leggen je graag uit hoe je al je b2b marketing-, sales- en serviceprocessen vormgeeft met deze veelzijdige en krachtige software.
