Google heeft een geweldig product dat wij bijna altijd implementeren voor onze klanten: Analytics.

Voor diegene die er nog niet van gehoord heeft: het is een webstatistieken pakket van Google dat allerlei leuke dingen vertelt over de bezoekers op je site. Waar ze vandaan komen, hoe vaak ze terugkeren, hoeveel bezoeken je hebt in een op te geven tijdspan en wat voor systemen zij gebruiken (Windows, Mac of Linux). Ook kan je zien met welke browsers (Internet Explorer, Safari, Firefox, Chrome) ze jouw website bezoeken.

Het gaat nog veel verder dan dat, zeker met Google’s nieuwste aankondiging eind vorig jaar: Real-Time Analytics.

Dit is spannend nieuws! Stel je voor dat je een bericht met een link naar jouw website op Twitter of Facebook post en het zich vervolgens als een olievlek over de mensen verspreidt. De resultaten daarvan kan je dan direct zien bij de bezoekers aantallen in Analytics. Dit alles fraai vormgegeven met omhoog en omlaag springende grafiekjes. Kortom, de perfecte gadget voor de web-analyticus, en gebruikersvriendelijk genoeg voor de rest.

Real-Time Analytics is nog niet officieel beschikbaar, maar je kunt je aanmelden voor “early access”, wat wij van harte aanbevelen. Mocht je meer willen weten, dan kun je altijd even contact opnemen met mij of mijn collega Oebe.

Als op 31 december de vuurpijlen de lucht in gaan, breekt er precies op dat moment een nieuw jaar aan! Het lijkt me nu dan ook een goed moment om even te kijken wat de tussenstand is betreft de trends op het gebied van webdesign. Sommige staan nog in de kinderschoenen, andere zijn inmiddels in volle bloei en zullen in 2012 de standaard bepalen. Leest u even mee?

Responsive design

Favoriet! Responsive design zorgt dat de pagina-layout zich aanpast aan de afmetingen van het scherm waarin de pagina bekeken wordt. We hebben er al vaker over geschreven op ons blog. Deze trend zal zich zeker doorzetten. Dit komt natuurlijk door het gebruik van de verschillende apparaten (Pc’s / laptops/ iPads / iPhones) waarop websites bezocht worden. Wij zijn hier ondertussen een paar mooie responsive sites aan het ontwerpen en ontwikkelen: daarover later meer op dit blog.

Gebruik van grote foto’s

Het gebruik van beeldvullende foto’s op de achtergrond van een website is erg hip! Ook zien we steeds vaker video’s als achtergrond. Ik ben er fan van. Er zijn mooie technieken voor zoals het mooie bewegende Parallax-effect (zie voorbeeld) en jQuery-scripjes die de foto mooi mee laten schalen met de afmeting van je beeldscherm, zoals Supersize (zie voorbeeld). Prachtig.

Minimalisme: rust, ritme en regelmaat

Maak je website zo ‘zen’ mogelijk. Hoe simpeler de website lijkt, hoe meer ontwerpwerk er in gestoken is. De trend is dat er maar één duidelijke boodschap gecommuniceerd wordt op de site. Één beeld en een pakkende grote tekst. (Zoals een goede advertentie die je langs de snelweg bekijkt.) Er valt weinig meer te ‘verstoppen’ met content en graphics, dus wat men ziet moet ook goed zijn. Het is de bedoeling dat de bezoeker naar het goede punt geleid wordt, zonder teveel afleiding. Laat het een pure ervaring zijn. Een mooi voorbeeld vind ik de website zoals hierboven afgebeeld : collectionsocietegenerale.com

Single page websites

De website bestaat maar uit 1 pagina, waarop alles gebeurt. Je navigeert van boven naar onder, van links naar rechts. Je navigeert dus niet naar een andere pagina. Door het gebruik van iPads en andere tablets werkt dit erg intuïtief. Collega Gijs heeft er onlangs een mooi blogje aan gewijd. Occhio heeft recent twee ‘single page websites’ opgeleverd, te weten: gaystraightalliance.nl en micompany.nl (Ontwerp: Buro RuSt)

‘Design below the fold’

