3 dingen die ik heb geleerd op WordCamp Europe 2017

Van 16 tot 17 juni was ik in Parijs voor WordCamp Europe 2017. WordCamp Europe is een jaarlijkse conferentie over WordPress en met bijna 2000 deelnemers een van de grootste conferenties over WordPress ter wereld. WordCamp gaat niet alleen over WordPress, maar ook over meer algemene webdesign onderwerpen. De drie belangrijkste dingen die ik geleerd heb:

  1. Toegankelijkheid is goed voor iedereen
  2. Inhoud gaat voor presentatie
  3. Themes!

Toegankelijkheid is goed voor iedereen

Er waren meerdere lezingen over toegankelijkheid (hiervoor wordt de Engelse term accessibility of a11y meestal gebruikt) De beste lezing vond ik Selfish Accessibility van Adrian Roselli. Deze lezing is terug te kijken op wordpress.tv. Met ondertiteling (!), selecteer CC rechtsonder de video.. Toegankelijkheid gaat over het beschikbaar maken van je website voor zoveel mogelijk doelgroepen. Dus ook voor mensen met een beperking: visueel, fysiek of cognitief.

Responsive images with srcset and sizes

With the new attributes srcset and sizes for the <img> tag, you can specify multiple sizes of the same image. The browser chooses the best size for each situation. This will help serving better images for your users and improving the loading time of your website.

These new attributes are available for some time now. However, I didn't manage to understand it fully. There are great articles on the web explaining this new syntaxLike the great article 'Srcset and sizes' from Eric Portis. But I couldn't wrap my head around it. And especially, I missed in those articles how one could apply srcset and sizes to real world problems.

So, that's why I wrote this article about srcset and sizes. It comes with an example of a common website layout: a page with sidebar. I hope it will help you better understand srcset and sizes and how to apply it to your website projects.

Waarom een lelijke website soms beter is

Je kent ze vast ook wel. Websites die er fantastisch uitzien, maar niet goed werken. Fancy buttons en hippe animaties maar vinden wat je zoekt lukt niet. Niks is meer frusterend dan dat.

Andersom komt ook voor. Websites die er niet heel sexy uitzien, maar werken als een trein. Deze websites hebben iets gemeen: ze stellen de bezoeker en gebruiksvriendelijkheid centraal. En daarom zijn lelijke websites soms beter dan mooie websites.

Deze websites ... stellen de bezoeker en gebruiksvriendelijkheid centraal.

Ik laat drie voorbeelden zien: 123inkt.nl, okokorecepten.nl en Amazon. Ik maak geen reclame voor deze websites. Ik wil met deze websites laten zien dat lelijk soms beter is.

Website template of ontwerp op maat?

Eenvoudig gesteld zijn er twee manieren om een nieuwe website te realiseren. Met een kant-en-klaar ingekocht template of op maat gemaakt. Beide hebben voor- en nadelen.

Website templates

Een template is een zo goed als kant-en-klare website. De template bestaat uit verschillende soorten pagina's (home, projecten, blog, contact etc.), onderdelen en functies. Voor je eigen website kies je de pagina's en onderdelen uit die je nodigt hebt. Vervolgens pas je de template aan naar wens, bijvoorbeeld om de huisstijl van je bedrijf erin te verwerken.

Waarom de Britse overheid geen apps maakt

Vandaag las ik een zeer interessant artikel over Ben TerrettDit artikel kwam ik tegen op twitter.

Why Britain banned mobile apps op govinsider.asia

Ben Terrett is voormalig 'head of design' van de UK Governement Digital Service (GDS). Zijn afdeling besloot geen apps te ontwikkelen maar alle tijd en budget te steken in de website.

Het volgende viel mij op:

  • een website is veel goedkoper te onderhouden dan een app
  • ontwerp een website op basis van gebruikersbehoeften
  • testen, testen, testen!
  • gebruiksvriendelijkheid is belangrijker dan mooie vormgeving
  • afbeeldingen? social media links? leiden af en worden nauwelijks gebruikt
  • volg een Agile projectmethode

Maak je website touch friendly

Wij gebruiken websites steeds vaker op onze tablets en telefoons. Het is de verwachting dat we dit jaar (2015) websites vaker gebruiken en bekijken op onze tablet en telefoon dan op een computer. We bedienen websites op deze apparaten met onze vinger en niet met een muis. Dat maakt nogal wat uit voor hoe een website gemaakt is, bijvoorbeeld voor de grootte van buttons en links.

