Ondanks de overvloed kan een nieuwsbrief nog steeds een krachtig communicatiemiddel zijn. Sinds de strengere spamwetgeving, heeft de ontvanger aangegeven geinteresseerd te zijn en heeft zich voor je nieuwsbrief opgegeven. Toch moet je nieuwsbrief je ontvanger steeds weer weten te boeien.Hij beslist in een paar seconden of hij je nieuwsbrief opent…
De ontvanger bekijkt je nieuwsbrief in een paar stappen:
Hij bekijkt de kop met afzender & onderwerp.
Hij ziet het preview deel in zijn mailprogramma, vaak met titel en logo
Hij ziet de complete content van de nieuwsbrief met boodschap, pay off en footer
Deze 3 stappen moeten in een razend tempo antwoord geven op 3 vragen:
Van wie is dit bericht?
Wat is voor mij belangrijk?
Wat wil je dat ik doe?
Tips voor de kop
Zorg dat meteen te zien is wie de afzender is. Zorg dat je bedrijfsnaam in het afzenderveld staat.
Vertel kort en duidelijk waar je mail over gaat en waarom er verder gelezen moet worden. De eerste 3 woorden zijn cruciaal. Plaats hierin de aanbieding, vraag of teaser.
De onderwerpregel is een van de belangrijkste punten van de nieuwsbrief.
De pre header (= de tekst in de eerste regel vd mailinhoud)
Verdeel de pre header in 2 delen: Linkerkant inhoudelijk om de boodschap over te brengen; kort en bondig! En de call for action al te vermelden. Als de call for action een link is, onderstreep deze dan. Gebruik de rechterkant om kort te verwijzen naar de online versie. De boodschap moet opvallen en uitnodigen verder te lezen.
Het leesvenster
Veel mailboxen hebben een leesvenster, dit venster toont een deel van de mailinhoud zonder dat deze geopend is. De grootte scheelt per gebruiker en per mailprogramma. Plaats de belangrijkste call to action in de eerste 10 cm van de linkerbovenhoek. Verder zijn vaak de afbeeldingen in een mailprogramma geblokkeerd, denk eraan dat je mail ook zonder afbeeldingen aantrekkelijk is.
Footer
Laat nogmaals duidelijk weten wie de afzender is. En zorg ervoor dat de ontvanger zich makkelijk kan afmelden voor de nieuwsbrief via een ‘unsubscribe’ link.
Geschreven door Inge Van der Borght in de categorie: Webcontent, Websmart
Kinderen van 10, 12 jaar oud vinden steeds vaker hun weg op Facebook. Steeds meer ouders staan toe dat hun kind een facebook-account heeft. Zo worden kinderen steeds jonger online actief. Dit zijn geen zorgwekkende ontwikkelingen. We moeten ons, als ouder, bewust zijn van deze ontwikkelingen en deze betrekken in de opvoeding naar de kinderen toe.
De meeste ouders zijn zelf ook actief op sociale netwerksites. 90 % van de duizend ondervraagden in een Amerikaans onderzoek van Columbia University New York, geeft aan regelmatig op Facebook te vertoeven. Slechts 3% is actief op Twitter.
De tijd die jongeren op internet besteedt neemt nog steeds toe, hoewel er wel geluiden opgaan dat we ook bewuster gaan kiezen wanneer we wel/niet online actief willen zijn. Hip is om een infobatical te nemen, pas op de plaats wat betreft social media en aandacht voor de fysieke mensen om ons heen. http://www.youtube.com/watch?v=FwXcgg4LgXs
Geschreven door Inge Van der Borght in de categorie: Algemeen, Websmart
De makers van A List Apart geven sinds korte tijd ook boeken uit. Deze boeken zijn gericht op webdesigners, en worden gekenmerkt door de beperkte lengte (het eerste boek is 85 pagina’s lang). Ze zijn geschreven door experts op hun gebied, het eerste boek “HTML5 for Web Designers” is geschreven door Jeremy Keith. Inmiddels zijn er nog twee boeken bij gekomen: CSS3 for Web Designers (door Dan Cederholm) en The Elements of Content Strategy (door Erin Kissane). Van het nieuwste boek is een klein stuk te lezen: “A Checklist for content work“.
Sinds kort kun je in Google zoeken naar recepten. Nou ja, dat kon natuurlijk altijd al, maar nu krijg je meer opties: je kunt zoeken op bereidingstijd, ingrediënten uitsluiten of alleen vegetarische gerechten selecteren. Hiervoor heeft google meer informatie nodig dan bij normale zoekresultaten. Een pagina met een recept kan bijvoorbeeld op verschillende plekken de ingrediënten weergeven, en welk plaatje is nu een afbeelding van het gerecht?
HTML biedt geen ondersteuning voor zo specifieke informatie, dus dit moet ergens anders vandaan komen. Hiervoor zijn zogenaamde ‘microformats‘ bedacht (niet door Google trouwens). Door aan de normale structuur van een pagina bepaalde (vooraf bepaalde) classes toe te voegen kun je extra informatie aan deze inhoud meegeven. Zo zijn er microformats voor adresgegevens (hCard, gebaseerd op de standaard voor contact-informatie), kalender-informatie (hCalendar) en dus ook recepten (hRecipe). Deze extra informatie kan door bijvoorbeeld Google worden opgepikt om gebruikt te worden in zoekresultaten. Browsers kunnen kalender-items in een pagina herkennen en aanbieden deze direct te importeren in de agenda van een bezoeker.
Een recept heeft een min of meer vaste structuur, er is een ingrediëntenlijst, een bereidwijze, vaak een afbeelding van het resultaat, voor hoeveel personen het is bedoeld, en misschien zelfs informatie over voedingswaarde. Door dit in de structuur van de pagina op te geven kan Google bepalen waar de ingrediënten staan, en zo selecties op zoekresultaten uitvoeren.
Een voorbeeld daarvan: Spaghetti bij Google. Voor meer informatie wat Google nu precies doet: Informatie over Google Recipe View Door gebruik te maken van microformats geef je duidelijker aan wat voor inhoud je beschikbaar hebt, en maak je het gemakkelijker gevonden te worden.
Geschreven door Joost van der Borg in de categorie: Webcontent
Eerder bespraken we nieuwe input-types in HTML5 en hoe je placeholders voor tekst toevoegt. Daarnaast is in de specificatie ook voorzien in de mogelijkheid formulieren te laten valideren door de browser.
Om deze mogelijkheid aan te zetten hoef je niets te doen, de nieuwe input-types kunnen automatisch worden gecontroleerd. Zo zal een <input type="email"> vanzelf worden gecontroleerd als e-mail adres (waarin de + gewoon geldig is, backend-programmeurs van Nederland!). Als gebruik wordt gemaakt van een <input type="number"> met een max-waarde zal een hogere waarde vanzelf worden afgekeurd.
Helaas, op deze mogelijkheden kunnen we nog niet vertrouwen: Opera heeft een deel van deze validatie ingebouwd, en geeft netjes aan wat er mis is. Safari valideert wel, maar geeft geen enkele feedback. Het wordt simpelweg onmogelijk een formulier te submitten met ongeldige waarden. Vanaf Firefox 4 zal deze browser support hebben voor deze vorm van validatie, hoe goed deze zal zijn is mij nog onbekend. Overigens: Het zal nooit mogelijk zijn op browservalidatie alleen te vertrouwen, goede server-side validatie blijft onmisbaar, maar op termijn kunnen javascript-oplossingen achterwege worden gelaten.
Een laatste tip: Wil je géén validatie op een bepaalde input? Geef dan het attribuut novalidate mee. Het hele formulier niet valideren, geef dan <form novalidate> mee. Heb je meer handige formulier-validatietips? Ik hoor het graag.
Geschreven door Joost van der Borg in de categorie: Webdesign
Eerder besprak ik de toevoeging van verschillende input-types in HTML5. Een andere nuttige uitbreiding op het <input>-element is het placeholder-attribuut. Hiermee kun je eenvoudig een tijdelijke tekst in een input-veld plaatsen om aan te geven wat je hier verwacht. In browsers die dit ondersteunen wordt de tekst weergegeven (lichter dan echte content) tot het veld de focus krijgt. Als het element leegblijft, of opnieuw leeg is komt de placeholder-tekst terug. In safari ziet dit er zo uit:
Het placeholder-attribuut wordt momenteel ondersteunt in Safari, Chrome, Opera en binnenkort ook in Firefox. Internet Explorer heeft helaas nog geen ondersteuning. Browsers die het attribuut niet begrijpen negeren het gewoon, dus het kan zonder risico worden gebruikt. Is de placeholder essentieel, dan kan gebruik worden gemaakt van technieken om het gedrag hiervan te kopiëren. Ik heb vaak gebruik gemaakt van de techniek die wordt besproken in ‘Making compact forms more accessible’ op A List Apart. Ook zijn er vele jQuery-plugins voor placeholders te vinden, die in sommige gevallen de content van het placeholder-attribuut gebruiken om een ‘nep’-placeholder te plaatsen.
Het is met dit attribuut een kleine moeite geworden een extra hint te geven aan de gebruiker van je formulieren. Als je goede voorbeelden van het gebruik van deze techniek ‘in het wild’ kent, hoor ik er graag van.
Geschreven door Joost van der Borg in de categorie: Webdesign
Eén van de nu al bruikbare toevoegingen aan HTML5 is een uitbreiding aan de input-types die beschikbaar zijn in formulieren. Uiteindelijk is het de bedoeling dat hierdoor browsers slimmer kunnen omgaan met gegeven informatie. Zo wordt bijvoorbeeld formulier-validatie zonder javascript mogelijk. Een paar handige input-types die nu het gebruik van mobiele browsers gemakkelijker maken zijn de volgende: <input type="tel" name="telefoon" >
Hiermee geef je aan dat als invoer een telefoonnummer verwacht wordt. Als je dit element gaat invullen op bijvoorbeeld een iPhone, krijg je een numeriek keypad in plaats van het uitgebreide keyboard. Zo is het invoeren van een telefoonnummer een stuk gemakkelijker. Dit ziet er ongeveer uit zoals in de afbeelding. Hetzelfde geldt voor ‘number’, waarmee je een numerieke waarde kunt ingeven: <input type="number" name="leeftijd" >
Met de volgende krijg je een aangepast keyboard voor e-mail en website-adressen: <input type="url" name="siteadres" > <input type="email" name="email" >
Ook zijn er input-types voor datums, tijden en zoekvelden. De hele lijst is in de specificatie te vinden. Browsers die deze types niet ondersteunen interpreteren het gewoon als type ‘text’, en zullen zonder problemen de juiste waarden doorgeven.
Geschreven door Joost van der Borg in de categorie: Algemeen, Webdesign
Het lijkt een trend te zijn: Sites die niet krampachtig proberen geen content onder ‘the fold’ te zetten, maar het (verticaal) scrollen omarmen en onderdeel van de site maken. Enige tijd geleden kwam de teaser-site voor ‘Ben the Bodyguard‘ uit, een (nog niet gelanceerde) iPhone app. Al naar beneden scrollende vertelt Ben over de gevaren van niet-beschermde data, terwijl het scrollen van de gebruiker kleine animaties activeert.
Een paar dagen terug kwam Nike met ‘Nike Better World‘, waarin het van Silverback bekende parallax-effect verticaal wordt toegepast, waardoor deze site ook een andere ervaring wordt dan anders gedacht. Ook mooi om de overgangen tussen de verschillende secties te zien, en hoe de verticale navigatie wordt weergegeven aan de rechterkant.
Vandaag kwam ik ‘A guide to the open internet‘ tegen, een site die wel heel duidelijk maakt wat er (onder andere) op het spel staat als het gaat over Net Neutrality. Hier wordt de verticale scroll gebruikt om het punt te maken, en zoals bij Ben the Bodyguard wordt de positie van de gebruiker in de site gebruikt om toelichtingen te plaatsen.
Tot slot net wat anders, een manier om een stripverhaal weer te geven, zonder verschillende pagina’s te gebruiken. Het eerste deel van ‘the Wormworld Saga‘ is een door Daniel Lieske in zijn vrije tijd geschreven strip/graphic novel, waarin de verticale scroll ook niet bepaald geschuwd wordt.
Geschreven door Joost van der Borg in de categorie: Algemeen
Peter-Paul Koch geeft een overzicht van de stand van zaken op het gebied van browsers op mobiel. Een overzicht met browsers waar je nog nooit van hebt gehoord, een poging het marktaandeel van elke browser inzichtelijk te maken en adviezen hoe te testen of je sites geschikt zijn voor mobiel gebruik.
Geschreven door Joost van der Borg in de categorie: Webdesign
Tips voor de kop