Dit heeft natuurlijk ook met het responsive design en met de single page designs te maken: de ‘vouw in de pagina’ wordt wat minder belangrijk. Natuurlijk is het nog steeds het eerste dat je ziet, maar mensen scrollen er tegenwoordig lustig op los. De pagina kan bijna niet lang genoeg zijn! Zorg er dus voor dat de content onderaan net zo aantrekkelijk is als de bovenkant. Live below 600px is een leuke pagina over dit onderwerp.

Structuur

En dat bedoel ik dan letterlijk. Ik heb er al eerder over geschreven, maar er lijkt een (terechte) hang te zijn naar echte producten en structuren, zoals papier, gedrukte letters en nostalgische kleuren. Je moet de inkt op de website bijna kunnen ruiken.

Typografie

Fonts galore! Het liefst zo groot, nostalgisch, vet en massief mogelijk, gecombineerd met prachtige sierlijke letters. Dit wordt alles mede mogelijk gemaakt door Google web fonts en Cufon. Fantastisch.

Illustraties

Zeg het met een mooie duidelijke tekening. En dan het liefst zo groot mogelijk in de header. Duidelijke boodschap!

Infographics

In 1 oogopslag een ingewikkelde kwestie uitleggen met tekst en beeld. Op deze manier krijg je een goed gevoel voor verhoudingen, zoals bij grafieken! Prachtige manier van informatie overbrengen. Beeld via coolinfographics.com.

Alvast een fijn 2012!

Single page layouts zijn hot! In een tijd waarin de internettrucjes een beetje verzadigd worden en HTML 5 eerder must dan een paradepaardje is, gaat het weer om één belangrijk kenmerk dat in de online wereld nooit uit de mode is geraakt: snelheid. Nog sneller vinden wat je zoekt, nog sneller kunnen zien wat er allemaal te koop is. Een oogopslag duurt tegenwoordig zelfs al te lang. Een goede manier om aan deze hernieuwde hang naar snelheid  te voldoen is al je informatie op één pagina te plaatsen.

Dan krijg je toch een hele lange pagina? Klopt. Maar aangezien scrollen sinds de introductie van de iPad weer volenthousiast wordt omarmd en we deze handeling met behulp van JavaScript-animaties nog een stuk gezelliger kunnen maken, is dit niet zo erg. Men is er zelfs dol op! Het bewijs ligt in sites als one page love en talloze overzichten van de mooiste single page website designs die er op het web te vinden zijn. Om zelf met je site wat one page love te mogen ontvangen moet je wel op een aantal dingen letten:

• Zorg dat je, net als bij websites met meerdere pagina’s, een duidelijk navigatiemenu maakt dat altijd op dezelfde plek te vinden is. Je pagina bestaat ongetwijfeld uit meerdere “hoofdstukjes”, dus maak deze dan ook gemakkelijk bereikbaar.
• Maak de overgang tussen verschillende hoofdstukjes duidelijk met een animatie. Spring niet heen en weer tussen plekken op je pagina, maar zorg dat de browser er zichtbaar naartoe beweegt.
• Bij die animaties zijn parallax-effecten natuurlijk heel gaaf! Door de bovenste elementen sneller te laten bewegen dan de onderste creëer je een organisch en rustig gevoel waardoor je bezoekers niet bij je site weg te slaan zullen zijn.
• Een website die maar uit één pagina bestaat is niet voor iedereen weggelegd. Als je veel subpagina’s hebt, moet je het jezelf niet te moeilijk maken. Voor alle informatie is wel een juiste vorm te vinden, en het is op de dag van vandaag nog steeds geen schande om een gewone site met meerdere pagina’s te lanceren. Sterker nog, dat doen wij nog wekelijks!

Maar we hadden het over single page layouts. Occhio lanceerde de afgelopen maand twee websites die gebruik maken van dit model. De informatiestructuren van gaystraightalliance.nl en micompany.nl leenden zich er perfect voor, dus ontwierp Ruben Steeman van Buro RuSt voor beiden een mooie websitepagina. Bekijk onderstaande screenshots voor een indruk, of beter nog: bezoek de websites hier en hier!

gaystraightalliance.nl

micompany.nl

WordPress 3.3 Beta 4 is net uit en de volledige vernieuwde versie zal zeer binnenkort gelanceerd worden. Wij hebben alvast de Beta-versie bekeken.

Wat zijn nou de belangrijke nieuwe veranderingen in WordPress 3.3? Hieronder een aantal zaken door mij uitgelicht.

Admin toolbar