Laadtijd verbeteren, een voorbeeld uit de praktijk

Een kortere laadtijd wordt voor websites steeds belangrijker. De internetverbinding is niet altijd even goed – denk aan de wifi in de trein, maar je bezoekers verwachten wel een snel geladen website. Bovendien is een snelle website voor SEO steeds belangrijker. Daarom een voorbeeld hoe je de laadtijd kunt verbeteren.

Lees ook: mijn artikel over laadtijd en waarom dat zo belangrijk is.

Een doorsnee artikel

Webinar ‘4 Principes voor een winstgevende website’

UPDATE: de webinar is inmiddels gegeven. Er is een video opname gemaakt, die je op deze website kunt bekijken. Voor de webinar heb ik een checklist gemaakt, deze is vrij te downloaden en te gebruiken.

Op dinsdag 26 mei geef ik de webinar '4 Principes voor een winstgevende website'. Daarin bespreek ik een aantal ontwerpprincipes die helpen je website mooier en beter te maken.

4 Designprincipes voor een winstgevende website

Deze webinar geef ik in samenwerking met Jos Veldwijk van Veldmerk, Jos Veldwijk. Voor meer informatie of als je je wilt aanmelden, zie de speciale aanmeldpagina op de website van Veldmerk.

Aanmelden webinar

Na aanmelding krijg je url en inloggegevens voor de webinar.

Gegevens

Webinar: 4 Principes voor een winstgevende website Spreker: Wouter van der Zee Datum: dinsdag 26 mei 2015 Tijd: 10:30 - 11:30 Kosten: geen Wel graag even aanmelden op de website van Veldmerk.

Plaats menu website aan de zijkant

Het is nog steeds vrij gebruikelijk dat de navigatie – het menu – zich aan de bovenkant van de website bevindt. Waarom eigenlijk? Met de komst van grotere en bredere beeldschermen zou het logischer zijn het menu naar de zijkant te verplaatsen.

Tegenwoordig gebruiken we websites steeds meer op telefoons en tablets. Deze schermen zijn vaak veel kleiner en vragen weer een hele andere aanpak voor de navigatie. Dat is een onderwerp op zich en laat ik in dit artikel achterwege.

Het menu is nog steeds het belangrijkste navigatiemiddel voor een website. Het laat zien waar je bent. En je kunt met een klik of touch naar een ander gedeelte of pagina gaan. Al heel lang is het de gewoonte het menu bovenaan de website te plaatsen. Links het logo en dan een lijst met de belangrijkste menu-onderdelen. Zo zijn we dat gewend. Ik denk dat dit komt omdat vroeger - voor de komst van smartphones en tablets - de afmetingen van de meeste computerbeeldschermen hiervoor aanleiding gaven.

In de periode 2002 tot 2007 was 90% van de schermafmetingen 1024 768 px of kleiner, zie de tabel. De laatste jaren is dat totaal anders. Nu is bijna 90% van de schermen 1024 x 768 px of groter. Er is dus veel meer ruimte beschikbaar voor websites, vooral in de breedte.

periode 1024x768px en kleiner groter
2002 - 2007 87% 13%
2012 20% 80%
2013 15% 85%
2014 10% 90%

Afmetingen (resolutie) van browserschermen van de afgelopen jaren. bron: w3schools.com en StatCounter.

Bij de kleine schermafmetingen van vroeger was de hele breedte van het scherm nodig voor de website. De meest logische plek voor het menu was daarom bovenaan. Nu is de breedte van website-inhoud (de tekst en afbeeldingen op de pagina's) ongeveer gelijk gebleven. Zo kun je de regellengte bijvoorbeeld beter niet te lang maken, dan wordt de tekst slecht leesbaar. Met de grotere beeldschermen van tegenwoordig is er veel ruimte bijgekomen, vooral in de breedte.

Waarom de snelheid van websites steeds belangrijker wordt

De snelheid van websites wordt steeds belangrijker. Met snelheid bedoel ik de tijd die nodig is om een pagina te laden. En waarom is dat steeds belangrijker? Steeds meer websites worden gelezen en gebruikt op mobiele apparaten, zoals telefoons en tablets.

Een betere leesbaarheid van je website

Om een artikel of pagina van een website te lezen zit je bijna met je neus op het scherm. Herken je dat? Beetje overdreven misschien, maar tekst op veel websites is erg klein. Wellicht herken je dit niet omdat we het zo gewend zijn met z’n allen. Er zijn namelijk heel veel websites waar de tekst erg klein is. Er zijn drie eenvoudige richtlijnen om de leesbaarheid van websites te verbeteren.

De laatste tijd heb ik bij een aantal projecten erg mijn best moeten doen de lettergrootte in het ontwerp te verdedigen. Die was vaak groter dan men gewend was. Dit artikel is een uitwerking van mijn argumenten daarvoor. Het meeste wat hier staat is niet nieuw. Dat veranderingen tijd kosten blijkt maar weer eens :-).

