Naar
boven
Logo Karel Geenen

10 onmisbare tips voor een mobiele website

Dat mobiel bereikbaar zijn belangrijk is, hoef ik hier niet nog eens te herhalen.. ;-) Ook wij zijn hier druk mee bezig en tijdens het surfen naar meer informatie over de mogelijkheden voor een mobiele website, kom je terecht in een oerwoud van adviezen. Daarom heb ik een top 10 met onmisbare tips gemaakt, zodat je snel op de goede weg zit. Succes ;-)!

1. Ga voor een mobiele makeover

Wanneer de huidige website in een mobiele versie moet worden gegoten is dat nét wat meer werk dan de gehele content in één lange, smalle kolom proppen. Pak de kans om de website opnieuw in te delen en ga uit van de mogelijkheden op mobiele apparaten. Denk aan het maken van foto’s, acties op basis van de locatie van de gebruiker, etc. Dit zijn kansen voor nieuwe functies en mogelijkheden op je website.

Bedenk wat de belangrijkste acties zijn en welke gegevens daarvoor direct beschikbaar moeten zijn. Reorganiseer op basis van die belangrijkste informatie de hele website en laat onnodige blokken content achterwegen. Control C + control V gaat hier dus niet op.. ;-)

2. Maak gebruik van iconen

Iconen maken het niet alleen snel leuk, ze zijn ook erg handig op een kleiner scherm. Er is online een hoop creatief werk beschikbaar en wie goed zoekt komt zelfs gratis fonts tegen. Daarbij zijn er zelfs fonts te downloaden die je ook voor commercieel gebruik mag inzetten. Lees wel ALTIJD de licentie voordat je ze gebruikt. Een leuk voorbeeld vind ik de Social Media Icons:

fonts

3. Altijd een pop-up vrije mobiele site!

Apps zoals Youtube en Google Maps zijn leuk om te gebruiken zodra een bezoekers een video op je website wilt bekijken of een routebeschrijving zoekt, maar zorg voor integratie! Bij het verlaten van de website, doordat er een nieuw venster wordt geopend (zoals een app) kan er irritatie ontstaan bij de bezoeker.  Daarnaast is het ook erg belangrijk eventuele pop-ups, die nu op de gewone website voorkomen, niet terug te laten komen bij een mobiele website. Meerdere schermen beheren is namelijk niet zo makkelijk als op een computer.

4. Hou de headings korter dan kort.

Dit spreekt eigenlijk voor zich. Zoveel ruimte is er niet op het mobiele scherm en wanneer je heading langer is dan twee regels wordt de content naar beneden geschoven. Niet handig, want dat is al snel uit het scherm van de bezoeker. Hou ze dus kort en krachtig! Hetzelfde geldt uiteraard voor de rest van de copy, zorg voor overzicht en duidelijkheid.

5. Zorg voor een “Ga naar de volledige website” nooduitgang

Zorg altijd voor een nooduitgang, een link waarmee bezoekers snel naar de volledige website kunnen. Sommige bezoekers willen nou eenmaal de website bezoeken zoals ze gewend zijn.

6. Lettertype en lettergrootte

Ga niet lager dan een tekstgrootte van: 14 pt. Kies een lettertype wat er goed uitziet op alle besturingssystemen (test dit dus ook uitvoerig!). Kijk ook eens op http://www.google.com/webfonts voor gratis lettertypen.

7. Respecteer de “dikke vingers” van je doelgroep ;-)

Hoe fijn een touch screen ook kan zijn, iedereen heeft wel eens last van “dikke vingers” en raakt lukraak onbedoelde knoppen op een website. Maak de calls-to-action groot genoeg zodat gepriegel niet nodig is. Denk aan afmetingen van 40 bij 40 pixels en zorg voor genoeg ruimte tussen de verschillende “knoppen”; minimaal 10 pixels. Daarbij is het ook fijn voor bezoekers als de website mooi in en uit zoomt en zich automatisch aanpast aan de afmetingen van het scherm.

8. Maak ook je marketing mobiel!

Tip: met de Mobile Ads Showcase app van Google kun je bekijken hoe jouw mobiele ads werken op (Android) smartphones en tablets. De app is speciaal ontwikkeld voor marketingbureaus om klanten te laten zien hoe advertenties eruit zien op mobiele apparaten.

