Soms heb je van die projecten waarvan je lang onzeker bent of het wel een succes is. De website die ik voor Veurink Montage ontikkelde is er zo eentje. Regelmatig heb ik met eigenaar Johan Veurink om tafel gezeten om ideeën uit te wisselen, beslissingen te nemen over het uiterlijk en om te kijken hoe we het CMS het beste konden vormgeven. Hoewel ik naar verloop van tijd de huisstijl goed in de website had verwerkt was ik toch niet blij met hoe hij eruit zag en functioneerde. Waarom niet? Ik probeerde hem op mijn telefoon te openen.
Ik kan nou niet echt zeggen dat het een fijn gevoel is om op je telefoon naar een website te kijken die niet geschikt is voor schermen smaller dan zo’n slordige 1000 pixels. Een voorbeeld: Tweakers.net. Nu is Tweakers een superwebsite en hebben de makers ook apps voor Android en iOS, maar het gegeven blijft dat deze site lastig te gebruiken is voor mobiele gebruikers en zo nog honderden sites meer. Onleesbaar kleine teksten, veel te onoverzichtelijk voor een klein telefoonschermpje en vaak ook behoorlijk langzaam. Van deze drie punten heeft de website van Veurink Montage geen last.
Responsive to the rescue
Mobile-first
Om de website zo goed mogelijk in te richten en vorm te geven ben ik opnieuw begonnen met een mobile-first aanpak. Dat wil zeggen dat je een site eerst ontwerpt voor kleine schermpjes en dan steeds naar grotere schermen toe werkt. Na eerdere experimenten was ik best tevreden met deze methode. Zonder op details in te gaan: kijk alleen al naar het verschil tussen een groot en klein scherm.
Performance
De gemiddelde webpagina is tegenwoordig zo’n slordige 1 MB groot. Om de mobiele gebruiker tegemoet te komen wat snelheid betreft heb ik erg mijn best gedaan om de website zo klein mogelijk te maken. Dit kun je op een aantal manieren doen: degene waarop ik me gefocust heb in dit project noem ik hier.
- Minimaliseer het aantal HTTP-requests: Hoewel de website bestaat uit meer dan tien stylesheets, een paar javascriptbestanden en een heel aantal afbeeldingen worden er maar een paar bestanden per pagina opgevraagd. De stylesheets worden allemaal samengevoegd tot een enkel document, evenals de scripts.
- Optimaliseer afbeeldingen: Alle afbeeldingen zijn op precies de juiste grootte gesneden om downloaden van teveel pixels te voorkomen, ze zijn opgeslagen in het meest gunstige formaat (jpeg of png) en ik heb ze allemaal door imgoptim gehaald. Dat laatste is een programma dat afbeeldingen soms tot wel 75% kleiner maakt zonder de kwaliteit te verminderen.
- Minify CSS en Javascript: alle CSS en Javascript worden opgeslagen zonder spaties, witregels of wat dan ook. Totaal niet leesbaar voor ons, maar de browser weet er wel raad mee en de bestandsgrootte neemt meestal met ongeveer een derde af. Hiervoor gebruik ik overigens ook een tool: Ant. Zo kan ik zelf in leesbare code blijven werken, terwijl voor de live website een geminimaliseerde versie wordt gemaakt.
Dit alles heeft geleid tot een website die per pagina niet meer dan ongeveer 260 kB inneemt. En dat zijn de grote pagina’s. De homepage komt neer op zo’n 50 kB. Dat is snel. Heel snel.
De toekomst
Omdat ik tijdens dit project veel heb geïnvesteerd in het bereiken van optimaal gebruiksgemak en snelheid vind ik het van nu af aan niet meer dan logisch dat elke website die ik oplever responsive dient te zijn. Zeker omdat ik mezelf bestempel als webdesigner vind ik het niet meer dan logisch dat elke opdrachtgever recht heeft op een snelle, responsive en professionele website. Als je dat nou ook wat lijkt, neem dan contact op!