Wat is de reden dat bij veel website de tekst zo klein is? Waarschijnlijk komt dit omdat beeldschermen vroeger erg klein waren en er niet zoveel ruimte was Zie dit klassiek artikel over tekstgrootte en leesbaarheid van websites.. Maar nu is dat anders, de meeste mensen hebben een voldoende groot beeldscherm. Ik heb het hier over desktop beeldschermen, op tablets en smartphones kom ik straks. Een kleine letter is dus niet meer nodig. Maar waarom dan groter? De leesbaarheid van tekst wordt hoofdzakelijk bepaald door drie factoren:

  1. lettergrootte,
  2. regellengte en
  3. regelafstand.

Verder speelt onze leeftijd mee. Hoe ouder we worden - helaas, zo is het leven - hoe slechter onze ogen. En dan is een grotere leesletter wel zo prettig Zoals uitgelegd in het artikel 16 Pixels: For Body Copy. Anything Less Is A Costly Mistake op Smashing Magazine..

De grootte van de tekst wordt o.a. bepaald door de afstand van de lezer tot het scherm. Bij boeken hebben ze dit lang gelezen uitgezocht en kwamen ze tot een ideale grootte van ca. 12 pts Zie bijvoorbeeld Basic Book Design/Font op Wikibooks.org. Een goed basisboek over typografie en opmaak van tekst is nog altijd Stop Stealing Sheep van Erik Spierkermann.. De afstand tot schermen is over het algemeen groter, de minimale lettergrootte voor schermen is daarmee ca. 16 px (voor het gemak beschouw ik pts en px als evengroot). In de meeste gevallen is 18 px zelfs nog beter. Niet heel toevallig is de standaard lettergrootte in browsers 16 px. Maar niet alle websites maken daar dus gebruik van.

Naast de lettergrootte zijn er nog twee factoren die de leesbaarheid van tekst bepalen: de regellengte en -afstand. Daar kan ik kort over zijn. Hiervoor gelden al heel lang richtlijnen die - wederom - bij veel boeken en magazines worden toegepast. De ideale regelafstand is 10 tot 15 woorden (per regel dus) of 45 tot 75 karakters (komt ongeveer op hetzelfde neer). De richtlijn voor de optimale regelafstand is 1,4 keer de lettergrootte 5.

Daarmee hebben we dus de volgende drie richtlijnen voor een goede leesbaarheid van je website:

  • lettergrootte: 16px of groter
  • regellengte: 45 tot 75 karakters
  • regelafstand: 1.4 keer de lettergrootte

Deze richtlijnen gelden voor computer beeldschermen, maar ook voor die andere apparaten waarmee we websites bezoeken, zoals smartphone en tablets. Omdat de ideale lettergrootte bepaald wordt door de afstand tussen jouw ogen en het scherm, is een kleinere letter voor smartphone beter. De afstand tussen dit scherm en je ogen is over het algemeen kleiner. Daarom kun je voor weergave van websites op smartphones beter een kleinere letter gebruiken. Gelukkig kan dit prima met technieken zoals Responsive Design Lees meer over Responsive Design en het optimaliseren van je website voor mobiel.. De leesafstand van tablets is ongeveer gelijk met die van boeken en tijdschriften. De lettergrootte zal dan iets groter zijn dan bij weergave op je telefoon en iets kleiner dan bij weergave op je computer.

Hieronder een voorbeeld van een website dat niet goed leesbaar is: lange zinnen en bovendien kleine letters. Dit is vrij eenvoudig op te lossen, waarbij je de website zelf niet hoeft aan te passen. Rechts de verbeterde versie. De regellengte is korter gemaakt en de letters groter. Met deze twee aanpassingen is de tekst een stuk leesbaarder geworden.

Hoe ik omga met e-mail, telefoon en werk tijdens vakantie

