Overslaan en naar de inhoud gaan

Onze nieuwe Drupal 7 website

Net voor de kerst zijn we live gegaan met onze nieuwe website. In dit artikel leg ik uit welke keuzes ik heb gemaakt voor het nieuwe design en waarom ik deze gemaakt heb.

Onze nieuwe website op een nexus 5, nexus 7 en een chromebook.

Waarom Drupal 7 en niet Drupal 8?

Afgelopen zomer (2013) zijn wij begonnen met het ontwikkelen van onze nieuwe website. De keuze voor Drupal 7 was vrij simpel. Drupal 8 zou namelijk nog een paar maanden op zich laten wachten. Daarnaast is het ook geen goed idee om in het eerste jaar dat Drupal 8 uit is over te stappen. Je kunt beter wachten totdat alle grote bugs opgelost zijn, maar dan zouden wij minimaal een jaar moeten wachten met het maken en lanceren van een nieuwe website. Dat was voor ons geen optie, omdat wij met onze huidige website problemen ondervonden die op korte termijn opgelost moesten worden.

Grote schermen (1920x1080)

Statistieken liegen niet. Dus onze Google Analytics ook niet. Het is bijna niet te geloven, maar een merendeel van onze bezoekers bezoekt onze website met een resolutie van 1920x1080. Oftewel dezelfde resolutie als die van een Full HD televisie scherm. Nu heb ik niet de illusie dat mensen zo graag op onze website willen zitten, dat ze zelf s'avonds thuis op de bank nog even via de TV kijken of er nog nieuwe artikelen zijn bij Van Eldijk. Het is echter wel een opvallende trend. Een trend die hoogstwaarschijnlijk veroorzaakt wordt door de opkomst van laptops met Full HD schermen (en dus dezelfde resolutie als Full HD televisies hebben).

Google Analytics data van de gebruikte resoluties.

Toen we onze eigen website eens goed gingen bestuderen op deze resolutie, kwamen we erachter dat alles maar klein en priegelig was. De tekst was slecht leesbaar en er was veel onbenutte ruimte aan de zijkanten. Waarom hebben we hier nooit commentaar op gehad? Wanneer je gaat surfen op 1920x1080 krijg je daar al snel een antwoord op. Er zijn maar weinig websites die geoptimaliseerd zijn voor deze resolutie. Met name nu.nl is een goed voorbeeld van hoe het niet moet, omdat het maar een klein deel van het scherm benut. Mensen die surfen met een Full HD scherm zijn waarschijnlijk al gewend in te moeten zoomen of soms even de neus tegen het scherm te moeten drukken om iets te kunnen lezen.

Update 04-01-2014

Op Facebook kreeg ik van Thomas Rutten de vraag of het hoge aantal pageviews niet te verklaren was doordat het 'eigen verkeer' zou zijn. Nu is dat niet mogelijk omdat wij onze IP adressen zowel op werk als thuis filteren uit de Google Analytics statistieken. Ik heb even wat meer onderzoek gedaan naar de 1.130 pageviews met deze resolutie en kwam tot de volgende ontdekkingen:

  • Alle bezoekers met deze resolutie gebruiken een desktop (of laptop). Dus geen mobiel apparaat zoals een iPad of smartphone.
  • Deze bezoekers zijn in te delen in 17 verschillende besturingssystemen, waarvan Windows 7 de meest gebruikte is (ongeveer de helft).
  • Mac bezoekers blijven achter. Slechts 15% van alle bezoeken met deze resolutie bekijken de website met een Apple.

Deze statistieken onderschrijven de conclusie dat het geen 'nep' bezoek betreft. Dus geen bots of eigen verkeer.

Maar wat als we deze gebruikers nu eens tegemoet komen? Wat als we een website ontwerpen en maken die er niet alleen goed uit ziet op een Full HD scherm, maar ook op een tablet of een mobiel? Onze vorige website was responsive en schaalde goed mee naar beneden toe (op tablet en mobiel). Met het nieuwe ontwerp willen we zowel de mobiele gebruiker als de bezoekers met een grotere resolutie goed bedienen. Om het resultaat te bekijken kun je het beste onze website bezoeken met je TV en/of mobiel.

Onze nieuwe website op een Nexus 5.

Alles in één kolom

Een andere opvallende, maar ook hele logische trend in webdesign is dat veel websites maar uit één kolom bestaan. Waar vroeger de zijkanten van een website helemaal volgepropt werden, zie je een beweging opkomen die juist kiest voor één kolom. Dit zorgt ervoor dat de bezoeker niet afgeleid wordt door ruis in deze kolommen. De bezoeker kan zich focussen op de content in deze ene kolom en de designer/content marketeer kan de bezoeker helemaal begeleiden door zijn of haar content. Dit is indirect ook het resultaat van de opkomst van responsive websites. Een design techniek die daarbinnen centraal staat is 'Mobile first'. Ontwerp je website eerst voor mobiel en dan pas voor grotere schermen. Op deze manier kom je er al snel achter welke content overbodig is, omdat je op een scherm van een mobiel minder ruimte hebt. En dan blijkt dat de meeste content die geparkeerd wordt in de zijkanten overbodig is.

Ook onze nieuwe website gaat mee in deze trend. We hebben aan de zijkant geen balken meer die irrelevante informatie bevatten. Alles wat je op een pagina ziet, moet op een bepaalde manier in relatie staan tot de content die belangrijk is. En zo kom ik op het volgende punt.

Blijf up to date over webdesign trends door je in te schrijven op de nieuwsbrief 

Een zo uniek mogelijke pagina maken

Op onze nieuwe website willen we dat elke pagina een unieke ervaring voor de bezoeker wordt. Elke tekst die op deze pagina te zien is, moet in relatie staan tot het onderwerp waar de pagina over gaat. Een goed voorbeeld van hoe we dit willen bereiken is een artikel.