De admin toolbar is compleet onder de loep genomen, de meeste gebruikte items zijn nu meer onder de aandacht gebracht.
De andere items zijn opnieuw ingedeeld en zo geplaatst dat je ze kunt vinden wanneer je ze nodig hebt. Sommige items zijn meer visueel aangegeven, omdat deze niet meer duidelijkheid behoeve met behulp van tekst (een icoontje volstaat).

Drag & drop

Een van de coolste nieuwe features van WordPress 3.3 is de drag & drop media uploader – een functie die sowieso steeds populairder wordt. Op deze manier kun je nu heel eenvoudig bestanden vanaf je bureaublad slepen en ze in het vlak laten vallen, waarna ze direct geüpload. Dit wordt onder andere ook gebruikt in Gmail en Google Apps. De nieuwe uploader heeft ook ondersteuning voor HTML5 en Silverlight.

Tooltips ofwel pointers

Over tooltips hoef ik denk ik niet zo heel veel te vertellen. Je weet wel, van die handige blokken met tips. In WordPress 3.3 zit nu de handige functionaliteit zodat jij als ontwikkelaar tooltips of ook wel pointers genaamd, voor je eindgebruikers kunt aanmaken. Op deze manier kun je heel gemakkelijk gebruikers van de admin rondleiden en uitleggen hoe ze je admin  kunnen gebruiken. Dit is natuurlijk ook erg handig voor Plugins. Joost de Valk (Yoast) heeft hier al gebruik van gemaakt in zijn WordPress SEO plugin – zie afbeelding hieronder.

Minder klikken

Het menu aan de linkerkant is ook slimmer ingedeeld, je kunt nu direct naar een sub-item gaan, zonder een extra klik. Het menu heeft een uitklapmenu waardoor je direct bij ‘mouseover’ (met je muis eroverheen) het submenu ziet en kunt kiezen. Voorheen moest je eerst op het hoofditem klikken, om vervolgens een sub-item te kiezen. Door deze nieuwe indeling hoef je velen malen minder te klikken en dat zul je ook zeker merken.

Naast het werken met ons Occhio CMS werken wij onder andere met het opensource CMS WordPress. Heb je vragen of opmerkingen over WordPress of wil je meer weten? Neem dan contact met Maarten van Gelder op.

Google heeft bekend gemaakt dat de grootgebruikers van de Google Maps API moeten gaan betalen voor het gebruik ervan. Bij onze klanten rijst er terecht een aantal vragen. Wanneer ben je grootverbruiker? Kom ik in de problemen? Wat kost het?

Daarom hebben wij de volgende informatie samengesteld.

Wanneer ben je grootverbruiker?

• tot 25.000 hits per dag voor elke kaart
• tot 2.500 hits per dag voor elke kaart die aangepaste kleuren heeft (vrij nieuwe mogelijkheid)

Een ‘hit’ is een keer dat de kaart opgevraagd moet worden. Als je op een pagina een kaartje hebt staan en je gaat daar drie keer naar toe, dan zijn dat drie hits. Als je gedurende een langere periode over de limieten heen gaat, krijg je een maand van te voren een waarschuwing van Google. Je kan dan twee dingen doen:

• het gebruik dat boven de limieten uit komt betalen – $4 per 1.000 extra hits, of
• een Maps API Premier license kopen (ook voor extra beveiliging, support, gebruiksrapportage, geen ads) – vanaf €8.580 per jaar

Non-profit organisaties kunnen de Premier license gratis krijgen via het Google Earth Outreach programma.

Kom ik in de problemen?

Voor zover wij nu weten, hebben onze huidige klanten geen last van deze nieuwe limieten. Het is echter wel belangrijk om de limieten in het achterhoofd te houden bij het ontwikkelen van nieuwe websites. Als je in een standaard zijbalk van de website, en dus op elke pagina, een Google Maps kaartje hebt staan, dan zal elke bezoeker deze een aantal keer zien (en dus inladen).

Stel dat je bezoekers gemiddeld 5 pagina’s per bezoek bekijken, dan kom je bij een langdurig bezoekersaantal van 5.000 per dag al in de problemen. Gelukkig krijg je tijdig een waarschuwing zonder directe gevolgen.

Bronnen

• http://code.google.com/intl/nl/apis/maps/faq.html#usagelimits
• http://code.google.com/intl/nl/apis/maps/faq.html#usage_pricing

