Mobile commerce already accounts for nearly 40% of total eCommerce sales, and is projected to dominate at about 54% by 2021 – which means that you could be missing out on serious revenue if your site isn’t optimized for mobile use!
In addition to mobile devices commonly being the first point of contact between you and your customers, consider the popularity of smartphones, the growing presence of younger, increasingly mobile-savvy consumers, and a fast-paced, on-the-go, digitally-focused culture that demands more convenience and more efficiency by the minute. It’s easy to see the need for the mobile experience, but how does this translate specifically to digital product stores?
In this post, we walk through some of our recommendations for optimizing your digital product store for mobile use, so you can keep up with the times – and the sales!
Understanding the shift toward minimalism
Let’s rewind for a minute: It’s the early 2000s, and the advent of smartphones is putting a lot of pressure on internet service providers to adapt to increasing bandwidth consumption. Consumers are finally able to use the internet regularly while moving around – a huge lifestyle change that instigates a complete overhaul of how web content is presented.
It’s time to flip the script from impressive animations and graphic-heavy content, to web pages that can be loaded reasonably fast on less-powerful cellular networks, and web developers are now optimizing for speed in order to keep up. Take this and add on the effects of social media platforms like Facebook, which must be adapted for as little as 2G speeds in order to become more globally accessible, and you can envision the increasing need for a more “stripped-down” approach!
Mobile optimization has been at the very center of this progression, as society has grown to become even more smartphone-oriented over time. Now we are at an interesting tipping point; many people are using smartphones and tablets as primary devices for all kinds of purposes, from work and education, to shopping and entertainment.
Smartphones are our lifelines – one-stop shops for our schedules, contacts, communication and social interaction, health and wellness, shopping, reading, music, TV, movies, games, you name it. Needless to say, optimizing your digital product store for mobile use isn’t just for fun; it’s increasingly necessary for any website – and you don’t want to be left in the dust! So, where do you start?
Responsive web design
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.
- Reduce requests. Each component of your site (whether its an image, font, or stylesheet, etc.) generates its own request. Combine elements where possible to minimize this effect.
- Use a good host. An optimized server stack with server-level caching is ideal.
- Avoid unnecessary plugins. Keep your load as light as possible!
- Consider using a content delivery network (CDN) for images. This is especially relevant if your site has a lot of images. Also make sure your images are optimized for the web!
- Disable any functionality you don’t absolutely need.
- Use HTML5 instead of Flash, if you want to use any special effects.
- Don’t use pop-ups. They can be cumbersome to deal with on mobile devices.
- Limit the use of redirects and link shorteners unless they are necessary. These just add on to your load time!
Google offers this tool that allows you to compare your site’s mobile performance with other sites. You can also use it to estimate how speed improvements could impact your revenue.
Inhoud
Another aspect of mobile optimization is how you present your content. The long-standing rule since the beginning of print media has been that you want to communicate the basic gist of your content “above the fold”. In the digital sense, this refers to the immediately visible area of a web page when it first loads.
However, some experts say that the fold no longer matters; that with modern trends in internet usage, it’s nearly irrelevant. When you think about extremely popular sites like Facebook that use infinite scrolling, you might agree! So, where does that leave us?
Well, even if it’s true that it’s less relevant than before, placing your most important information above the fold does guarantee that it’s the first thing your site visitors will see. Let’s compare a few desktop and mobile examples:
Search bar and menus are easily accessible, with the latest promotions front and center (Producer Loops)
It’s immediately obvious what the site offers, without having to scroll (UIdeck)
A clean and minimal look featuring the headline and top products, with easy access to the menu and support database / FAQs (ThemeBeans)
Navigation and interactivity
Navigation is a crucial element of mobile optimization, because smaller devices can significantly limit user functionality if left alone. Best practices point toward consolidating menus into the simplest and most relevant options, such as your store home or main product gallery (and/or product categories), support page, and contact page. The good news is that most themes come with a mobile menu option right out of the box!
When it comes to interactivity, factor in the differences in clickability when using different devices. Smaller buttons might be easy to click with a mouse, but they can be more difficult to tap on a smartphone, for example. Anything you can do to optimize your site’s mobile interactivity is ideal!
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.
