Een mobiele website maken: 16 voorbeelden en best practices
Het creëren van een geweldige mobiele ervaring is een belangrijk onderdeel van het maken van een website. Met het constant stijgende mobiele internetgebruik, plus onze mobiele apparaten die 57% van het wereldwijde internetverkeer voor hun rekening nemen, is het bieden van de best mogelijke web-ervaring voor smartphonegebruikers een absolute must.
Maar een goede mobiele maken doet meer doen dan alleen de gebruikerservaring van je website verbeteren. Het heeft namelijk ook een positief effect op de prestaties van je website in de zoekresultaten, als onderdeel van Google's 'mobile-first indexering' (daarover hieronder meer).
Om je te helpen bij het maken van de beste mobiele versie van je website, hebben we 15 voorbeelden van mobiele websiteontwerpen voor je uitgelicht; allemaal gebouwd met Wix. Daarnaast leggen we een aantal van de beste mobiele functies en hun werkwijzen uit:
Je website mobielvriendelijk maken: dit zijn de beste ontwerpen voor mobiele websites
01. S&W Beauty
Als onderdeel van een uitgebreid project van de beroemde ontwerpers Stefan Sagmeister en Jessica Walsh, is deze mobiele website gemaakt om alle mooie dingen in het leven, en de macht die schoonheid over ons heeft te vieren. De website lokt bezoekers binnen in een wereld van betoverende esthetiek, en voorziet hen van informatie over de Beauty tentoonstelling en het boek. De Beauty-website maakt overal gebruik van een samenhangende beeldtaal. Het oogverblindend sierlijke ontwerp van de homepage is bijvoorbeeld gevuld met ingewikkelde patronen en details, die worden gecompenseerd door het minimalistische zwart-wit kleurenschema van de website. Het onderscheidende ontwerp van het project komt duidelijk naar voren in elk detail. Dankzij het responsieve webontwerp van deze top website, ziet het er zowel op desktop als mobiel geweldig uit!
Deze Amerikaanse kapper, activist, auteur en tv-persoonlijkheid die het meest iconisch bekend staat om zijn rol in Queer Eye van Netflix, is iemand om rekening mee te houden. Van Ness heeft een krachtige online aanwezigheid, met meer dan 5 miljoen Instagram-volgers en een slim ontworpen website. Zijn mobiele website is een verlengstuk van zijn persoonlijke merk, en belichaamt perfect zijn levensvreugde in termen van visuele aspecten en functionaliteit. De mobiele homepage is duidelijk, en maakt gebruik van een carrouselbanner om alle belangrijke informatie op de site uit te lichten: kaartjes voor optredens, zijn bestseller uit de New York Times, podcastdetails en zijn nieuwste project: een kinderboek. De website van Jonathan gebruikt traditionele web-conventies voor zowel duidelijkheid als bruikbaarheid, door zijn hamburgermenu aan de rechterkant te plaatsen. Zo weten bezoekers meteen waar ze moeten klikken voor meer informatie. Elke pagina heeft bovendien zijn eigen duidelijke boodschap, beeldtaal en CTA. Het meest indrukwekkende aan deze mobiele website is, dat waar je ook klikt, Van Ness altijd centraal staat. Of het nu foto's van hem zelf zijn, felle kleurenpaletten of anders; de algehele ervaring van deze website is doordrenkt met JVN.
Als het gaat om het ontwerpen van mobiele websites, is onroerend goed beperkt. En aangezien gebruikers je website op veel kleinere schaal bekijken, moet je strategisch zijn met wat je in de eerste vouw laat zien. De mobiele website van In Print Art Book Fair boeit bezoekers meteen met een video, die hun artistieke evenement belicht. De video zet niet alleen de toon door de sfeer van de beurs te laten zien, maar laat bezoekers daarnaast snel weten waar het evenement over gaat. Door deze video op te nemen krijgen gebruikers een voorbeeld van de kunstboekenbeurs in Jeruzalem, en hoeven ze geen extra tijd te besteden om te begrijpen waar het allemaal over gaat. Zodra gebruikers een idee hebben is er een krachtige CTA; 'Dien je aanvraag in', die eenvoudig en to the point is. De datum van het evenement en de deadline voor inzendingen zijn duidelijk en overheersend, en bovendien in meerdere talen opgesteld. Hierdoor wordt de content van de mobiele website gelokaliseerd en toegankelijker voor alle bezoekers. In Print Art Book Fair gebruikt daarnaast nauwgezet spatiëring om hun social balk, FAQ en een contactonderdeel te markeren. Dit zorgt voor een gemakkelijke en efficiënte gebruikerservaring.
04. Puffin Packaging
Het milieuvriendelijke verpakkingsbedrijf Puffin Packaging heeft een duidelijke missie: temperatuurgeïsoleerde verpakkingen moeten efficiënt, betaalbaar en vooral duurzaam zijn. Zowel hun desktop- als mobiele website-ontwerp komen overeen met hun toon, berichtgeving en visuele identiteit. Het is duidelijk wat ze bieden en wat ze willen dat je van hun diensten meekrijgt. De belangrijkste CTA in de eerste vouw leidt ertoe dat gebruikers klikken op 'Hoe het werkt', waarin wordt uitgelegd wat ze doen en hoe ze het doen, voordat bezoekers verder kunnen navigeren. De tweede CTA is een Contact-knop; een bewuste en bruikbare stap voor gebruikers. Strategisch gezien plaatst Puffin Packaging hun contactgegevens niet in de onderste vouw. In plaats daarvan hebben ze hun websitehiërarchie veranderd, om meer gedreven en directer te zijn. De content-rijke website is informatief, met alle milieuvriendelijke merkwaarden duidelijk uitgelegd, plus relevante afbeeldingen om hun boodschap te ondersteunen. Er wordt een verscheidenheid aan voorbeelden gebruikt, en de producten en merkpersona worden bij elke klik nauwkeurig gepresenteerd.
05. Sharon Radisch
De in New York en Parijs gevestigde fotograaf, art director en kunstenaar Sharon Radisch, doorbreekt alle conventies voor het ontwerpen van mobiele websites. Maar dan op een strategische en gestileerde manier! Radisch verplaatste haar koptekst en navigatiemenu naar het midden van het scherm, om de ogen van bezoekers direct naar de afbeeldingen te leiden. Deze kleine aanpassing aan de hiërarchie is slim en verstoort de gebruikerservaring niet. Het verbetert deze juist. Radisch gebruikt een elegante en ingetogen compositie die het beste van haar collectie benadrukt, waardoor de beelden voor zich spreken. Ze creëert op slimme wijze een gedempte esthetiek door zwart-witmotieven op te nemen in combinatie met neutrale tinten. Met minimale tekst heeft ze een slimme en leuke manier gevonden om haar werk te presenteren.
06. Yang's Place
Deze Chinese restaurantwebsite is volledig 'branded', met een prominent logo-ontwerp op de bovenste vouw, die teruggaat naar de homepage wanneer erop wordt geklikt. Het koppelen van je logo aan de homepage is een belangrijk onderdeel van websitenavigatie. Deze functie wordt bovendien nóg belangrijker op mobiele apparaten, omdat het de gebruikerservaring drastisch kan verbeteren. Dit door een familie gerunde restaurant biedt zeer fotogenieke gerechten van handgemaakte dumplings, gecombineerd met delicate handgetekende vectorkunst. Door hun aandacht voor detail te benadrukken, straalt Yang's Place een boetiekachtige kwaliteit uit. Hun plaatsing van de knoppen 'Menu' en 'Online bestellen', leiden bezoekers rechtstreeks naar het hart van Yang's Place: hun eten. Het water loopt je al in de mond door alleen naar hun gerechten te kijken...
07. Alon Peres
De in Tel Aviv wonende designstudent en fotograaf Alon Peres' portfoliowebsite, is een perfecte weergave van zijn werk en creatieve mantra: het ontdekken van nieuwe designculturen. Zoals hij op zijn 'Over mij-pagina' uitlegt: 'Mijn eerste interactie met design was toen ik de krant las in het huis van mijn ouders, omdat ik altijd iets vond om naar te kijken en elke pagina tot in het kleinste detail bestudeerde'. Het zwart-witte kleurenpalet van Peres is een eerbetoon aan de krantenesthetiek. Hij besteedt duidelijk aandacht aan de kleine details. Zo gebruikt hij bijvoorbeeld 'Scrollytelling' om de navigatie moeiteloos te maken, door verschillende manieren te bieden om door de site te bladeren. Je kunt het hamburgermenu bovenaan gebruiken, op een van de geometrische call-to-action-knoppen, of op zijn projecten klikken. Deze verschijnen met behulp van parallax-scrolling. Er is bovendien op elke pagina een knop 'Terug naar boven' toegevoegd. Peres handhaaft met succes zijn merkidentiteit tijdens de gebruikerservaring, zowel op desktop als mobiel.
Deze portfoliowebsite wordt gelanceerd met een gedurfd welkomstscherm om bezoekers te begroeten, en direct kennis te maken met de artiest. Del Ben gebruikt een afbeeldingsbestand van hoge kwaliteit dat perfect bij het formaat past. Deze laat de getextureerde penseelstreken en delicate details van zijn werk goed zien. Hij wekt bijna de illusie van een kunsttentoonstelling in een galerij (indrukwekkend, en allemaal binnen een mobiel scherm). Met een eenvoudig, duidelijk menu dat bezoekers helpt navigeren naar zijn artiestenverklaring, zijn werken, nieuwspublicaties en contactgegevens, heeft deze mobiele website een gerichte bedoeling: de kunstenaar en zijn vak laten zien. Del Ben heeft daarnaast zijn social media-links op de homepage geplaatst, waardoor een nieuwe toegangspoort ontstaat om zijn stukken weer te geven.
19. Studio 19
Voor een bedrijf dat zich inzet voor beweging, geeft de mobiele website van Studio 19 perfect het gevoel van flexibiliteit weer; de essentie van deze dansstudio in het VK. Gebruikers worden in de eerste vouw begroet met video's waarin verschillende danstechnieken worden belicht; van ballet en tap tot muziektheater en hiphop. Het ontwerp van de mobiele website bevat veel beweging, zowel in de videorol als in het geanimeerde logo. Hierdoor worden bezoekers meteen geboeid en overspoeld met energie. Met een duidelijke CTA om een gratis proefversie te boeken, maakt Studio 19 het gemakkelijk voor bezoekers om zich aan te melden. Ze gaan bovendien nog een stap verder door het toevoegen van een duidelijke kalender, met daarop hun aankomende lesrooster. Dit moedigt aanmeldingen aan en houd de vaart erin!
10. Balloon Movie
Dit ontwerp voor mobiele websites is versierd met meerdere onderscheidingen, en houdt fans up-to-date over deze korte film. Websitebezoekers blijven daarnaast op de hoogte van de verschillende vertoningen, dankzij de geïntegreerde Wix Events-app. Bovendien kunnen zij het laatste nieuws lezen op de toegevoegde websiteblog. Er zijn ook links toegevoegd naar relevante social-mediakanalen, waaronder naar de IMDB-pagina van de film. Verder bevat de website Balloon Movie de trailer van de film, die met behulp van Video Box is ingesloten in de pagina. Terwijl gebruikers naar beneden scrollen, wordt automatisch een kort fragment van de trailer afgespeeld. Tegelijkertijd worden ze uitgenodigd om op de knop 'Afspelen' te klikken.
11. Sophie Brittain
Grafisch ontwerpster Sophie Brittain verwelkomt haar websitebezoekers met een bovenvouw, die zowel speels als minimalistisch is. Met een witte achtergrond en weinig beeldspraak ,laat ze een beknopte, inleidende zin het grootste gedeelte van de ruimte in beslag nemen. Sophie's unieke gebruik van microcopy is ook duidelijk te zien in de voettekst van de website. ze kiest namelijk voor pakkende formuleringen in plaats van iconen voor haar links naar social media. Ze labelt haar LinkedIn-account bijvoorbeeld als 'Ik, een Pro', en haar telefoonnummer wordt weergegeven onder 'Jij, die me misschien belt'.
12. Atelier / Blanc
Het mobiele webdesign van Weddingplanner en stylist Romain Deligny's zit vol met aardetinten, prachtige lettertypecombinaties en onberispelijke fotografie.
De desktopversie van het navigatiemenu van de website bestaat uit een klassieke horizontale lijst, bovenaan de pagina. Deze functie wordt echter samengevat in het veel kleinere hamburgermenu op de mobiele website. Wanneer je hierop klikt, wordt een menu op volledig scherm geopend, dat gemakkelijker lees- en klikbaar is op kleine apparaten. Zelfs de Instagram-feed in de voettekst van deze top website is verkleind: van een horizontale galerij met verschillende afbeeldingen, tot een diavoorstelling met één afbeelding. Deze kan bovendien worden genavigeerd met behulp van pijlen.
Inspiratie nodig bij het kiezen van het juiste lettertype voor je website? Lees dan dit artikel en ga aan de slag!
13. Hollie Fuller
De Britse illustrator en maker Hollie Fuller maakt op een goede manier gebruik van de Wix Pro Gallery in haar illustratieportfolio. Ze toont haar verschillende projecten namelijk in een nette, en voor mobiel geoptimaliseerde lay-out. Elk van de illustraties op de homepage leidt naar een innerlijke projectpagina, waar extra stukken en een korte tekstuele beschrijving van haar werk te vinden zijn. Op haar 'About-pagina' voegt Hollie een foto van zichzelf toe, naast lijsten met eerdere mediafuncties en klanten waarmee ze heeft samengewerkt. Het introduceren van de echte persoon achter het werk is over het algemeen een absolute aanrader. Je bouwt hiermee namelijk een persoonlijk merk op, en vergroot tegelijkertijd je geloofwaardigheid en herkenbaarheid.
14. Noni Ceramica
Deze eCommerce-website is in familiebezit en opereert vanuit Brazilië. Noni Ceramica pronkt met zijn keramische gerechten, dankzij subtiele scroll-effecten voor de kop. Hierdoor krijgt de homepage een gevoel van diepte. Een prominente CTA-knop leidt bezoekers vervolgens naar hun webshop. Hier kunnen shoppers ongestoord door productfotografie-opnames van de gerechten scrollen. Het logo-ontwerp van het merk van Noni is geometrisch en typografisch, en helemaal in lijn met de huidige logo-trends. Het logo wordt trots weergegeven op de bovenste vouw van de homepage van deze mobiele website. Op de binnenpagina's verschijnt het onderaan de pagina, en linkt het vervolgens terug naar de homepage voor gemakkelijke navigatie.
Maak zelf een krachtig logo-ontwerp met deze ontwerpfuncties van Wix, en blaas iedereen omver.
15. Michelle Carlos
De mobiele website van de Zuid-Afrikaanse kunstenaar Michelle Carlos wordt gelanceerd in een verbluffende splash-pagina. Haar handgeschilderde werk vult het scherm, vergezeld van haar logo en expertise. Deze pagina helpt de toon te zetten voor de rest van haar website. Het informeert bezoekers namelijk over het soort content dat ze binnen kunnen verwachten. Naast het tonen van haar illustraties, ontwerpen en schilderijen, heeft Michelle haar mobiele website ook gebruikt om een blog te maken. Hier deelt ze alles, van Photoshop-tips tot recepten, vergezeld van haar kunstwerken. Haar bloglogo is hetzelfde als het logo van haar website, waardoor haar kunst- en designportfolio een uniforme uitstraling behoudt.
Het grafische ontwerpportfolio van dit Britse webdesignbedrijf heeft opvallend weinig tekst op de pagina staan. Met slechts een beknopte missie en een CTA-knop die bezoekers oproept om hun werken te verkennen, is de pagina bijna volledig gevuld met afbeeldingen. Met behulp van galerij-aanwijseffecten, wordt de naam van elk project pas weergegeven als er op de afbeelding wordt geklikt. Dit minimaliseert het aantal elementen op het scherm, terwijl alle relevante informatie vanaf het begin wordt weergegeven.
Ook pakkende CTA-teksten maken? Bekijk dan deze handleiding en doe je voordeel met onze 5 tips voor het schrijven van de beste CTA's.
Best practices voor mobiel webontwerp
Ga jij je website mobiel vriendelijk maken? Houd dan in je achterhoofd dat hier meer bij komt kijken dan alleen een verkleinde versie van je desktopsite. Een goede mobiele website vereist namelijk de nodige aanpassing, wat resulteert in een strak, to-the-point ontwerp. Dit zal de gebruikerservaring sterk verbeteren. Bouw je jouw website met Wix? Dan kun je er zeker van zijn dat alle websitetemplates worden geleverd met een volledig geoptimaliseerde, ingebouwde mobiele versie. Hierdoor wordt je website automatisch mobiel, en tegelijkertijd geconverteerd naar een mobielvriendelijke weergave, met geoptimaliseerde lettergroottes, afbeeldingen en meer. Ook een mobiele website maken? De volgende werkwijzen zullen je hierbij helpen:
Houd rekening met de 'Mobile-first indexering':
Sinds de implementatie van de mobile-first index van Google in 2015, wordt de ranking van zoekresultaten van een website voornamelijk bepaald op basis van de mobiele versie. Je website mobielvriendelijk maken is dan ook een van de belangrijkste SEO-praktijken van deze tijd geworden.
Minimaliseer pagina-elementen:
Vanwege de beperkte hoeveelheid content op mobiele schermen, kunnen niet alle teksten en afbeeldingen op je desktopontwerp op je mobiele versie komen te staan. Verberg daarom alle pagina-elementen die niet absoluut noodzakelijk zijn, of direct bijdragen aan je bericht.
Gebruik CTA's:
Zonder de luxe van een muis en een toetsenbord, wordt mobiele navigatie slechts uitgevoerd met onze vingertoppen. Dit houd in dat je navigatie prominent aanwezig, en altijd binnen handbereik moet zijn. Zorg ervoor dat je call-to-actions en andere knoppen opvallen, gemakkelijk te klikken, en strategisch geplaatst zijn.
Gebruik een 'Terug naar boven'-knop:
Laat websitebezoekers eenvoudig terug scrollen naar de bovenkant van je pagina met een 'Terug naar boven'-knop. Deze kan volledig worden aangepast aan je eigen wensen.
Koppel je logo aan de homepage:
Door deze belangrijke navigatiemethode kunnen websitebezoekers op elk gewenst moment tijdens het browsen op je website, met één klik terugkeren naar je homepage. En met de drukke en tijdrovende levens die mensen tegenwoordig hebben, is dat zeker geen onnodige luxe!
Verklein je menu:
Zelfs als je desktopwebsite een klassiek, lang navigatiemenu heeft, is het verstandig om ervoor te zorgen dat je op kleinere apparaten voor een mobiel menu kiest. Een goede optie is het zogenaamde 'hamburgermenu'.
Dit is een icoon dat bestaat uit drie horizontale lijnen, weke zich openen in een menu wanneer erop wordt geklikt. Een ander idee om te overwegen is een 'Quick Action Bar', of snelle actiebalk, waardoor je belangrijkste acties duidelijk toegankelijk zijn.
Profiteer van mobiele functies:
Het gebruik van unieke mobiele functies kan je mobiele website een boost geven en je bezoekers een vlottere ervaring bieden. Een aantal goede ideeën zijn: een welkomstscherm met je merknaam om bezoekers professioneel welkom te heten, animaties voor mobiele websites om je website op te fleuren, en een mobiel menu op maat voor een volledig samenhangend ontwerp.
Je ziet het: je website mobiel vriendelijk maken kan op veel verschillende manieren. Zelf een mobiele website maken? Neem alle bovenstaande tips dan zeker in overweging. Go for it!
Team Wix