Category: Gouden Tips & To Do’s voor een Succesvolle Website

  • Prachtige combinaties van Google fonts

    Fonts

    Fonts in je website. Vroeger kon je alleen ‘websafe’ fonts (=lettertypes) gebruiken: fonts die iedereen op z’n computer had staan. Sáái, want altijd hetzelfde en niet altijd zo mooi.
    Of je moest een custom font uploaden naar je website. Dat kostte tijd en soms geld en was onhandig voor de leek.

    Tegenwoordig is het anders. Met Google fonts kan nu iedereen in zijn/haar website gebruikmaken van een veelheid aan lettertypes. Hoera!

    Design

    Hoera? De designer duikt misschien wel in elkaar van afschuw: met zo veel opties komen minstens zo vele ongelukkige keuzes. Welk lettertype je kiest en hoe je verschillende lettertypes met elkaar combineert, heeft enorm veel invloed op het karakter van je site. Daar zit een hele wetenschap achter. De psychologie van beeldtaal is een enorm interessant en uitgebreid vakgebied.

    Hulp

    Gelukkig wordt de leek (of tijdbesparende prof) geholpen door designers die graag hun kennis delen. En soms maakt iemand zó iets moois, met zó veel liefde en toewijding, dat ik hem of haar wel kan knuffelen.

    Dat is het geval bij deze blogpost van Lou Levit. Er zijn veel artikelen te vinden met mooie suggesties voor fontpairings (lettertypecombinaties), maar deze dame heeft er wel heel erg haar best op gedaan. Zo heeft ze niet alleen een lijst van 50 mooie combinaties van Googlefonts gemaakt, maar deze ook in de context geplaatst van interessante tekstquotes over design én kleurkeuzes tegen de achtergrond van vrij beschikbare kunst van het Rijksmuseum. Daar neem ik mijn hoedje voor af.

    Hoe te gebruiken?

    Als je, zoals veel van mijn klanten, Avada gebruikt (of een ander theme dat Googlefonts geïntegreerd heeft, bekijk hier een lijst met kandidaten), is het heel simpel: ga in je thema-opties naar de sectie met typografie (Avada: Avada, Theme options, Typography) en kies daar de juiste fonts voor body (de broodtekst; het ‘normale’ lettertype) en headers (de koppen).

    Heb je dat niet, dan zul je een paar regels code in je site moeten verwerken. Selecteer in dat geval het juiste lettertype in Google fonts en volg de aanwijzingen. De twee genoemde locaties (<head> en CSS) zijn in de meeste thema’s tegenwoordig makkelijk toegankelijk gemaakt met een apart venster in de theme options.

    Gaat het je toch boven de pet, neem dan contact op met je webbouwer.

    Reliable PDF Ultimate Google font pairings

    Bekijk de prachtige combinaties van Googlefonts hier: Reliable PSD Ultimate Google font pairings. Je kunt er ook lezen over haar afwegingen en de post in één keer als pdf downloaden, als je dat handig vindt.

     

  • Gáán met die banaan!

    Volgens Seth Godin zijn de meeste mensen online net gorilla’s: ze komen ergens nieuw binnen en alles wat ze denken, is: waar is die banaan?

    Aartjan van Erkel legt het in zijn boek Verleiden op Internet ook uit: “Internetgebruikers komen met een concreet doel naar je site en zien bij aankomst op je homepage graag direct waar ze moeten beginnen.”

    Hoe help je je bezoekers snel de volgende stap te zetten? Dat lees je hieronder.

    Dit artikel is deel 2 in de serie 10 gouden tips & to do’s voor een succesvolle website.

    Tip #2: Maak één heldere, opvallende Call to Action

    Een call to action vertelt je bezoekers in heldere taal en in opvallend beeld wat de volgende actie is.

    Internetters zijn klik-graag en willen graag weten hoe ze het snelste krijgen wat ze zoeken. Als jij de leiding neemt op jouw website, creëer je een prettige ervaring voor je bezoekers. Daar kan bijna geen verkoopargument tegenop!

    (Waarschijnlijk kunnen bezoekers ook nog steeds allerlei andere dingen doen op je pagina. Die krijgen ook aandacht, maar géén banaan. Denk maar eens aan een site vol opvallende knoppen: waar moet je nou heen?)

    To do (4 stappen)

      1. Wat
        Stel jezelf de volgende vraag:

        Wat is het allerbelangrijkste dat mensen kunnen doen als ze op mijn website komen?Het antwoord kan verschillen per periode of fase van je onderneming. Een paar voorbeelden:

        • Zich inschrijven voor je nieuwsbrief
        • Contact opnemen
        • De vacatures doorbladeren
        • Je bedijfsvideo bekijken
        • Een account aanmaken
        • Je product kopen

        Denk hier goed over na: wil je informeren, enthousiasmeren, engageren, een telefoongesprek voeren of direct verkopen?

        Heb je een eenduidig product en is de aankoopdrempel laag, dan kun je meteen tot de koop verleiden. Maar vaak willen mensen wat langer nadenken voordat ze tot een (grote) aankoop overgaan. Hebben ze een paar keer nodig om te snuffelen, je website te bezoeken. In dat geval zul je eerder kiezen voor -bijvoorbeeld- een nieuwsbriefinschrijving.

        De website Liveyourlegend.net heeft een heel duidelijke call to action. Je ogen worden direct getrokken naar de blauwe box met een krachtige boodschap er in: schrijf je in. Dan een opvallende rode knop: Let’s do this!

      2. Waarom (Dit is de magic)
        Vraag je vervolgens af:

        What’s in it for them?Waarom zou jouw bezoeker op jouw knop klikken? Hier maak je het verschil tussen een banaan waarop wordt geklikt en eentje die geen aandacht krijgt. Verplaats je in je bezoeker: wat levert de actie haar op? Zorg dat je echt waarde toevoegt, kennis deelt, iets waardevols biedt. Start met delen. Weer een paar voorbeelden:

        • Zich inschrijven voor je nieuwsbrief > Ontvang wekelijks tips over gezond eten
        • Contact opnemen > Een gratis intakegesprek
        • De vacatures doorbladeren > Vind jouw droombaan bij ons in het team
        • Je bedijfsvideo bekijken > Ontdek hoe fijn het is met ons te werken
        • Een account aanmaken > Krijg toegang tot alle features
        • Je product kopen > Niet meer nadenken: het leukste babycadeautje morgen thuisbezorgd

        Op Socialbusinesskees.nl zie je ook een goed voorbeeld van een call to action die je precies vertelt wat je krijgt als je er op klikt: een gratis quickscan én socialmedia-advies. De knop is lekker groot, heeft een knalkleur en is (onder de fotoslider) niet te missen.

        En bedenk maar eens: waar klik je liever op? Een knop die zegt “Aanmelden” of een knop die zegt “Gratis quickscan van je social media?”

      3. Waar
        Zorg dat de knop op een opvallende plek staat, zelf een opvallend uiterlijk heeft en heldere taal spreekt over wat ik kan verwachten. Voeg ten slotte een kort prikkelend zinnetje, iets leuks of vrolijks of geruststellends toe.

     

      1. Hoe (voor handige zelfdoeners)
        Heb je een WordPress-website met een modern thema, dan kun je waarschijnlijk knoppen (buttons) invoegen via zogenaamde [fusion_builder_container hundred_percent=”yes” overflow=”visible”][fusion_builder_row][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”][shortcodes] in de wysiwyg-editor.

        Ben je handig met je website en weet je zelf waar je html en css kunt invoegen, dan is dit een geweldige tool: http://onlinehtmltools.com/button-genaretor/ (sic). Je kunt er zelf een knop helemaal op maat maken, zelfs aanpassen hoe de knop eruitziet als je er met je muis over beweegt (hover) en er op klikt (press)!html: heb je een WordPress-website en wil je de knop van in een pagina of bericht zetten, kies dan in het bewerkingsscherm voor het tabje tekst (naast wysiwyg). Hier kun je de html-code plakken.

        Heb je een WordPress-website en wil je de knop in een widget in je zijbalk zetten, ga dan naar Weergave, Widgets. Kies de zijbalk (sidebar) waar de widget moet komen en sleep daar een Tekst-widget naartoe. Plak hierin de html-code.

    css: de css-code (de opmaak) zet je in het sylesheet van je theme: ga naar Weergave, Bewerker en plak de css-code onderin style.css.
    Natuurlijk kun je ook je webbouwer vragen om een banaan op maat voor jou te maken. Als je webbouwer thuis is in online marketing zal hij/zij ook met je mee kunnen denken in wat de juiste call to action is op iedere pagina.

    En nu gáán! Succes ;)[/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]

  • Liefde op het eerste gezicht

    Een website bezoeken is een beetje als speeddaten. Het eerste wat bezoekers willen weten is: zit ik hier goed? Het is dus belangrijk om in die eerste seconden meteen de juiste indruk te maken. Eigenlijk wil je dat alles in mij “Jaaaaa!” roept tegen jou.

    Tip #1: Maak een heldere tagline

    Dit artikel is deel 1 in de serie gouden tips & to do’s voor een succesvolle website. Schrijf je hier in.

    Een tagline is een samenvatting van je dienst in enkele woorden. Hij vertelt me wat ik kan verwachten en waarom ik voor jou zou kiezen. Een voorbeeld van een sterke tagline:

    Citysessies – Snel en makkelijk ‘n goede fotograaf vinden

    Deze tagline vertelt mij precies wat ik op de site kan doen: een fotograaf vinden. En waarom zou ik voor CitySessies kiezen? Het gaat snel en makkelijk én hun fotografen zijn goed. Ik ben om. Als ik een fotograaf zoek, is dit precies wat ik nodig heb.

    To Do

    Schrijf een tagline die voldoet aan de volgende kenmerken:

    • Kort
      Gebruik enkele kernachtige woorden.
    • Helder
      Wees niet wollig: zeg bijvoorbeeld wel “Online financieel advies voor starters” en niet “Onze diensten zijn uw oplossingen”.
    • Eerlijk
      Ben je écht de grootste en goedkoopste? Gebruik die termen alleen als ze controleerbaar en geloofwaardig zijn. Anders heb je meteen een minnetje voor betrouwbaarheid.
    • Onderscheidend
      Vertel waar jij je in onderscheidt: snel, persoonlijk, lokaal, origineel, expertise, …

    Zorg dat de tagline meteen opvalt, op iedere pagina terugkomt (net als je logo) en prettig oogt:

    • Goed leesbaar
      Gebruik een goed leesbaar lettertype in een passende kleur. Goede fonts kun je vinden op google.com/fonts. Bovenin bij Preview text kun je in de dropdown kiezen voor [fusion_builder_container hundred_percent=”yes” overflow=”visible”][fusion_builder_row][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”][Enter your own text]. Daar typ je je eigen tagline. Je ziet dan alle fontvoorbeelden in je eigen woorden en krijgt meteen gevoel of het ‘klopt’. Gebruik géén blokletters, dat is schreeuwerig.
    • Onder of naast je logo, bovenaan je website
      Je tagline en logo gaan samen. Zorg dat ze op de plek staan waar mensen het eerst kijken en waar je ze verwacht: bovenaan je website.
    • In geschreven tekst, dus niet in een plaatje verwerkt
      Voor zoekmachinerobots is tekst in een plaatje niet leesbaar. Heb je een WordPress-website, ga dan naar Instellingen, Algemeen en vul daar bij Tagline jouw tagline in. Misschien verschijnt die tekst nu direct op je website. Zo niet, vraag dan je webbouwer om dat voor je te doen.

    Een heldere tagline die in het oogt springt, zorgt ervoor dat je bezoekers direct hun hart voor je openen. Als dat goed zit, kan de rest van het verleidingsspel beginnen. Volg ook de andere tips…

    Zet nu de eerste stap! Deel jouw tagline hieronder in de reacties.

    Dit artikel is deel 1 in de serie gouden tips & to do’s voor een succesvolle website.[/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]