Waarom krijgt Damiaan Reijnaers geen straf?

In de week dat het land verdeeld wordt in twee kampen door “Johannes” die strandt (en sterft op een zandbank) vallen andere berichten minder op. Behalve over het zoveelste treurige schietincident op een Amerikaanse school konden we ook lezen hoe Damiaan Reijnaers tienduizenden mensen voor schut zette.

Het artikel geschreven door @elger laat nog maar eens zien hoe ‘dom’ de mensen zijn en hoe ‘slim’ de 17e jarige Damiaan. Damiaan lokt deze mensen in de val en maakt misbruik van hun twitteraccount. Je kan natuurlijk de kant van Damiaan kiezen en ‘lachend’ zeggen, allemaal beter opletten. Is deze actie onschuldig? Damiaan zet op deze manier tienduizenden mensen voor schut, erg aardig is dat niet. De actie brengt twitter schade toe en ook de bedrijven die wel een serieuze applicatie ontwikkelen met de gegevens die via twitter beschikbaar zijn.

@elger heeft in zijn artikel slechts aandacht voor Damiaan. Geen ruimte voor de getroffen twitteraars, geen reactie van twitter en geen reactie van een applicatie-ontwikkelaar. Een algemene tendens hackers en misleiders laten zien dat het ‘onveilig’ is, die moet je een baan geven of een stageplaats zoals @Lydia2u voorstelt. Inbrekers maken we dan preventiemedewerker bij de politie en moordenaars geven we een leuke functie in het leger.

Belangrijk in deze discussie is misschien wel wie heeft de rechten (copyrights) over alle berichten die we dagelijks plaatsen op de verschillende social media. Twitter vindt blijkbaar dat deze data niet alleen van hen is. De data zou ook achter gesloten deuren verkocht of gebruikt kunnen worden. Twitter kiest er daarentegen voor de data voor iedereen beschikbaar te stellen. Ontwikkelaars kunnen daarmee leuke innovatieve toepassingen bouwen. En via het gebruikte model kun jij nog steeds invloed uitoefenen of jouw data ook gebruikt mag worden.

En natuurlijk laat Damiaan ook wel iets zien via zijn actie. Zonder handhaving, dan wel toetsing van de applicaties aan de voorwaarden en wetgeving kunnen kwaadwillende inderdaad invloed uitoefenen. Het model van twitter biedt nu inderdaad de mogelijkheid om accounts te verzamelen en op een bepaald moment berichten te verzenden die afkomstig lijken van iemand anders. Langs die weg zou ook een persoon of groepering een #ProjectX op gang kunnen brengen. Zoals ook daar geschreven staat:

“Een beetje socioloog weet dat jongeren de sociale media net zo betrouwbaar vinden als de traditionele”

.

Damiaan is geen ‘slimme’ programmeur die een ‘lek’ aantoont in de beveiliging van het gebruikte systeem. Damiaan is een misleider, die ten koste van tienduizenden mensen grappig wil zijn. Misschien wil / kan iemand van die getroffen twitteraars alsnog aangifte doen? Niet perse om Damiaan te straffen, maar om eens te toetsen of onze wetgeving ons kan beschermen tegen een dergelijke vorm van misbruik.

Damiaan heeft vast de algemene voorwaarden van Twitter geaccepteerd. Mocht hij op grond daarvan dergelijke berichtjes sturen? Had de eindgebruiker hem daarvoor toestemming gegeven? En hoe kunnen we dergelijke voorwaarden dan vervolgens handhaven?

Mag ik Bing wel vergeten?

David en Goliath door MichelangeloDeze week kwam google niet alleen met Google+ communities. Microsoft maakt haar social netwerk so.cl ook voor iedereen beschikbaar. Ik heb even rondgekeken op so.cl. In eerste instantie vond ik het veel op Pintrest lijken. Ook van Pintrest vraag ik mij ook nog steeds af wat ik daar zakelijk nou precies mee kan / moet. Er zijn wel mensen die daar ideeën over hebben. Ergens kan ik mij inderdaad wel voorstellen dat een restaurant bijvoorbeeld een foto van een lekker gerecht kan delen. Zelf lever ik meer diensten, die zou ik dan moeten (laten) uittekenen?

Andere vraagstelling dan: En wat wil Microsoft dan met so.cl? De zoekresultaten van Bing meer ‘author-led’ maken, een tegenhanger van Google Authorship dus.

Hoe belangrijk is dat? Om die vraag de beantwoorden zou je eerst moeten weten hoe groot Bing nu eigenlijk is. Ik heb gezocht naar cijfers over het marktaandeel van zoekmachines over 2012. Eigenlijk is er maar weinig te vinden. Marktaandeel zoekmachines in Nederland geeft de cijfers van 2011. Wel is duidelijk dat Google eigenlijk in heel Europa, inclusief Nederland oppermachtig is: Google nog steeds stevig in zadel in Europa. In de Verenigde Staten is het beeld al jaren anders: Bing wint marktaandeel in de Verenigde Staten.

In Nederland zou je Bing en Yahoo dus misschien maar liever vergeten. Anderzijds is het misschien juist een kans. Door juist ook aandacht te geven aan Bing en Yahoo, lukt het misschien uit dat kleine marktaandeel een hogere conversie te halen. Een site die in Google niet te vinden is heeft misschien wel een hoge ranking in Bing. Yahoo maakt gebruik van de technologie van Bing. Dus qua optimalisatie kan dezelfde aanpak gebruikt worden.

