Wat is responsive design?

Deze week was het weer raak. Van 3 gerespecteerde, grote partijen kreeg ik een briefing binnen met daarin een uitgebreide projectomschrijving en een programma van eisen. Eén van de eisen was dat de website responsive moest zijn. Dat was het, verder geen toelichting of uitleg. Voor mij is het dan gissen wat men nu echt wil. De definitie van responsive design kan redelijk eenvoudig zijn: Een website die zich aanpast op de gebruiker. De praktijk is echter weerbarstiger. Wat past zich namelijk aan en waarop? Noem je een website die meeschaalt ook al responsive en is een App ook een vorm van responsive design? Ethan Marcotte, een belangrijk auteur over dit onderwerp, definieert responsive design aan de hand van een aantal technische specificaties:

• Identificatie. De website beschikt over de mogelijkheid om de bezoeker en haar technische gegevens te identificeren.
• Flexibele media: Het maakt niet uit met wat of in welke resolutie je een website bekijkt, de afbeeldingen moeten meeschalen.
• Flexibele grafische structuur: Grafische elementen en de structuur van de website passen zich aan. Dit kan bijvoorbeeld in de praktijk betekenen dat bij een grote resolutie de website te zien is in 3 kolommen en bij een kleine resolutie in 2 kolommen.

Persoonlijk vind ik dat aan de hand van bovenstaande definitie het begrip responsive design al een stuk duidelijker wordt gedefinieerd. Er blijft echter genoeg ruimte over om verwarring te creëren. Soms wordt namelijk ook verwacht dat bepaalde content in kleine resoluties achterwege blijft of dat een menustructuur eenvoudiger wordt gemaakt. Mijn tip zou daarom zijn om altijd duidelijk te communiceren naar de ontwikkelaar wat jouw verwachtingen zijn van responsive design.

Waarom responsive design?

Hoewel ik soms sceptisch ben over hoe mensen het begrip responsive design hanteren ben ik wel voorstander van het gebruik van responsive design. Dit past namelijk naadloos bij de visie van Pronamic: Mensen optimaal van het web laten genieten. De tijd dat mensen alleen via een computer een website bekeken is definitief verleden tijd. De helft van de Nederlanders beschikt momenteel over mobiel internet. Daarnaast zal het gebruik van internet via tablets, de TV of notebooks alleen maar toenemen de komende jaren. Een goede website moet op deze ontwikkelingen voorbereid zijn.

Hoe maak ik een responsive design?

Deze vraag is eenvoudig te beantwoorden, het enige wat je moet doen is contact opnemen met Pronamic. Wij kennen de technische vereisten om een website responsive te maken. Dat is echter niet het enige wat je moet doen. Een website responsive maken betekent vaak ook bij kleine resoluties dat je keuzes moet maken. Wat vind ik belangrijk en welke content wil ik de bezoeker per se laten zien? Stel een aantal taken op die volgens jou de bezoeker, die via dat platform binnenkomt, moet kunnen voltooien. Richt daar je website op in en laat vervolgens onnodige tekst en menu items weg. Een dergelijk ontwerpproces wordt ook wel ontwerpen vanuit de content genoemd.

Nog meer willen weten over responsive design?

De ontwikkelingen op het gebied van responsive design volgen elkaar snel op en Pronamic kan er nog veel meer over vertellen. Nieuwsgierig? Neem dan vrijblijvend contact op en wij praten je graag bij.

 Basis functionaliteiten WooCommerce

• Rapportages
  WooCommerce beschikt over duidelijke rapportages. Zo kan je eenvoudig de verkopen per dag en verkopen per maand bekijken maar heb je ook de mogelijkheid om een overzicht van de best verkochte producten te genereren. Uiteraard is de totale omzet, het totaal aantal bestellingen en het gemiddelde bestelbedrag ook volledig inzichtelijk. Ik mis standaard wel een functie om deze gegevens te exporteren. Met een speciale extensie kan je wel je bestellingen exporteren.
• Verschillende product typen
  Met WooCommerce kan je alle mogelijke producten verkopen. Niet alleen fysieke producten maar ook digitale. Zo heb je de mogelijkheid om downloadbare, virtuele, affiliate, variabele en gegroepeerde producten aan te maken.