We hebben bijvoorbeeld een artikel over Drupal 8. Op onze oude website geeft de website geautomatiseerd suggesties van gerelateerde artikelen. Het blokje met gerelateerde artikelen laat de titel, afbeelding en intro van het gerelateerde artikel zien. Dit heeft drie nadelen:

  1. Doordat het geautomatiseerd is op te brede termen (zoals Drupal), worden vaak dezelfde gerelateerde artikelen getoond. Terwijl ze soms niet heel veel met het huidige artikel te maken hebben.
  2. Doordat de intro constant herhaald wordt, is deze content niet uniek en kan het zijn dat de bezoekers een paar keer dezelfde tekst zit te lezen.
  3. Het is niet altijd meteen duidelijk uit de intro van het gerelateerde artikel op te maken waarom de artikelen gerelateerd zijn.

We hebben dit in de nieuwe website op de volgende manier opgelost:

  • Een auteur van een artikel moet handmatig aangeven welke artikelen er gerelateerd zijn aan het zojuist geschreven artikel.
  • Wanneer een auteur een artikel relateert moet hij of zij aangeven waarom dit artikel gerelateerd is. De auteur moet beargumenteren in welk opzicht dat andere artikel ook interessant is voor de bezoeker die zojuist zijn of haar artikel heeft gelezen.

Daarnaast proberen we ook elk 'Over de auteur' blokje uniek te maken. Op de oude website is het een samenvatting van het profiel van de auteur. Dit stukje tekst komt elke keer terug bij alle artikelen van dezelfde auteur. Op onze nieuwe website moet een auteur elke keer opnieuw verantwoorden waarom je hem of haar moet 'geloven'. Waarom is hij of zij de aangewezen persoon om dit artikel te schrijven? Dit kan zijn omdat de auteur al jarenlang ervaring heeft met het besproken onderwerp of omdat hij of zij grondig onderzoek heeft gedaan in het vakgebied. Zoals het blokje hieronder:

Een ander bijkomend voordeel is dat Google pagina's beoordeelt op hoe uniek deze zijn. Als je bijvoorbeeld een bepaald stukje tekst op elke pagina laat terug keren, zal Google al die pagina's als minder uniek beoordelen. 

"Ontwerpen jullie ook websites?"

Deze vraag is de belangrijkste reden geweest om de website te vernieuwen. Onze oude website had een hele simpele, strakke en sobere uitstraling. Het was blijkbaar niet duidelijk dat wij ook websites ontwerpen. En ik geef toe dat de oude website inderdaad ook meer het ontwerp had van een partij die alleen maar websites bouwt. Met het nieuwe ontwerp is het mijn doel geweest om het geheel meer te 'designen'. Dat wil zeggen dat ik meer gebruik gemaakt heb van kleur en effecten, zoals afgeronde hoeken en schuine vlakken. Ook de foto's zijn een belangrijk onderdeel geworden van de website. Ik wil daarmee ook voorkomen dat we gebruik maken van saaie stock foto's die je al op honderd andere websites voorbij hebt zien komen.

Vind je dat het mij gelukt is? Dat hoor ik graag van je in het commentaar. Ook als je andere vragen of opmerkingen over onze nieuwe website mag je dat laten weten.

Heb je iets aan deze content gehad? Laat weten hoe je ons waardeert.

Meld je aan voor onze nieuwsbrief

En je ontvangt net als 2321 andere leden een overzicht van onze nieuwste artikelen. Met onderwerpen als; de laatste webdesign trends, SEO tips, conversie optimalisatie, Joomla, Drupal en Wordpress ontwikkelingen.

Reacties

Hey Robert, I do you and family are well... Would it be possible to read this in English Cheers - Steve

Standaard avatar Steve 04.01.2014 - 09:06

Als antwoord op door Steve

Hi Steve,

I'm fine thank you. And how is everything on your end? If you want to read this article in English I suggest Google Translate:
http://translate.google.com/translate?sl=nl&tl=en&js=n&prev=_t&hl=en&ie=UTF-8&u=http%3A%2F%2Fwww.vaneldijk.nl%2Fartikelen%2Fonze-nieuwe-drupal-7-website

Let me know what you think!

Standaard avatar rroose 07.01.2014 - 13:27

Zo te zien heeft het Team van Van Eldijk goed over de nieuwe website nagedacht.
Als ervaren Drupal programmeur weet ik wat er allemaal bij komt kijken om tot een dergelijk nieuw ontwerp en website te komen.

De 'responsiveness' van de website (het tonen van en schakelen tussen verschillende resoluties en media) is een zeer prettige ervaring. Zelfs op retina schermen (2880x1800 aka 2K resolution) zien de website en de gekozen afbeeldingen er haarscherp uit.

Persoonlijk vond ik de website in eerste instantie wat 'kaal'. Na een paar keer klikken echter, begon ik de subtiele afwerkingen te zien en de overzichtelijkheid zeer te waarderen.

Uiteraard heb ik als programmeur ook even onder de oppervlakte gekeken en zag dat de HTML en CSS code van de website volledig is geoptimaliseerd voor zowel snelheid als voor zoekmachine vindbaarheid. Dit bevestigde weer mijn ervaringen uit de samenwerking met het team van Van Eldijk.

"Van Eldijk is niet zomaar een website ontwerper/bouwer maar realiseerd complete oplossingen die optimaal zijn uitgewerkt voor de meest recente trends en technieken."

Goed werk en ga zo door.

Standaard avatar Tom Missaar 09.01.2014 - 09:40

Beperkte HTML

  • Regels en alinea's worden automatisch gesplitst.