Bij gebrek aan cijfers heb ik naar een aantal van mijn eigen websites gekeken. Via Google analytics heb ik gekeken naar het percentage bezoekers dat binnenkomt via Bing:

linkotheek.nl
Google: 93.1
Bing: 3.4
Yahoo: 0.4

babykeur.nl
Google: 98.1
Bing: 0.6
Yahoo: 0.2

webvrouw.nl
Google: 90.0
Bing: 6.3
Yahoo: 1.3

Opvallend zijn de grote verschillen per website en het relatief grote aandeel Bing/Yahoo voor een website als webvrouw.nl. Een conclusie trekken zonder het marktaandeel Bing/Yahoo te kennen is moeilijk. In het geval van webvrouw zou je kunnen zeggen, de site doet het ‘slecht’ in Google, waardoor het aandeel Bing/Yahoo relatief groter wordt. Of precies andersom webvrouw.nl scoort goed voor Bing/Yahoo dat zou voor de andere websites ook haalbaar moeten zijn.

De genoemde websites zijn alle in het Nederlands en gericht op Nederland (België). Toch kan het zo zijn dat een site relatief veel buitenlandse bezoekers aantrekt via de zoekmachines door een hoge ranking op een Engels zoekwoord. Dit zou dan terug te zien moeten zijn in de kwaliteit van het verkeer. Er zijn wel kleine verschillen in de kwaliteit (pagina’s per bezoek, bezoekduur, bounce-rate) in het geval van webvrouw:

kwaliteit van het verkeer op webvrouw.nl

Het verkeer van Bing/Yahoo heeft een vergelijkbare kwaliteit. Deze bezoekers komen dus waarschijnlijk gewoon uit Nederland of zijn op zijn minst Nederlandstalig.

Andere verschillen tussen de website die mogelijk een rol spelen:

Doelgroep

De bezoekers van webvrouw.nl zullen (hopelijk) meer vrouwen dan mannen zijn. Dat zou echter in zekere mate ook op moeten gaan voor babykeur.nl

Technologie

Zowel babykeur.nl als webvrouw.nl zijn gebouwd met wordpress. Dat lijkt het verschil niet te zijn. Wat wel een duidelijke rol kan spelen. Babykeur maakt gebruik van de All in One SEO Pack plugin, terwijl op webvrouw.nl gebruik gemaakt wordt van de WordPress SEO plugin.
Tevens is op webvrouw.nl de afgelopen maanden via de WordPress SEO plugin veel aandacht besteed in het juist instellen van o.a. de links voor Google Authorship en bijvoorbeeld Twitter cards.

History

Er is een verschil het aantal jaren dat de website bestaat. De linkotheek bestaat sinds 1995, via startpunt.vuurwerk.nl en startpunt.cc sinds 2001 op de domeinnaam linkotheek.nl. Webvrouw.nl bestaat sinds 2003. Babykeur is pas sinds 2008 actief.

Bovenstaande vragen en cijfers zijn voor mij wel aanleiding komende weken nog eens verder naar Bing/Yahoo te kijken. Hoe staat het bijvoorbeeld met het aanbod van tools die vergelijkbaar zijn met de Google Webmaster Tools. Spelen sitemaps nog een rol? En in hoeverre maakt Bing/Yahoo reeds gebruik van bijvoorbeeld de rel=”author” metatags en bijvoorbeeld twitter cards?

Responsive images

In een eerdere post schreef ik al dat het in het kader van responsive design het logisch lijkt niet alles client side op te lossen. Niet veel later leerde ik via @nielsvanmidden dat deze techniek RESS genoemd wordt. Voluit spreekt men dan van Responsive Design + Server Side Component.

Responsive images

In websites gebruikte afbeeldingen leek mij interessant om nader te bekijken. Ter illustratie een voorbeeld:

Een website geoptimaliseerd, of maximaal getoond, voor een breedte van 960 pixels. Zo’n site heeft bijvoorbeeld een header images van 960 x 300 pixels. Wordt deze website nu op een mobiele telefoon bekeken, dan wordt de header d.m.v. css op 100% schermbreedte gezet. De mobiel in portret view geeft de header dus afgebeeld als 320 x 100 pixels. Wordt deze afbeelding nu d.m.v. css (media queries) herschaald, dan wordt eerst de volledige afbeelding op de telefoon gedownload, de hardware van de telefoon herschaalt deze vervolgens. Was een afbeelding van 320 x 100 pixels van de server gedownload, dan was dit sneller gegaan en de gebruiker had minder dataverkeer verbruikt.

Mogelijke oplossing