• Attributen
  Attributen zijn kort samengevat producteigenschappen of productkenmerken. Een attributenset bevat een verzameling van deze kenmerken. Attributen zijn de krachtige basis van een webwinkel en bieden bijvoorbeeld functies om te kunnen filteren en verschillende prijzen te hanteren. Je kan zelf attributensets aanmaken en vervolgens aan een product de desgewenste kenmerken koppelen. Kleur, maat, materiaal en soort zijn bijvoorbeeld veel gebruikte attributensets. Binnen WooCommerce kan je standaard eenvoudig filteren op de attributen. Zo kan je bijvoorbeeld met 1 klik alle producten van de kleur blauw tonen. Naast deze filterfuncties kan je attributen ook gebruiken voor een variabel product. Zo kan je een product van een groter formaat een hogere prijs meegeven.
• Product catalogus
  De product catalogus is logischerwijs de basis van WooCommerce. De productcatalogus bevat de producten en kunnen onderverdeeld worden in categorieën en subcategorieën.
• Voorraadbeheer
  WooCommerce biedt een beperkte voorraadbeheer functie. Zo kan je notificaties krijgen bij producten die bijna niet meer in voorraad zijn of in z’n geheel niet meer op voorraad zijn. Je kan er voor kiezen om producten die niet meer in voorraad zijn uit te sluiten van de catalogus.
• BTW
  Uiteraard kan je BTW regels instellen. Je kan voor verschillende landen eigen belastingtarieven toevoegen. Je kan zelf aangeven of je bijvoorbeeld de belasting tarieven op de winkelwagen pagina wilt tonen of niet. Je kan de catalogus prijzen inclusief of exclusief BTW tonen.
• Verzendmethoden
  Binnen WooCommerce kan je eenvoudig verschillende verzendmethoden toevoegen. Standaard kan je al gebruik maken van gratis verzending, lokale verzending, vast tarief, internationale verzending of afhalen. Door middel van add-ons kan je dit eenvoudig uitbreiden. Je hebt uiteraard de mogelijkheid om bepaalde verzendmethoden alleen in te schakelen bij bepaalde landen. Ook kan je de verzendkosten baseren op bijvoorbeeld een percentage van het totaal bedrag.
• Betaalmethoden
  WooCommerce heeft standaard al een aantal betaalmethoden beschikbaar. Dit is vervolgens door middel van add-ons eenvoudig uit te breiden. De volgorde van de weergave van de betaalmethoden kan je door middel van drag en drop eenvoudig wijzigen. Met behulp van de Pronamic iDEAL plugin kan je betalen met iDEAL mogelijk maken. Ook biedt deze plugin ondersteuning voor OmniKassa.
• Coupons
  Door middel van coupons kan je korting op producten of de winkelwagen geven. Je kan een vaste korting geven maar dit ook procentueel laten gelden. Ook is er de optie om gratis verzending mogelijk te maken na het gebruik van van een coupon. Uiteraard is er de optie om de coupon geldig te maken bij een minimum bedrag, kan je producten en product categorieën uitsluiten, behoort een gebruikslimiet tot de mogelijkheden en kan een vervaldatum ingesteld worden. Ik mis nog wel een optie om bijvoorbeeld een gratis product aan de winkelwagen toe te voegen bij het gebruiken van een coupon.
• Accounts
  Bezoekers kunnen een account aanmaken waar je je adresgegevens kunt beheren. Ook vind je hier een overzicht van de bestellingen die je geplaatst hebt.

Er is meer…

Naast deze basis functionaliteiten biedt WooCommerce natuurlijk nog veel meer mogelijkheden:

• Beoordeel producten
  WooCommerce heeft standaard een optie om producten te beoordelen. Je kan een product niet alleen een rating geven maar ook een review over het product schrijven.
• Gelaagde navigatie
  De gelaagde navigatie kan je zien als een filter. Een krachtige basis die als navigatie gebruikt kan worden. Een onmisbare functionaliteit voor een succesvolle webwinkel.
• Prijsfilter
  In lijn met de gelaagde navigatie heeft WooCommerce standaard een prijsfilter toegevoegd.
• Product tags
  Tags zijn een standaard functionaliteit van WordPress en zijn uiteraard ook een krachtig middel om producten te categoriseren.
• Zoekfunctie
  De zoekfunctie van WooCommerce is eenvoudig en doet wat het moet doen. Vinden!