Ik werk als zelfstandige en in mijn eentje. Dat betekent dat er tijdens mijn vakantie geen collega’s zijn die het van mij kunnen overnemen. Hoe gaat dat dan met mijn e-mail, telefoon en lopende projecten?Dit artikel heb ik o.a. geschreven naar aanleiding van deze podcast..

Om kort te zijn, bij mij gaat de stekker er helemaal uit. Geen e-mail, geen telefoon, geen werk. Voor mij is dat de beste manier van vakantie vieren. Tijd voor andere dingen. Bezinning, aandacht voor mijn gezin, het zien van andere landen en culturen. Mijn hoofd leeg te maken. Uiteindelijk is dat ook het beste voor mijn werk. Ook al ben ik gedurende mijn vakantie niet bereikbaar, het is toch klantvriendelijk. Want op deze manier heb ik de rest van het jaar voldoende energie, creativiteit en inspiratie.

Praktisch

Voor mijn zakelijke e-mail zet ik een auto-reply aan. Daarin staat dat ik mijn e-mail weer lees en beantwoord na de vakantie. Op mijn telefoon heb ik geen zakelijke e-mail geïnstalleerd, zo kom ik niet in de verleiding dat alsnog te gaan lezen. Al vanaf dat ik begonnen ben als zelfstandige heb ik een apart vast zakelijk telefoonnummer. Normaal gesproken staat deze doorgeschakeld naar mijn mobiel, maar in de vakantie zet ik dat uit.

Bij lopende projecten geef ik ruim van tevoren aan wat mijn vakantieperiode is. Mijn klanten weten wanneer ik afwezig ben en houden met hun planning daarmee rekening. De afgelopen jaren heb ik steeds vier weken vrij genomen. Dat zal voor sommige een flinke periode zijn, maar ik kan het je van harte aanbevelen. De eerste week van de vakantie is het voor mij omschakelen van werk naar vakantie. Daarna begint het ontspannen pas is mijn ervaring.

Tijd of geld

Geen e-mail en telefoon, een consequentie daarvan is dat ik aanvragen voor nieuwe projecten pas zie na mijn vakantie. En het risico loop dat het dan te laat is. Ik heb ervoor gekozen dit te accepteren. De kwaliteit en tijd van mijn vakantie wegen voor mij op tegen het eventueel missen van extra inkomsten. Iemand zei eens, ' voldoende tijd is voor mij belangrijker dan geld'. Daar ben ik het wel mee eens.

Over bullets en inspringen

Dit is een artikel over twee details in het opmaken van tekst. Details gaan over kleine dingen en kleine dingen zijn ook belangrijk. Zij versterken de leesbaarheid van een tekst, ook op websites. Deze details gaan over bullets – zoals die gebruikt worden bij lijsten – en het inspringen van alinea’s.

Bullets

Er zijn ontwerpers die stellen dat bullets in de marge geplaatst dienen te worden Onder andere Mark Boulton is hier groot een voorstander van en heeft dit beschreven in zijn boek Designing for the web. Dit geldt overigens niet alleen voor bullets (van ongeordende lijsten), maar ook voor de nummering van geordende lijsten en de aanhalingstekens bij citaten.. De reden die hiervoor wordt aangedragen is dat inspringende bullets de leeslijn verstoren, zie afbeelding. Het oog zoekt naar rechte lijnen, en die wordt door het inspringen verstoord. Vaak wordt ook gesteld dat het minder mooi is. Maar schoonheid hoeft niet altijd voorrang te krijgen op gebruiksvriendelijkheid.

Een digitale, responsive versie van Wim Crouwel’s affiche Vormen van de kleur

Wim Crouwel is een beroemde Nederlandse grafisch ontwerper. Hij is bekend om zijn minimalistische ontwerpen waarbij voornamelijk typografie en een strak onderliggend grid gebruikt worden. Van Crouwel’s affiche Vormen van de kleur heb ik een digitale, responsive versie gemaakt.

Aanleiding hiervoor is het willen leren van Macaw Een nieuw webdesignprogramma, zie ook de website van Macaw., een nieuw programma voor webdesigners. De demo van het affiche heb ik met Macaw gemaakt. Bovendien vind ik het interessant het gebruikte grid te analyseren. Dit grid helpt bij het maken van andere formaten van het affiche.

Ik ben een groot fan van Wim Crouwel en deel zijn voorliefde voor typografie en grid systemen. Bovendien is Crouwel docent geweest bij de opleiding Industrieel Ontwerpen op de TU Delft, de studie die ik ook gevolgd heb. Ik heb dus wel wat met Crouwel.

De vormen van der kleur