Server side wordt het gebruikte device bepaald. Vervolgens stuurt de server de afbeelding van de juiste afmeting. Voor de oplossing ga ik uit van een willekeurige webserver (LAMP) waarbij alle afbeeldingen in één directory staan. Bijvoorbeeld /images/ (subdirs toegestaan). Middels Mod rewrite stuur ik alle request /image/* naar mijn script (ti.php):

RewriteEngine On
RewriteCond $1 !=ti.php
RewriteRule ^(.*)$  /image/ti.php

In ti.php wordt het device bepaald. Afhankelijk van het device rendeert ti.php de juiste afbeelding. ti.php kent de oorspronkelijke REQUEST_URI. Het script kan de opgevraagde afbeelding openen, herschalen en renderen. Qua device zou je bijvoorbeeld kunnen splitsen op mobiele telefoons, tablets en desktops. Voor mobiele telefoons hoeft een afbeelding dan niet breder dan 480 pixels te zijn (???).

Het bepalen van een device kan gebeuren met Mobile Detect.

Voordeel van deze oplossing dat je deze op elke website server kunt installeren los van het CMS dat gebruikt wordt. Enige dat je feitelijk hoeft te doen is de files uploaden naar je directory met afbeeldingen. Dat gaat dan om een .htaccess bestand, ti.php en de Mobile Detect files. Er zijn ook geen wijzigingen nodig aan je html.

Deze oplossing werkt in theorie, in de praktijk zijn er ook enkele nadelen.

Te weinig profijt

Veel sites hebben weinig hele grote afbeeldingen, voor veel sites betreft het alleen de header. Hoewel er altijd winst is, kunnen de voordelen gering zijn. Voor een website met veel foto’s, die ook op desktop foto’s herschaalt middels css (of width i/d img tag) zou de winst daarentegen wel enorm kunnen zijn.

Landscape / portret view

Mobiele telefoons hebben meestal een landscape en portret view. Bij het wisselen tussen de landscape en portret view wordt de pagina niet herladen, afbeeldingen kunnen middels css wel opnieuw schalen. Voor images die je getoond wilt hebben met 100% van de schermbreedte betekent dit dus, dat de afbeelding die je laat laden minimaal een breedte moet hebben gelijk aan de maximale schermbreedte in de landscape view.
Vervolgens heb ik bijvoorbeeld gekeken naar: http://twitter.github.com/bootstrap/scaffolding.html#responsive “Supported devices”. Dan blijkt er eigenlijk een overlap tussen telefoons en tablets met een breedte tussen de 480 en 767 pixels. Dat zijn grote telefoons of kleine tablets.
Onduidelijk is of Mobile Detect nauwkeurig genoeg is om te bepalen of een device valt onder bijvoorbeeld maximaal 480px breed (landscape).
Zie hiervoor ook: Obtaining max device width. Indien de bepaling niet strikt genoeg is zou je voor elke telefoon voor de zekerheid moeten uitgaan van 767 pixels, een steeds geringer verschil met de originele 960 pixels.

A Simple Device Diagram for Responsive Design Planning laat zien dat er feitelijk maar één breakpoint mogelijk is. Dit breakpoint ligt dan bij 480px.

The MobileESP Project  is een andere library om devices te detecteren. MobileESP is beschikbaar voor PHP, Java, ASP.NET (C#), Python (voor Django), Ruby en Classic ASP (VBscript). Tevens is er een javascript versie en een api beschikbaar. Via MobileESP zou, mogelijk niet heel strikt, een onderscheid gemaakt kunnen worden tussen telefoon en tablets met een scherm tot 7inch en een groep met schermen tot 8inch. 7inch schermen zouden een resolutie hebben van 480×800. Via deze route zou je een breakpoint op 800 pixels kunnen bepalen.

Alternatief

Alternatief zou kunnen zijn om de server side Mobile Detect te vervangen door een client side javascript detectie. Voorbeeld is te vinden op https://github.com/filamentgroup/Responsive-Images. Eerste nadeel van deze methode lijkt dat je de images pas kunt laden nadat de pagina geladen is. In het genoemde voorbeeld wordt ook  met maar één breakpoint gewerkt. Het onderscheid is dus groot of klein. Probleem met de landscape en portret view blijft bestaan.

Google+, foto’s bij de zoekresultaten beter uitgelegd

Vandaag probeerde ik kort uit te leggen, waarom het zinvol is een google+ pagina aan te maken, als je een website hebt of online publiceert. Google gebruikt de profielfoto van Google+ in de zoekresultaten. Google plaatst jouw foto dus naast de artikelen die jij geschreven hebt in de zoekresultaten. Behalve een lange termijn effect is er ook een direct effect. Je artikel / link valt in de zoekresultaten meer op als er een foto bij staat. Hoe meer je opvalt, hoe meer kliks je krijgt. Deze techniek heet Google Authorship.

De lange termijn effecten beschreef ik eerder al in Personal branding en Google+.

Nu denk je vast beter uitgelegd? Ik snap het nog steeds niet helemaal. Die betere uitleg komt in dit geval dan ook niet van mij, maar van Luuk. Luuk maakte en heldere en duidelijk video (quicktip) over dit onderwerp: Quicktip 2: Je profielplaatje in de google zoekresultaten. Dat was duidelijk of niet?
Uiteraard heb je ook alle comments bij deze video gelezen? Uit de comments valt op te maken, dat het tonen van een link naar je Google+ pagina middels een ‘hidden’ link niet de juiste weg is. Zelfs al volg je met het plaatsen van een dergelijke link in grote lijnen de wens van Google, Google houdt niet van verborgen content. Andere zoekmachines trouwens ook niet.

Om toch naar je Google+ profiel te linken heb je twee mogelijkheden. In de eerst plaats kun je natuurlijk de link wel zichtbaar maken. De zichtbare link hoef dan natuurlijk niet noodzakelijkerwijs onderaan de pagina geplaatst te worden. De tweede mogelijkheid is de link te plaatsen in een meta-tag. Ook dit vraag misschien om wat extra uitleg. In de header van elke pagina, d.w.z. ergens tussen de <head> en </head> tags plaats je de volgende regel:

<link rel="author" href="https://plus.google.com/116797701827736533225/posts" />

Waarbij je uiteraard de link vervangt door een link naar je eigen profiel. Hoe je de juiste link kunt vinden kon je zien in de eerder genoemde video.

Originele tekst in wordpress plugin aanpassen

Gisteren vroeg @KarinBron op twitter: “I want to change the “succesfully added to cart” string in #WooCommerce #WordPress, of course outside the core files #dtv“. In eerste instantie begreep ik de vraag niet helemaal. Ik dacht dat het ging om het aanpassen van de vertaling. Waar het om ging: In een plugin is een Engelstalige string (tekst) opgenomen. Deze string wordt netjes vertaald via de mee geleverde language files van de plugin. Als gebruiker van de plugin zou je hier misschien liever een andere tekst zien. De snelste oplossing lijkt dus de language files aan te passen. Verondersteld dat de originele taal van de plugin Engels is, dan kan in languages/en_US.po een “vertaling” worden toegevoegd. Je vertaald dan dus de ongewenste Engelse tekst, naar de gewenste Engelse tekst. Dat kun je herhalen voor alle talen. Nadeel in dit geval is dus dat je de originele vertaalbestanden aanpast. Dat moet je elke keer doen als de plugin geupdate is.

Er moet dus een andere oplossing gezocht worden. Ik zal het hier uit leggen voor het specifieke geval waarover de vraag ging. De plugin waar het om gaat is Woocommerce. Deze plugin heeft een bestand woocommerce-functions.php, daarin komt de functie woocommerce_add_to_cart_message()voor. In die functie staat de volgende regel:


$message = sprintf('%s %s', get_permalink(woocommerce_get_page_id('cart')), __('View Cart →', 'woocommerce'), __('Product successfully added to your cart.', 'woocommerce') );

Het gaat om de tekst “Product successfully added to your cart.”, die tekst willen we aanpassen. Van de betreffende functie kunnen we geen ‘hook’ maken. Een oplossing hiervoor vond ik op remove/add filter to WordPress Function fil….

De output van de functie kan ik dus aanpassen in functions.php van mijn theme. Aan functions.php voeg ik dan dus toe:


function my_filer_function( $message )
{
// Here you should modify $message as you want, and then return it.
$replace = 'Thanks, Product successfully added to your cart.';
$message = preg_replace('/(.*<\/a> )(.*)/',"$1".$replace,$message);
return $message;
}
// Then add the function to that filter hook and prioritize it last
add_filter( 'woocommerce_add_to_cart_message', 'my_filer_function', 999);

De tekst “Product successfully added to your cart.” wordt dus vervangen door de tekst “Thanks, Product successfully added to your cart.”. Op de website heb ik getest of dit ook gebeurd. Dat werkt inderdaad prima. Er is nog een klein probleempje. De tekst wordt namelijk niet meer vertaald als ik de website in een andere taal bekijk.

In de bovenstaande code vervang ik de replace daarom door:

$replace = __('Thanks, Product successfully added to your cart.','your_domain');

De vertaling wordt in dit geval afgehandeld door de language files uit het ‘your_domain’ domein. Dit is onderdeel van mijn theme, omdat ik in functions.php ook heb opgenomen:
//Load the theme translation files
load_theme_textdomain( 'your_domain', TEMPLATEPATH.'/languages' );

Om de nieuwe tekst ook vertaald te krijgen naar bijvoorbeeld het Nederlands, voeg ik deze toe aan “TEMPLATEPATH.’/languages/nl_NL.po'”, daarin zet ik nu:

#: wp_webvrouw5/functions.php:119
msgid "Thanks, Product successfully added to your cart."
msgstr "Bedankt, het product is aan je winkelmandje toegevoegd."

De string is nu vertaald. Alle aanpassingen zijn gemaakt binnen mijn theme en ik kan de plugin dus blijven updaten.
Mocht bij een update van de plugin de structuur (html output) van woocommerce_add_to_cart_message worden aangepast dan zou het kunnen dat de replace niet meer werkt.

Wij wil zien dat het ook echt werkt kan kijken naar: NCFS Knuffelapen. Na het klikken op kopen, zie je de nieuwe tekst in het Nederlands. Nu de aap nog even afrekenen, daarmee steun je het goede doel!

Wat kunnen we uit Rusland halen?

Laatst las ik in de Nieuwsbrief van ICT-Kring Delft dat er binnenkort een delegatie van Russische en Wit-Russische ICT-bedrijven naar Nederland komt. Op 23 november zal er in Den Haag een matchmaking event plaats vinden met Nederlandse ICT-bedrijven. Meer informatie is te vinden op http://www.handelsbevordering.nl/activiteiten/4/2/758. Interessant vond ik dat Yandex ook aanwezig is. Zo veel we horen over Google, zo weinig horen we over Yandex. Toch behoort Yandex tot de vijf grootste zoekmachines ter wereld. Omdat Yandex zich vooral richt op Rusland, Oekraïne, Kazachstan, Wit-Rusland en Turkije, is er zelfs geen Nederlandstalige pagina over Yandex te vinden op Wikipedia.

Yandex heeft vast andere technieken en kan daarom leerzaam zijn in het uitdenken van content- en SEO-strategieën. Zelf ben ik er ook gewoon te vinden http://www.yandex.com/yandsearch?text=bass%20jobsen, waarbij bijvoorbeeld opvalt dat er een hoge score is voor comments en andere zaken waar mijn naam aan verbonden is. Duidelijk andere resultaten dan een zelfde zoekopdracht bij Google geeft.

Misschien moet ik eens een pagina in het Russisch maken, zoals ik eerder al eens deed in het Chinees.

Verder biedt Yandex ook nog andere diensten. Ook dat kan interessant zijn. @JellevanderBij ontdekte er vast al één: Yandex Metrica. Yandex Metrica is een websitestatistiekendienst. Yandex Metrica biedt ook gratis de mogelijkheid een on-page-analyse uit te voeren. Lees meer hierover op: On Page Analyse met de gratis tool: Yandex Metrica. Voor Yandex Metrica is ook een (beperkte) WordPress plugin beschikbaar.

Personal branding en Google+

Vandaag reageerde ik op een interessant gastblog over gastbloggen van @slagter. (Gast)bloggen past natuurlijk uitstekend bij personal branding. Personal branding is het zichtbaar maken van je naam en kennis, of misschien beter gezegd het koppelen daarvan. Bij het stukje over gastbloggen moest ik ook meteen weer denken aan de blog, die ik eerder schreef over Google authorship.
Of je wilt of niet Google+ is en wordt belangrijk in het kader van personal branding. Voor organisaties en websites is dat ook belangrijk omdat de som van de branding van medewerkers, gastbloggers en andere contentschrijvers, weer een bijdrage zal leveren aan de totale branding.

Je Google+ pagina vormt op dit moment een belangrijk onderdeel van je persoonlijke online zichtbaarheid. Het koppelt je content niet alleen aan je Google+ pagina, maar indirect ook aan andere sociale netwerken. Dergelijke koppelingen zullen de komende tijd alleen maar complexer worden. Niet alleen Google, maar ook andere bedrijven willen weten wie jij bent. Door een koppeling te maken met alles wat jij publiceert kan bijvoorbeeld Linkedin bepalen of jouw profiel wel overeenstemt met je tweets. Zoals twitter ook zelf al zegt: “Think before Tweeting“. (en dat geldt niet alleen voor kinderen!)

Met Google als meest gebruikte zoekmachine, is je Google+ pagina dus voorlopig een belangrijke verbinding in je online zichtbaarheid. Wie positief  gevonden wil blijven worden en zijn kennis online zichtbaar wil maken, zal dus ook de nodige aandacht aan zijn Google+ pagina moeten schenken. Belangrijk daarin zijn op dit moment volgens mij:

  • Actualiteit; plaats regelmatig een update
  • Koppeling van content; Google Authorship
  • Consistentie; zorg dat je profiel inhoudelijk in overeenstemming is met je andere profielen
  • Het opbouwen van een netwerk (volgers, circles)

Op de langere termijn is het goed om na te denken over je doelgroep en het gebruik. Wie volgt jou op Google+, wat verwachten zij daar van jou en hoe gebruiken zijn Google+ zelf. Pas als je dat goed in kaart hebt gebracht kun je beter bepalen, wie je zelf zou moeten volgen en welke statussen je (per cirlce) post. Vanuit de huidige situatie zie ik bijvoorbeeld dat er een relatief grote overlap is tussen mijn volgers op Google+ en die op Linkedin. Slechts een gering aantal van die mensen volgt mij ook op twitter. Wat ik tweet, plaats ik daarom ook niet automatisch met de zelfde strekking op Linkedin en visa versa. Zo plaats ik op Linkedin projecten waar ik aan werk en ga ik op twitter meer in op technische details van een project. Herkenbaarheid, zoals bijvoorbeeld overal dezelfde profielfoto gebruiken, vind ik wel belangrijk.

Uiteindelijk verwacht ik dat de “Google’s” zelf de onderliggende koppelingen wel zullen leggen. Als ontwikkelaar is het verder wachten op koppelingen die ook openbaar, bijvoorbeeld via een API beschikbaar zijn. Interessant is bijvoorbeeld om de waarde van een comment te bepalen op basis van wat iemand eerder schreef. Ook dergelijke koppelingen die personen autoriteit op een bepaald gebied verlenen zullen er aan komen.

Onlangs postte ik bijvoorbeeld een comment op http://wpsitebouw.nl/wordpress-plugin-voor-de-cookie-wet/ mijn comment werd daar automatisch gekoppeld aan de blog die ik schreef op Jamedo Websites. In dit geval wordt de koppeling gelegd via CommentLuv. CommentLuv is een plugin voor WordPress. De Plugin koppelt comments aan twitter en keywords. En indirect blijkbaar ook aan Google+.

Het vak van de webbouwer en online marketeer wordt steeds leuker en uitdagender!

“Het vak van de webbouwer en online marketeer wordt in ieder geval steeds leuker en uitdagender!” dat schreef @qtag_qrcode in een reactie op het artikel    Responsive design, development en content in één flexibele aanpak. Inderdaad refereert hij daarbij terecht aan: 60% van internetverkeer is mobiel (zie het CBS persbericht van 23 oktober). Voor webbouwers is dit inderdaad een uitdaging. Of het ook leuker en uitdagender wordt, browsers, schermresoluties ondersteunen doen we al sinds we websites bouwen.

De benadering van content first is wel nieuw en interessant. En ik zou zeggen uiteraard kunnen we daarbij niet meer zonder de ‘responsive gedachte’. De meeste webbouwers denken bij responsive toch steeds aan de CSS3 media queries. Wat mij betreft zou het (weer) meer de breedte in mogen.

Uitgaande van CSS3 media queries geeft @nielsvanmidden ook als reactie op het bovengenoemde artikel een mooi overzicht van breekpunten. Een breekpunt is een minimale of maximale schermbreedte waarop je de weergave van je site aanpast. Je kunt dat heel strict toepassen, waarbij je je aandacht vooral richt op het device; bijvoorbeeld … pixels breed is een tablet in landscape mode. Een meer flexibelere aanpak wordt voorgesteld in Responsive Design: Why You’re Doing It Wrong. In dat artikel wordt voorgesteld je breekpunten te bepalen op wat je ziet in de browser(s) naarmate je het window verkleint of vergroot. Daarbij wordt dan ook meteen weer aandacht gevraagd voor de ondersteuning voor verschillende browsers. Microsoft ondersteunt media queries bijvoorbeeld pas vanaf IE9.

Hoe je uiteindelijk je breekpunten ook samenstelt in beide benaderingen kun je werken van klein naar groot of andersom. Per breekpunt kan ook de content aangepast worden. Verschillende breekpunten zullen vragen om het weglaten, toevoegen of herpositioneren van content. De contentkeuze wordt moeilijker bij een responsive benadering vanuit schermbreedte i.p.v. het soort device. Want zoals in 11 Reasons Why Responsive Design Isn’t That Cool! (punt 10) wordt aangegeven is het soort apparaat vaak bepalend in de behoefte van de gebruiker. De andere 10 genoemde redenen mogen ook niet onderschat worden. Schalen van plaatjes, elementen verbergen op basis van media queries optimaliseren de laadtijd van de website niet. De laadtijd, juist ook voor de mobiele gebruiker zo belangrijk, wordt overbodig lang doordat onnodige en onnodig grote bestanden geladen worden.

Voor een goede gebruikerservaring lijkt de inzet van media queries op termijn dan ook niet toereikend. Alternatief om toch weer aan de serverkant aan de slag te gaan. Mensen die met WordPress werken zouden bijvoorbeeld eens naar de wp_is_mobile()  functie kunnen kijken. Daarmee is het mogelijk om aan de serverkant vast content te schalen, tonen of juist niet tonen. Ook dit past prima in een content en / of mobile first benadering. Het combineren van client- en serveroplossingen vormt mogelijk een goed compromis tussen een losstaande mobiele website en een volledig op media queries gebaseerde responsive website.

Ook Jamedo Websites bouwt nu, mede op mijn advies, responsive designs op basis van media queries. Dat was reden genoeg om deze benadering nog eens kritsich te bekijken. En hoe ziet jouw website er eigenlijk uit op een mobiele telefoon of tablet? Via Responsinator.com kun je hiervan snel een goede indruk krijgen.

 

Standaardisering van WordPress theme ontwikkeling

Jamedo Websites ontwikkelt voor haar klanten websites in WordPress. Ook biedt Jamedo Websites webdesigners de mogelijkheid om hun ontwerpen, white labelled te laten uitvoeren en beheren. WordPress wordt hier ingezet als content management systeem. Voor de opmaak van een website met WordPress wordt gebruik gemaakt van een zgn. theme. Een theme is gescheiden van de rest van de code. Er is echter geen stricte scheiding tussen code en design. Ook in een theme kan PHP worden gebruikt. Qua beveiliging vormt dit laatste een extra risico.

De gekozen opzet van WordPress maakt het mogelijk themes onafhankelijk te ontwikkelen. Binnen een bestaande WordPress installatie kan zonder verdere wijziging van content of functionaliteit een andere theme worden gebruikt. In de praktijk ondersteunen niet alle themes dezelfde functies en kunnen bij het wisselen toch functionaliteiten verloren gaan.

Voor haar klanten ontwikkelt Jamedo Websites op basis van het gewenst ontwerp dus ook steeds een uniek theme. Om een theme te ontwikkelen worden steeds een aantal stappen doorlopen. Deze stappen zijn steeds hetzelfde. De verschillende stappen kunnen door verschillende mensen worden uitgevoerd. Door het proces te standaardiseren, kunnen designers, slicers en programmeurs beter samenwerken. Tevens wordt de gebruikte code van de theme herbruikbaar, wat in de eerste plaats de kosten drukt en in de tweede plaats zorgt dat het werk makkelijker over te dragen is.

Aan mij de opdracht om een voorstel te doen voor deze standaardisering

Het proces

De meeste websites beginnen met een interaction design. Op basis van het interaction design levert een ontwerper een ontwerp voor de website. Ontwerpen worden in 90% van de gevallen aangeleverd in Photoshop (.psd) bestanden. De volgende stap is basing / slicing. In deze stap wordt het ontwerp omgezet naar geldige html-code. Jamedo Websites levert al haar projecten responsive op. Dit wil zeggen dat de website werkt op een PC, tablet en mobiele telefoon, zonder verlies van functionaliteit. Vanwege de responsiviteit wordt de html-code opgeleverd in html5 met css3. Op basis van de geleverde html-code wordt vervolgens een WordPress theme gemaakt. Deze stappen worden uitgevoerd door verschillende mensen. Per stap kan nu gekeken worden volgens welke standaards gewerkt kan worden en hoe deze stappen het beste op elkaar kunnen worden aangesloten.

Basiselementen
Voor de eerste twee stappen, het interactie design en het websiteontwerp heb ik in kaart gebracht welke onderdelen voor elke website ontworpen moeten worden. Dat zijn de volgende onderdelen:

  • voorpagina
    • twitterfeed
  • subpagina met tekst (full)
    • social media buttons
  • pagina met twee kolommen
  • pagina met drie kolommen
  • contactformulier
  • reactieformulier / reacties
  • form elementen; textarea, radio buttons, checkboxes, select boxes, buttons
  • tekst elementen; h1 t/m h9 headers, strong, emphasized, paragraaf, quote, code

Uiteraard hebben alle pagina’s een header, footer en een content deel. Naast de basiselementen levert de designer ook een klantspecifiek ontwerp op, wat per definitie niet alle basiselementen hoeft te bevatten.

Standaardisering van de html- en css-code

Ook voor responsive design zijn er inmiddels diverse frameworks die direct kunnen worden ingezet als basis. Enkele voorbeelden zijn Gumby Framework en Yaml. De laatste tijd is op dit gebied ook de Twitter Bootstrap CSS framework sterk in opkomst. De keuze voor een vast framework en grid, zal ook de interactie- en webdesigner helpen. Het Grid vormt dan immers ook de basis voor het ontwerp.

Het ontwikkelen van het theme

De juiste manier om themes te ontwikkelen is het creëren van een zgn. child theme op basis van je basis of parent theme. Dit stelt je in staat de basisfuncties te updaten zonder dat je eigen code overschreven wordt. Zoals ik eerder al aangaf, heeft het opnemen van PHP code in de themes risico’s. Een goed opgezet theme structuur zorgt ervoor dat je code uptodate blijft en eventuele security problemen doeltreffend kunnen worden opgelost. Lees ook: Blogging Pitfalls: Why You Should Update Your Themes (and Use Child Themes)

Eindconclusie

Mijn advies aan Jamedo Websites is een css framework te kiezen en op basis daarvan een parent theme te ontwikkelen. In plaats daarvan zou eventueel ook een bestaand parent theme gekozen kunnen worden. Goede kandidaten lijken dan XXtreme theme (op basis van yaml) of WordPress Bootstrap (op basis van Twitter Bootstrap). De juiste keuze wordt gemaakt in overleg met de verschillende ontwikkelaars en designers. Mijn persoonlijke voorkeur gaat uit naar de Twitter Bootstrap. WordPress Bootstrap is op zijn beurt weer afhankelijk van het Bones theme framework. Om een te grote afhankelijkheid te voorkomen lijkt het daarom tevens verstandig het basis theme zelf te ontwikkelen en onderhouden.

Bij een keuze voor Twitter Bootstrap kan nog gekeken worden naar WordPress Twitter Bootstrap CSS. Deze plugin kan helpen reeds ontwikkelde projecten sneller naar de standaard te brengen.

Ondanks de standaardisering blijft het belangrijk hierin flexibel te blijven. Het gehele proces dient continu geëvalueerd en verbeterd te worden. Zo is het belangrijk bijvoorbeeld de eerder genoemde basislijst van elementen, actueel te houden. Blijkt achteraf voor een klant iets te missen, kijk dan of het niet bij de basiselementen hoort en andersom wordt er nooit een twitterfeed gevraagd schrap deze dan.

Hoe effectief is jouw website nou eigenlijk?

Goed je hebt dus een website? Wat is je doel? De meeste websites komen er niet vanzelf een website kost een hoop tijd en energie. Iedereen heeft zo zijn eigen idee van wat mooi, dan wel goed of doeltreffend is. De meeste bedrijven en website-eigenaren zijn trots op hun website. Dit laatste heeft vaak te maken met eigen inbreng en geleverde inspanning om het voor elkaar te krijgen. De volgende stap is het bereiken van de doelen. Wat moet jouw website doen? Informeren of juist verkopen? Waar komen de bezoekers vandaan en betaal je daar dan voor (advertenties)?

Is je website eenmaal online, dan is het erg moeilijk zo niet onmogelijk, om zelf nog objectief te oordelen of deze nou echt zo goed is. Waarom schrijft niemand zich in voor je nieuwsbrief? Of juist wel? Genoeg bezoekers op je webshop, maar slechts een enkeling die wat koopt. Is de eerste indruk wel / niet goed en zijn de trechters vervolgens duidelijk te volgen. Met een trechter bedoel ik een gewenste klikrichting die de bezoeker zou moeten volgen. Je wilt bijvoorbeeld dat een bezoeker na het lezen van je nieuwsbericht geïnteresseerd geraakt is in de diensten die jij aanbiedt. De bezoeker zou dus van het nieuwsbericht naar je dienstenpagina moeten klikken. En op de dienstenpagina is het dan vervolgens gewenst, dat de bezoeker naar de contactpagina gaat. Een bookmark maken of zich inschrijven voor de nieuwsbrief zouden ook nog gewenste acties op de dienstenpagina kunnen zijn.

Meten is ook hier weten

Veel van de hierboven besproken zaken zijn objectief meetbaar. Bijvoorbeeld Google Analytics kan hier goed voor gebruikt worden. Trechters en bezoekersstromen kunnen bekeken worden. Vervolgens kunnen verbeteringen aangebracht worden. Lees hierover bijvoorbeeld eens “Google Analytics: bezoekersstroom en een hogere doelconversie“. Belangrijk is om bijvoorbeeld eens te kijken naar de bounce-rate. De bounce-rate geeft aan hoeveel procent van de bezoekers de pagina verlaat zonder nog een andere pagina te bekijken. Voor een gemiddelde website kan de bounce-rate tot 50% oplopen, zonder dat er direct iets mis hoeft te zijn. Bij hogere bounce-rates is het goed om eens nader te kijken wat de oorzaak is. De bounce-rate wordt vaak in verband gebracht met ‘de eerste indruk’. Een bezoeker die meteen wegklikt, zal ook niet snel terugkomen. Interpretatie van dergelijke cijfers blijft altijd moeilijk. In sommige gevallen kan een hoge bounce-rate juist positief zijn. Je doel van de betreffende pagina was de bezoeker naar een andere website te sturen, bijvoorbeeld de website van een congres waar je aan deelneemt. Of de bezoeker had een duidelijke vraag, die op jouw pagina direct beantwoord was. Al was het in het laatste geval misschien toch gewenst dat er op enige wijze interactie was opgetreden.

Website- of paginaverlatingen hebben veel gemeen met de bounce-rate. De bezoeker verlaat je website. Het meten van en het sturen op verlatingen is vooral van belang binnen de gedefinieerde trechters (gewenste bezoekersstromen). Hoeveel procent van de bezoekers besluit je website te verlaten na het bekijken van je portfolio? Vergeet in dit specifieke geval niet dat je mogelijk verwijst naar externe websites. In het geval van een webshop, hoeveel bezoekers zetten iets in het winkelmandje en verlaten alsnog de website zonder iets te kopen? En hoe komt dat dan? Is de betaalmethode niet duidelijk of zijn je (verborgen) verzendkosten misschien te hoog. Al dit soort vragen kun je proberen op te lossen met de statistieken. Jamedo Websites adviseert verder te kijken naar percentage nieuwe bezoekers en hun specifieke gedrag. Ook de gemiddelde bezoektijd en het aantal pagina’s dat per sessie bezocht wordt is belangrijk. Omdat Jamedo Websites websites responsive websites oplevert worden de laatste twee ook geanalyseerd op verschillen tussen mobiel en vast verkeer. Bounce-rates en websiteverlatingen kunnen natuurlijk ook op deze manier bekeken worden.

Een objectief advies

Wie continue zit te meten en sturen, blijft het risico lopen dingen over het hoofd te zien. Dingen die je niet wilt en kan zien, omdat je naar je eigen website kijkt. Je zult je eigen website nooit zien door de ogen van een willekeurige bezoeker. De beste oplossing is dan iemand anders objectief naar je website laten kijken. Diverse bureaus bieden een scan van je website aan. Voor een scan moet je in de meeste gevallen betalen, maar dat geld zul je al snel terugverdienen.

Klantmagneet Website Scan

De Klantmagneet Website Scan is een product van Sabriye Dubrie (Your key to Succes). Deze scan kost 150 euro. Je website wordt o.a. geëvalueerd op de volgende punten: Social media integratie, Design, Marketing, Gebruikersvriendelijkheid en Zoekmachine optimalisatie en smartphone en Tablet compatibiliteit. Het betreft hier echt een persoonlijk advies op maat. Na het afronden van de scan krijg je namelijk een telefonisch adviesgesprek. Your key to Succes richt zich in eerste instantie op vrouwelijke internetonderneemsters. Mannelijke ondernemers zijn ook van harte welkom. Overigens is het hier ook mogelijk een gratis scan te winnen.
http://www.yourkeytosucces.nl/products-page/online-marketing/klantmagneet-website-scan/

Een review door Yoast

Yoast (Joost de Valk) o.a. bekend van de populaire en zeer doeltreffende SEO plugin voor WordPress kan een review van je website maken. Deze review oordeelt de Usability, SEO, snelheid en conversie van je website. Je krijgt niet alleen een rapport, maar ook een plan van aanpak waar je ontwikkelaar direct mee aan de slag kan. Een review kost 595 euro. Voor dat geld krijg je tips van twee van Nederlands grootste website-experts. De Valk maakt de review namelijk persoonlijk en werkt daarbij samen met Michiel Heijmans. Een van de eerste bloggers in Nederland en al meer dan 10 jaar expert in online marketing.
http://yoast.com/hire-us/website-review/

Gratis website scan

Web Match biedt een gratis scan. De scan kan via telefoon of skype besproken worden. Na de scan ontvang je een advies rapportage met opmerkingen en aanbevelingen. De scan van Web Match richt zich vooral op SEO (zoekmachine optimalisatie) en conversie. Speciale aandacht voor het goed functioneren van het contactformulier. Aanvullend op de gratis scan maakt Web Match voor slechts 250 euro eventueel ook een handgemaakt rapport met aandacht voor design, structuur, html, seo, conversie en bezoekersvriendelijkheid.
https://www.web-match.nl/diensten/internet-marketing/gratis-website-scan/