• Upsells en Cross sells
  Upsells en cross sells zijn ideaal om je verkoop te verhogen. Uiteraard biedt WooCommerce deze opties.

Weergave functionaliteiten

Al met al een erg krachtig e-commerce platform waarmee je een succesvolle e-commerce business kunt lanceren. Het grootste gemis van WooCommerce is dat het geen administratie functies bevat en je minder eenvoudig een multisite omgeving neer kunt zetten. Of dit je moet weerhouden om WooCommerce te gebruiken is echter de vraag. Voldoet dit pakket aan je wensen en eisen? Neem eens contact met ons op en wij bespreken graag de mogelijkheden. Ik hoop dat deze blog je in ieder geval helpt in de keus van welk e-commerce pakket je moet kiezen.

In veel gevallen is dit voldoende maar ik zie ook regelmatig berichten voorbij komen van gebruikers die een e-mail niet hebben ontvangen. Dit valt alleen niet te controleren. Hoe kun je controleren of een e-mail wel aankomt bij de gebruiker? Maak gebruik van een externe dienst als PostMark, SendGrid of Mandrill. In dit artikel neem ik de laatst genoemde als voorbeeld.

Ik ben als vrijwilliger betrokken bij het tienerweekend Square. Voor dit weekend moeten deelnemers zich opgeven via de website. Wanneer iemand zich opgeeft krijgt de administratie en de deelnemer een bevestiging hiervan. Het is dus belangrijk dat deze e-mails ook daadwerkelijk aankomen bij de ontvangers. Hiervoor heb ik gebruik gemaakt van Mandrill. Bijkomend voordeel van deze dienst is dat ik kan zien of een e-mail is aangekomen en of de ontvanger op een linkje in de mail heeft geklikt.
Mandrill is een dienst van email-marketing bedrijf MailChimp. Met meer dan 1.000.000 klanten een grote en betrouwbare partij. MailChimp richtte zich tot voor kort enkel op het versturen van email-nieuwsbrieven, maar onlangs is daar Mandrill bij gekomen.

Voordelen van een externe e-maildienst

Er zijn drie specifieke redenen te noemen waarom je gebruik zou moeten maken van een externe e-maildienst:

• Ten eerste zijn de servers van deze partijen er speciaal op gericht om e-mails te versturen;
• Ten tweede hoef jij er niet voor te zorgen dat jouw e-mailserver wel online is of goed werkt;
• Ten derde geven deze diensten duidelijk statistieken over de verzonden, ontvangen en de doorkliks per e-mail.

WordPress in combinatie met Mandrill

Wil je gebruik maken van Mandrill dan moet je eerst een account bij hen aanmaken en bewijzen dat jij eigenaar bent van het domein van waaruit je wilt gaan mailen. Vervolgens zijn er twee manieren om Mandrill met WordPress te combineren:

1. Via SMTP instellingen;
2. Via de Mandrill API.

Om gebruik te maken van de SMTP instellingen wil ik je adviseren om de WP mail SMTP plugin te installeren en vervolgens de instructies van Mandrill te volgen.

Wil je gebruik maken van de Mandrill API dan raad ik de WPMandrill plugin voor WordPress aan. Je hoeft hiervoor enkel een API sleutel voor aan te maken en deze in te voeren bij de instellingen van de plugin. Voordeel van deze plugin is ook dat je de statistieken vanuit Mandrill direct in jouw WordPress omgeving kunt bekijken.

Instellen van DKIM en SPF

Om de externe e-maildienst, in dit geval Mandrill, nog beter aan te laten sluiten bij jouw website kun je twee DNS instellingen wijzigen bij jouw server. Deze zogenaande DKIM en SPF records geven aan dat jouw website de afzender is van de e-mails. Dit verkleint de kans dat verzonden e-mails als SPAM worden gemarkeerd.

De bewuste gegevens van de DKIM en SPF records staan vaak duidelijk vermeld in jouw account van de betreffende e-maildienst.

Hulp nodig

Wil je meer informatie over dit onderwerp of hulp bij het instellen van een e-maildienst als Mandrill, SendGrid of PostMark, neem dan contact met ons op.

Pronamic heeft al diverse plugins ontwikkeld. Eén van die plugins betreft de Pronamic Google Maps plugin, een plugin die het mogelijk maakt om per WordPress bericht een locatie te definieren.