Occhio ontwikkelt websites en web applicaties. Maar vaak maken die ook onderdeel uit van een campagne, of zelf een viral campagne, waarin ook social media past.

Wat maakt een virale campagne, of viral campaign op z’n Engels, nou succesvol? Wist je trouwens dat een viral campagne wel 500-1000 (1) keer meer impact kan hebben dan een ‘gewone’ campagne (de meetbaarheid blijft natuurlijk altijd wat suggestief). Een succesvolle campagne opzetten blijkt nog niet zo makkelijk. Een filmpje op Youtube kwakken levert niet zo 1-2-3 het effect op wat je wilt.

KISSmetrics maakte een mooie cheatsheet, oftewel een mooie infographic met 7 stappen, aandachtspunten, die basisingredienten zijn voor een succesvolle viral campagne. Bekijk de infographic hieronder.  (klik voor een grote weergave).

De belangrijkste regels voor een succesvolle virale campagne

Welke elementen moeten je viral campagne in ieder geval bevatten? Volgens de cheatsheet zijn dat:

1. Wees niet neutraal! Je kunt niet iedereen tevreden stellen. Kies je doelgroep, zorg dat je wordt bejubeld, of gehaat.
2. Doe iets onverwachts. Probeer je product niet ‘gewoon’ te promoten door het cool te laten lijken. Kies een andere invalshoek (denk aan ‘Will it blend’ - youtube)
3. Geen reclame maken! Maak een goed en interessant ‘verhaal’
4. Maak een vervolg. Geef duidelijk aan wat wat de volgende stap is. Zorg dat het duidelijk is (niet in dezelfde campagne dus!)
5. Zorg ervoor dat men het kan delen. En promoot dat ook!
6. Verbind met je publiek. Via commentaar, reacties en daar weer op reageren. Zie helemaal onderaan het voorbeeld van Old Spice.
7. Geen restricties of logins! Zorg dat iedereen je campagne kan zien, geen registraties of lid worden. Viral marketing gaat juist niet over exclusiviteit.

Source: The Viral Marketing Cheat Sheet Infographic

Tot slot: Old Spice

Old Spice had een hele populaire campagne te vinden op YouTube. Nou moet ik zeggen dat die misschien niet helemaal strookt met nr 3 (geen reclame maken), alhoewel de focus vooral ligt op het filmpje zelf. En daar gaat het om. Het beste is om ze gewoon te bekijken. Bekijk in onderstaande volgorde.

1. Old Spice | The Man Your Man Could Smell Like youtube.com/watch?v=owGykVbfgUE
2. Old Spice | Questions youtube.com/watch?v=uLTIowBF0kE
3. Puss In Boots – “The Cat Haz Swagger” youtube.com/watch?v=8JsbSolUF5c
4. Old Spice Girl Commercial youtube.com/watch?v=Vz4VyM-8W7Y

Gezien? Goed he, vooral, omdat filmpje 3 en 4 niet van Old Spice zijn (althans niet dat ik weet), maar er uiteraard wel aan refereren, waardoor het indirect toch reclame voor Old Spice is.

De bikkeltocht is een zeil-versie van de ‘tocht der tochten’ – de Elfstedentocht. Deze wordt dit jaar gevaren door een aantal Occhio teamleden en instructeurs van het Watersportcentrum Sloterplas in Valken (open zeilboten). Oebe Rombout en Maarten van Gelder zijn naast hun werk bij Occhio ook instructeur bij het Watersportcentrum.

Van vrijdagavond 11 tot maandagmiddag 14 november 2011 wordt er 64 uur (!) bijna-non-stop gevaren in een gevecht tegen de elementen. Dat betekent 200 kilometer zeilen, jagen, bomen en in ploegendiensten slapen en voor 125 bruggen de mast strijken. Een motor wordt niet gebruikt. Twee jaar geleden is trouwens het voor het eerst gelukt de volledige route uit te varen.

Dit jaar vaart het team voor een goed doel: Spieren voor Spieren (www.spierenvoorspieren.nl). Deze stichting zet zich in voor kinderen met een spierziekte. Occhio doet ook mee met het inzetten van een geldbedrag op elke stad die gehaald wordt.

Wil je de bikkels volgen tijdens hun b(iz)arre tocht of meedoen met de sponsoring, kijk dan op www.bikkeltocht.com voor meer info.