Mobiele handel is al goed voor bijna 40% van de totale e-commerce verkopen en zal naar verwachting domineren met ongeveer 54% tegen 2021 – wat betekent dat u aanzienlijke inkomsten misloopt als uw site niet is geoptimaliseerd voor mobiel gebruik!
Naast mobiele apparaten die vaak het eerste contactpunt zijn tussen u en uw klanten, moet u rekening houden met de populariteit van smartphones, de groeiende aanwezigheid van jongere, steeds mobiel-vaardigere consumenten, en een snelle, onderweg, digitaal gerichte cultuur die steeds meer gemak en efficiëntie eist. Het is gemakkelijk om de behoefte aan de mobiele ervaring te zien, maar hoe vertaalt zich dit specifiek naar winkels voor digitale producten?
In dit artikel bespreken we enkele van onze aanbevelingen voor het optimaliseren van uw winkel voor digitale producten voor mobiel gebruik, zodat u gelijke tred kunt houden met de tijd – en de verkopen!
Het begrijpen van de verschuiving naar minimalisme
Laten we even terugspoelen: het is begin jaren 2000 en de komst van smartphones zet internetproviders onder druk om zich aan te passen aan het toenemende bandbreedteverbruik. Consumenten kunnen eindelijk regelmatig internet gebruiken terwijl ze onderweg zijn – een enorme levensstijlverandering die een complete herziening van de presentatie van webinhoud teweegbrengt.
Het is tijd om het script om te draaien van indrukwekkende animaties en grafisch-intensieve inhoud naar webpagina's die redelijk snel kunnen worden geladen op minder krachtige mobiele netwerken, en webontwikkelaars optimaliseren nu voor snelheid om bij te blijven. Voeg hier de effecten van sociale mediaplatforms zoals Facebook aan toe, die moeten worden aangepast voor snelheden van slechts 2G om wereldwijd toegankelijker te worden, en u kunt de toenemende behoefte aan een meer 'gestripte' aanpak voorstellen!
Mobiele optimalisatie staat centraal in deze vooruitgang, aangezien de samenleving in de loop van de tijd nog meer smartphone-georiënteerd is geworden. Nu bevinden we ons op een interessant keerpunt; veel mensen gebruiken smartphones en tablets als primaire apparaten voor allerlei doeleinden, van werk en onderwijs tot winkelen en entertainment.
Smartphones zijn onze levenslijnen – een-stop-shops voor onze schema's, contacten, communicatie en sociale interactie, gezondheid en welzijn, winkelen, lezen, muziek, tv, films, games, noem maar op. Onnodig te zeggen dat het optimaliseren van uw winkel voor digitale producten voor mobiel gebruik niet alleen voor de lol is; het is steeds noodzakelijker voor elke website – en u wilt niet achterblijven! Dus, waar begint u?
Responsief webdesign
Met zoveel verschillende apparaten, hoe kun je er zeker van zijn dat je site correct wordt weergegeven? Responsive web design is een methode voor webdesign die je inhoud en lay-out automatisch aanpast, afhankelijk van het gebruikte apparaat. Een fundamenteel onderdeel van mobiele optimalisatie, responsive web design stelt gebruikers op mobiele apparaten zoals smartphones en tablets (evenals laptops en desktopcomputers) in staat om je website correct te bekijken en effectief te gebruiken volgens verschillende weergavenormen.
Wanneer geoptimaliseerd, kan inhoud op mobiele apparaten minimalistischer lijken om functionaliteit te prioriteren – of visueler gericht zijn om rommel te verminderen, afhankelijk van het type inhoud.
Voorbeeld kleine smartphone (AudioTheme)
Voorbeeld kleine tablet (AudioTheme)
Voorbeeld grote desktop (AudioTheme)
Afgezien van de esthetische en inkomstenvoordelen, helpt responsief ontwerp ook om je SEO te verbeteren. Hoe? Nou, Google heeft onlangs aangekondigd dat het zal beginnen met mobile-first indexing, wat betekent dat de zoekmachine grotendeels zal verwijzen naar de mobiele versies van sites voor ranking en indexering vanwege de overheersing van mobiele gebruikers.
Dus, wat moet je doen om responsive web design te implementeren in je eigen digitale productwinkel? Afhankelijk van je expertise zijn er een paar opties:
- Installeer een responsief thema. De meeste hedendaagse thema's zijn ontworpen om responsief te zijn, dus dit is waarschijnlijk de gemakkelijkste optie, vooral als je je eigen site beheert.
- Betaal je webdesigner om je bestaande thema of aangepaste site aan te passen om responsief ontwerp op te nemen.
- Pas je bestaande thema of aangepaste site zelf aan, als je je eigen webontwikkeling doet.
Analytische tools en heatmapping tools kunnen je de gemiddelde schermafmetingen en activiteitspatronen van je websitebezoekers laten zien, waardoor je kunt aanpassen voor je specifieke publiek. Je kunt je gebruikers zelfs segmenteren op apparaattype. Probeer een tool zoals Responsive Design Checker om te zien hoe je site momenteel wordt weergegeven op verschillende apparaten.
Prestaties
Wil je er zeker van zijn dat je site goed presteert wanneer deze op verschillende apparaten wordt benaderd? Snelheid is alles – het kan de gebruikerservaring maken of breken!
Als een site langzaam laadt, zullen mensen deze veel eerder verlaten. Om bouncepercentages te minimaliseren, wil je dat je site zo snel mogelijk laadt. Het is belangrijk om te onthouden dat mobiele netwerken doorgaans minder stabiel zijn dan breedbandnetwerken, met volatiele connectiviteit die afhankelijk is van de fysieke locatie, gedeeld gebruik en andere variabelen. Met dit in gedachten, hoe lichter je site is, hoe beter!
“De meeste mensen zullen een mobiel websitebezoek verlaten als de pagina meer dan een paar seconden nodig heeft om te laden.” –Google
Hier zijn een paar trucs voor een snel ladende mobiele ervaring:
- Minimaliseer HTML/CSS bestandsgroottes. Gebruik een tool zoals Gzip om ze te comprimeren, en probeer zo dicht mogelijk bij 70KB te komen als je razendsnelle laadsnelheden wilt.
- Verminder verzoeken. Elk onderdeel van uw site (of het nu een afbeelding, lettertype of stylesheet is, enz.) genereert zijn eigen verzoek. Combineer elementen waar mogelijk om dit effect te minimaliseren.
- Gebruik een goede host. Een geoptimaliseerde serverstack met server-side caching is ideaal.
- Vermijd onnodige plugins. Houd uw laadvermogen zo licht mogelijk!
- Overweeg het gebruik van een content delivery network (CDN) voor afbeeldingen. Dit is vooral relevant als uw site veel afbeeldingen heeft. Zorg er ook voor dat uw afbeeldingen zijn geoptimaliseerd voor het web!
- Schakel alle functionaliteit uit die u niet absoluut nodig heeft.
- Gebruik HTML5 in plaats van Flash, als u speciale effecten wilt gebruiken.
- Gebruik geen pop-ups. Ze kunnen lastig zijn om mee om te gaan op mobiele apparaten.
- Beperk het gebruik van redirects en linkverkorters, tenzij ze noodzakelijk zijn. Deze verhogen alleen uw laadtijd!
Google biedt dit hulpprogramma waarmee u de mobiele prestaties van uw site kunt vergelijken met andere sites. U kunt het ook gebruiken om in te schatten hoe snelheidsverbeteringen uw inkomsten kunnen beïnvloeden.
Inhoud
Een ander aspect van mobiele optimalisatie is hoe u uw inhoud presenteert. De aloude regel sinds het begin van de gedrukte media is dat u de basis van uw inhoud 'boven de vouw' wilt communiceren. In digitale zin verwijst dit naar het direct zichtbare gebied van een webpagina wanneer deze voor het eerst wordt geladen.
Sommige experts zeggen echter dat de vouw er niet meer toe doet; dat het met moderne trends in internetgebruik bijna irrelevant is. Als je denkt aan extreem populaire sites zoals Facebook die oneindig scrollen gebruiken, ben je het er misschien mee eens! Dus, waar laat ons dat?
Welnu, zelfs als het waar is dat het minder relevant is dan voorheen, garandeert het plaatsen van uw belangrijkste informatie boven de vouw dat het het eerste is wat uw websitebezoekers zullen zien. Laten we een paar desktop- en mobiele voorbeelden vergelijken:
Zoekbalk en menu's zijn gemakkelijk toegankelijk, met de nieuwste promoties vooraan (Producer Loops)
Het is direct duidelijk wat de site aanbiedt, zonder te hoeven scrollen (UIdeck)
Een schone en minimale uitstraling met de kop en de top producten, met gemakkelijke toegang tot het menu en de ondersteuningsdatabase / FAQ's (ThemeBeans)
Navigatie en interactiviteit
Navigatie is een cruciaal element van mobiele optimalisatie, omdat kleinere apparaten de gebruikersfunctionaliteit aanzienlijk kunnen beperken als ze alleen worden gelaten. Best practices wijzen in de richting van het consolideren van menu's naar de eenvoudigste en meest relevante opties, zoals uw winkel startpagina of hoofdproductgalerij (en/of productcategorieën), ondersteuningspagina en contactpagina. Het goede nieuws is dat de meeste thema's direct uit de doos een mobiele menu-optie hebben!
Wat betreft interactiviteit, houd rekening met de verschillen in klikbaarheid bij het gebruik van verschillende apparaten. Kleinere knoppen kunnen gemakkelijk te klikken zijn met een muis, maar ze kunnen bijvoorbeeld moeilijker te tikken zijn op een smartphone. Alles wat u kunt doen om de mobiele interactiviteit van uw site te optimaliseren, is ideaal!
Veel digitale winkels en diensten bieden live chatondersteuning of snelle en gemakkelijke toegang tot veelgestelde vragen, waardoor het voor klanten zo eenvoudig mogelijk is om vragen te stellen of meer te weten te komen over de producten. U kunt bijvoorbeeld een chatondersteuningsplug-in installeren, of een FAQ-sectie of ondersteuningsdatabase maken die intuïtief is georganiseerd en doorzoekbaar.
Het gemak
Het is belangrijk om te onthouden dat veel mobiele gebruikers alleen al winkelen op hun telefoon vanwege het gemak, dus eenvoudige afrekenprocessen - vooral afrekenen met één klik - worden steeds populairder. Dit geldt ook voor andere elementen van uw site, zoals de menu's, productpagina's en ondersteuning. Denk na over wat u kunt doen om informatie te consolideren, zodat deze beknopt is en een minimale hoeveelheid klikken en browsen vereist!
Audio- en video-inhoud
Wanneer mogelijk, is het altijd beter om uw audio- en videobestanden te hosten op platforms van derden die al specifiek zijn geoptimaliseerd voor mobiel gebruik. Bijvoorbeeld, Vimeo en YouTube-video's kunnen eenvoudig worden ingesloten op uw berichten of pagina's, waardoor de behoefte aan aangepaste code wordt verminderd of er veel opslagruimte op uw eigen server wordt ingenomen.
Als het op audio aankomt, is WordPress prima, omdat het een ingebouwde responsieve audiospeler heeft, maar u kunt er ook voor kiezen om services zoals SoundCloud te gebruiken voor het hosten van uw audiobestanden. Het voordeel van de meeste audio- en videoplatforms zoals deze is dat elke weergave vanaf uw website bijdraagt aan uw weergavetelling op het platform.
Vergeet niet alles te testen!
Sommige bedrijven hebben volledige afdelingen die zich toeleggen op het testen van mobiele apparaten, maar als u een kleinere onderneming bent, kunt u apparaat-testservices of websites (zoals Responsive Design Checker of Responsinator) gebruiken waarmee u uw site op verschillende apparaten kunt bekijken.
U kunt ook gewoon de grootte van uw browservenster aanpassen om te zien hoe uw ontwerp reageert naarmate de afmetingen veranderen. Houd er rekening mee dat u niet noodzakelijkerwijs in elk geval een perfecte lay-out krijgt; responsief ontwerp richt zich doorgaans slechts op 3 of 4 verschillende resoluties, waarbij de meest voorkomende en up-to-date resolutie-breekpunten (CSS-elementen die bepalen hoe lay-outs op verschillende schermformaten verschijnen) worden nageleefd.
De meeste populaire eCommerce-thema's/sites zijn gebouwd met behulp van populaire webontwikkelingsframeworks zoals Bootstrap 4 (gebruikt door Twitter) en zijn "mobile first" gebouwd, met behulp van een grid-lay-outsysteem dat out-of-the-box schaalt en werkt op elk apparaat. Hierdoor kunnen ontwikkelaars boeiende thema's bouwen zonder zich zorgen te hoeven maken dat elk apparaat out-of-the-box wordt ondersteund. Als u problemen ondervindt met bepaalde apparaten, kunt u het probleem meestal melden aan de thema-ontwikkelaar en zij kunnen mogelijk een update uitbrengen.
Het gereedmaken van uw digitale productwinkel voor mobiel gebruik is geen proces van één nacht, maar hopelijk heeft deze post u enkele nuttige ideeën en richtlijnen gegeven. Mobiele optimalisatie blijft groeien in noodzaak; gelukkig betekent dat ook dat er een groeiend aantal tools en bronnen beschikbaar is om u te helpen dit te bereiken!
Heb je wat advies te delen met betrekking tot het optimaliseren van je eigen digitale productwinkel voor mobiel gebruik? Welke hindernissen ben je tegengekomen en hoe heb je ze overwonnen? Wat heb je als het meest nuttig ervaren? We horen graag wat je te zeggen hebt in de onderstaande reacties!
Illustratie door Jessica Johnston.