Deze plugin is aardig populair, wat heet, de plugin is inmiddels 50.000 keer gedownload en heeft een waardering van 4 sterren. Ook nationaal en internationaal krijgt deze plugin positieve recensies. Zo werd recent op Pixel Insert de plugin nog beschreven als: “Pronamic Google Maps plugin is the best WordPress plugin for Google Maps”.

Bijzonder gewaardeerd wordt de gedegen opzet, het gebruik maken van Google Maps API version 3, de shortcode en dat er geen extra tabellen worden gebruikt. Ook het feit dat de plugin werkt met custom post types is zeker een voordeel.

De plugin krijgt nog regelmatig een update of een uitbreiding. Benieuwd wat de mogelijkheden zijn of welke plannen wij nog hebben? Neem vrijblijvend contact met ons op.

De ontwikkelaars van ClassiPress zijn momenteel zelf ook bezig om de opzet van betaalmethoden in hun WordPress thema’s te verbeteren. In hun weblogbericht “Poll: Payment Gateways” is te lezen dat ze de betaalmethodes abstracter gaan opzetten zodat ze ook voor hun andere WordPress thema’s gaan functioneren. Naast het ClassiPress thema hebben ze namelijk ook andere WordPress thema’s ontwikkeld waarin betaalmethoden gebruikt worden:

• JobRoller
  WordPress thema voor het opzetten van een vacature website.
• Clipper
  WordPress thema voor het opzetten van een coupons website.
• Vantage
  WordPress thema voor het opzetten van een bedrijvenregister website.

We verwachten op korte termijn in samenwerking met AppThemes en de ClassiPress community de iDEAL betaalmethode verder te verbeteren en uit te breiden. Doordat AppThemes hun betaalmethoden abstracter gaan opzetten verwachten we dat de Pronamic iDEAL betaalmethode binnenkort voor alle AppThemes WordPress thema’s te gebruiken zijn.

1. Focus. Een algemeen probleem is dat teksten op een webpagina focus missen. Een probleem dat zich snel voordoet. Vaak vraagt een bezoeker om veel informatie of heb je in de loop van tijd teksten toegevoegd of gewijzigd. De focus is dan snel weg. Erg jammer omdat wanneer er een duidelijke boodschap of doel in de tekst aanwezig is, dit het rendement aanzienlijk zal verhogen. Maak daarom keuzes wat jij de bezoeker wilt vertellen en vertel alleen zaken die echt nodig zijn. Durf te schrappen en creëer focus.
2. Vertel het belangrijkste als eerste. Zeker wanneer je schrijft voor het web dan is het belangrijk dat je snel ter zake kunt komen. Bezoekers van een website scannen de website in een F-vorm. Wacht daarom niet te lang en vertel al in de eerste zin wat je wilt.
3. Houd het eenvoudig. Af en toe wordt er wat smalend gesproken en geschreven over het jip-en-janneke taalgebruik. Wat mij betreft is dat onterecht. Uit een onderzoek van Jakob Nielsen blijkt dat zowel hoog- als laaggeletterden eenvoudige teksten beter lezen en dat eenvoudige pagina’s sneller tot conversie leiden. Laat vaktermen daarom achterwege en maak zinnen niet te lang.
4. Schrijf in het heden. Je wilt nu tips over meer rendement voor webteksten. Besef dat bezoekers met een probleem zitten welke zo snel mogelijk opgelost moet worden. Communiceer daarom in het heden en draag direct een oplossing aan voor het probleem. Het liefst met een concrete actie.
5. Weet wie je doelgroep is. Als je weet wat je doel is, dan weet je ook je doelgroep. Pas daarop je boodschap aan. Op websites wordt vaak in wij-vorm en formeel gecommuniceerd terwijl de doelgroep bijvoorbeeld jong en jeugdig is. Een gemiste kans, je klant voelt zich minder aangesproken en zal minder snel actie ondernemen.

Succes met deze 5 tips. Straks wel goede goede teksten maar nog geen goede website? Neem dan eens contact met ons op. Pronamic helpt je graag aan een goede WordPress website.

Ik zal hieronder kort een aantal verbeteringen / uitbreidingen noemen:

• Shortcode voor het weergeven van een lijst van product categorieën.
• Verbeterde variaties paneel voor het beheren van product variaties.
• Wachtwoorden worden niet meer verstuurd in nieuwe klant account e-mailberichten.
• Ongebruikte tabs (beschrijving en reviews) worden niet meer getoond op de frontend.
• E-mail voettekst verbeterd voor weergave in Outlook.
• Mogelijkheid om per product variatie een uitgelichte afbeelding, downloadbaar en/of virtueel product te definieren.

Nederlandse WooCommerce webwinkel

In deze nieuwe versie van WooCommerce zijn ook weer een aantal nieuwe teksten toegevoegd die vertaald moesten worden. We hebben zojuist de WooCommerce (nl) vertaalplugin bijgewerkt met een actuele vertaling voor WooCommerce. In onderstaande tabel is een overzicht te zien van hoe de WooCommerce plugin zich ontwikkeld qua teksten en vertalingen:

Voor het vertalen van de teksten gebruiken we overigens verschillende websites om de teksten zo netjes mogelijk te vertalen:

• Google Translate
• MyMemory – Machine translation meets human translation
• GlotPress WordPress trunk (Dutch)
• Taaladvies.net

Deze websites geven goed advies over hoe bepaalde teksten vertaald kunnen worden. Zo geeft Google Translate niet een hele nette vertaling voor ‘fee‘, maar geeft MyMemory wel bruikbare resultaten voor ‘fee‘. Ook Taaladvies.net geeft bruikbaar advies voor bijvoorbeeld de vertaling van ‘in stock’, dit kan immers vertaald worden naar ‘in voorraad’ of naar ‘op voorraad’. Wij hebben in dit geval gekozen voor ‘in voorraad’ omdat dit gebruikelijker is in België.

OmniKassa voor WooCommerce

Voor WooCommerce gebruikers die de OmniKassa betaalmethode willen aanbieden in hun webwinkel hebben we ook goed nieuws. We hebben vrij recent de Pronamic iDEAL plugin uitgebreid met OmniKassa ondersteuning. Hierdoor kan nu zeer eenvoudig de OmniKasssa betaalmethode toegevoegd worden aan elke WooCommerce webwinkel. Daarnaast kan met met onze WordPress iDEAL plugin ook vrijwel alle andere iDEAL betaalmethoden gebruiken in combinatie met WooCommerce.

1. Schrijf tweets die nieuwsgierig maken

Twitter is een snel medium, gebruikers scannen tweets heel snel naar iets interessants. Schrijf je tweets daarom, net als krantenkoppen, in een nieuwsgierig makende vorm. Zo werd er 74 keer op de link in onderstaande tweet geklikt (gemiddeld is dat 10 à 15 kliks)

2. Gebruik sleutelwoorden en hashtags