Bekijk de video:

9. Leg de keuze bij de gebruiker

De meeste mobiele apparaten hebben een klein scherm in vergelijking met een desktop of laptop. En de meeste websites leveren bergen aan informatie (lees:tekst) op bv. de homepage.
Houd daar rekening mee en laat de gebruiker zelf kiezen van welk onderwerp zij de informatie willen zien. Gebruik korte “intro’s” en hints waarna de gebruiker zelf kan kiezen meer informatie te bekijken. Vergeet niet dat keuzemenu’s die geopend en gesloten kunnen worden (bv. openklappen naar beneden) NOOIT de content eronder mogen verstoppen. Laat deze altijd zichtbaar en zorg ervoor dat de content mee schuift naar beneden.

10. Snelheid is alles

Een langzame website kan grote gevolgen hebben voor het conversiepercentage, vooral op een mobiel apparaat. Slecht nieuws dus.. Zorg dat alles snel laad en optimaal werkt. Ook bij het doen van een bestelling moet het snel en gemakkelijk zijn voor de gebruiker. Het proces van het bekijken van een artikel, het specificeren (bv. maat en aantal), het toevoegen aan het winkelwagen en het afrekenen zou binnen enkele ogenblikken mogelijk moeten zijn. Hetzelfde geldt uiteraard voor non-e-commerce sites, denk aan het invullen van formulieren, contact opnemen n.a.v. een vacature of het aanvragen van meer informatie (bv. een brochure).

Nog meer tips? Download dan het e-book “50 ways to please your customers: A guide to mobile web design best practices.” van Mobify!

Zijn er andere tips die volgens jou in de top 10 horen? Laat dan een reactie achter!

 


Over de auteur:

Dit artikel is geschreven door .

Lianne Soer
Lianne is Communicatie & Content Manager bij Karelgeenen.nl en is medeverantwoordelijk voor het reilen en zeilen van de blog, cursussen en sociale media. Daarnaast heeft ze i.s.m. Karel de cursus "Google Analytics in de praktijk" ontwikkeld.
10 reacties op "10 onmisbare tips voor een mobiele website"
  • Albert zegt:
    22 jan, 2013 om 13:47

    Bedankt voor deze inderdaad onmisbare tips waar je rekening mee moet houden bij het maken van een mobiele website. “Respecteer de “dikke vingers” van je doelgroep” :D

    Reageren
    • Lianne Soer zegt:
      22 jan, 2013 om 13:51

      Dankjewel voor je reactie! ;-)

  • Arwin zegt:
    26 jan, 2013 om 20:34

    Google Fonts zien er inderdaad goed uit in de moderne browsers en nieuwere devices maar de weergave in oudere versies van IE is stukken minder, vaak onscherp. Typekit van Adobe is een prima alternatief met zeer mooie fonts.

    Reageren
    • Lianne Soer zegt:
      28 jan, 2013 om 10:15

      Dankjewel voor de tip!

  • Pascalle zegt:
    28 jan, 2013 om 10:15

    Leuk artikel. Ik ben ook erg benieuwd naar tips rondom SEO “complete website” versus “mobiele website”. Heb je hier ook tips of interessante informatie over?

    Reageren
    • Lianne Soer zegt:
      28 jan, 2013 om 10:23

      Op dit moment niet met die insteek, maar wel een goed idee als onderwerp voor een artikel :-).

  • Boudewijn zegt:
    31 jan, 2013 om 23:03

    Duidelijk artikel.
    Waarom heeft karelgeenen.nl nog geen mobiele versie?
    Ik typ dit met een Galaxy S3, scherm is behoorlijk groot toch is deze website een beetje onoverzichtelijk.

    Reageren
    • Lianne Soer zegt:
      01 feb, 2013 om 10:24

      Hoi Boudewijn, dankjewel voor je reactie.
      Vanaf maandag start stagiair Erwin, hij gaat Karelgeenen.nl responsive maken ;-).

  • echte naam of pseudoniem aub zegt:
    07 feb, 2013 om 12:01

    Interessante artikel, een mobiele website is een goede aanvulling op je huidige website.

    Edit: geen zoekwoorden in naamveld aub

    Reageren
    • Lianne Soer zegt:
      07 feb, 2013 om 12:04

      Dankjewel ;-)

Reageren