Focus op het gebruik van keywords (of sleutelwoorden) en gebruik hashtags (zoals bijvoorbeeld #ecommerce). Gebruikers zijn op zoek naar goede informatie. Als zij dit niet in hun Twitter lijst vinden, zoeken ze vaak op sleutelwoorden, vaak met hashtag.

3. Tweet wanneer de meeste volgers online zijn

Willekeurige *kuch* buffer planning

Verspreid je boodschap wanneer je direct de meeste mensen kunt bereiken. Tools als SocialBro kunnen uitzoeken wanneer de meeste van jouw volgers online zijn. Plaats je tweet vervolgens op die momenten voor een zo groot mogelijk bereik. Een erg fijne dienst die hier handig op inspeelt is Buffer. Met Buffer kun je tweets plaatsen en automatisch op het juiste moment laten verspreiden.
Buffer heeft handige browser addons voor Chrome, Safari en Firefox maar ook een eigen iPhone app en uiteraard een WordPress plugin.

4. Schrijf tweets met 120 tot 130 karakters

Uit een studie van Dan Zarrella blijkt dat tweets met een lengte van 120 tot 130 karakters de hoogte click-rate hebben. Ook maken tweets van deze lengte het gebruikers makkelijker om te retweeten.

5. Plaats je link aan het begin van je tweet

Een tweede ontdekking die Dan Zarrella deed was dat tweets waarin de link op +/- 25% van de inhoud stond de hoogste click-rate hebben. Plaats je links dus vóór de inhoud in plaats van achteraan, wat gebruikelijk is.

Vijf korte tips voor een hogere click-through waarde in jouw tweets. Vind je dit artikel interessant? Deel het via onderstaande social media. Heb jij nog aanvullende tips waarmee ik mijn tweets kan verbeteren? Plaats een reactie.

In de Gravity Forms documentatie is beschreven hoe de notatie van euro bedragen gewijzigd kan worden:

add_filter("gform_currencies", "update_currency");

function update_currency($currencies) {
    $currencies['EUR'] = array(         "name" =--> __("Euro", "gravityforms"),
        "symbol_left" => '',
        "symbol_right" => "€",
        "symbol_padding" => " ",
        "thousand_separator" => ',',
        "decimal_separator" => '.',
        "decimals" => 2);

    return $currencies;
}

Nederlandse WordPress ontwikkelaars kunnen bovenstaande code in hun WordPress thema functies bestand plaatsen. Het kan echter vervelend zijn om dit voor elke Nederlandse WordPress website te moeten doen, daarom hebben we bovenstaande code opgenomen in de Gravity Forms (nl) plugin.

1. Kies de juiste coverfoto. Kies de coverfoto met aandacht. Deze foto is voor nieuwe bezoekers van je Facebookpagina één van de meest opvallende elementen. Zorg er daarom voor dat de foto de juiste sfeer uitstraalt en uitnodigend is. Bezoekers moeten zin krijgen om verder te klikken. Daarnaast moet je ook rekening houden met de technische kant. De ideale grootte van een coverfoto is 851 bij 315 pixels. Een andere grootte kan ook maar dan wordt deze door Facebook zelf bijgesneden of geschaald, wat vaak niet ideaal is.
2. Vermeld belangrijke data. Voor veel bedrijven is het interessant om milestones (mijlpalen) toe te voegen. Deze milestones mogen ook in het verleden liggen. Vergeet dan niet de optie aan te vinken ‘verbergen van nieuwsoverzicht’. Je nieuwsoverzicht raakt dan niet teveel vervuild. Het beste is om milestones toe te voegen die a) interessant zijn voor de gebruiker maar b) ook je online identity versterken. Voor een bedrijf die sterk inspeelt op kwaliteit is het interessant om het behalen van bepaalde certificaten in de tijdlijn te plaatsen. Voor een bedrijf die inspeelt op innovatie kan het weer interessanter zijn om alle innovaties in de tijdlijn te benoemen.
3. Contact via Facebook. Voor fans is het mogelijk om een bericht te versturen naar de beheerders van de pagina. Eventueel kan deze optie worden uitgeschakeld maar dit zou niet mijn voorkeur hebben. Wanneer een fan een bericht stuurt moet deze adequaat worden behandeld. Houd hier van te voren rekening mee, bepaal van te voren wie deze afhandeling gaat verzorgen en maak die persoon ook beheerder van de Facebookpagina.
4. Profielfoto. Net zoals de coverfoto is ook de profielfoto erg belangrijk. Bij alle statusupdates krijgt men deze foto te zien. Een logo van een bedrijf als profielfoto ligt voor de herkenbaarheid voor de hand maar dit hoeft niet per definitie. Sommige bedrijven komen soms met creatieve oplossingen. Een leuk voorbeeld vind ik de pagina van Aly Moffatt.  Ook de profielfoto moet aan de technische vereisten voldoen; 180×180 pixels is de minimale grootte, deze wordt vervolgens geschaald naar 125×125 pixels.
5. Zorg voor actie. Een mooie fanpage is fijn maar dat fans actie ondernemen is nog beter. Probeer je fanpage zo in te richten dat bezoekers actie ondernemen. Dat kan door in de coverfoto duidelijk te vermelden dat liken wordt gewaardeerd maar het kan ook door de juiste posts te schrijven.  Positief nieuws, vragen, tips, allemaal onderwerpen die vaak voor extra interactie zorgen.

Naast deze 5 tips zijn er nog veel meer mogelijkheden om extra rendement uit Facebook te halen. Heb je bijvoorbeeld al geprobeerd te adverteren via Facebook? Pronamic helpt je graag verder om je social media strategie tot een succes te maken. Neem vrijblijvend contact met ons op.

PS. Een vliegende start? Download dan de Facebook template die mijn collega Leo Oosterloo gratis ter beschikking heeft gesteld.