Hier een uitgebreid artikel over het verschil tussen ontwerpen voor het digitale web en de wereld van de materie (papier, stof, plastic etc.).
Want zo af en toe hebben wij klanten die een nieuwe huisstijl hebben laten ontwikkelen (door een ontwerper gespecialiseerd in de wereld van de materie) voor briefpapier, visitekaartje en flyer en ook maar meteen een ontwerp voor een website hebben laten maken. Vervolgens komen ze bij ons om dat ontwerp te laten omzetten in een werkende website.
Vaak wordt dat voor drie mensen een teleurstelling.
- Voor de ontwerper omdat het ontwerp – vaak gemaakt voor papier of computerbeeldscherm – zich niet exact laat vertalen in een website die op alle schermen goed werkt.
- Voor ons, omdat wij ons in allerlei bochten moeten wringen om het ontwerp te vertalen naar een werkende website, maar wat eigenlijk nooit echt mooi wordt of goed lukt.
- En natuurlijk is het ook een teleurstelling voor de klant. Die krijgt niet wat de ontwerper heeft gemaakt en waarop hij/zij zich inmiddels verheugd had. En hij/zij zit tussen twee vuren – zo mogelijk nog lastiger, omdat je nou eenmaal de klus had uitbesteed en dus hoopt dat het voor je geregeld wordt.
Daarom zetten wij nog maar eens op een rij waarop je moet letten bij responsive webdesign / webontwerp.
Webontwerp is geen printontwerp
Ontwerpen voor papier of iets anders waarop gedrukt wordt is echt heel anders dan ontwerpen voor een beeldscherm.
Bij drukwerk kun je tot op de halve millimeter nauwkeurig precies de goede kleur, het juiste lettertype en die mooie afbeelding afdrukken. Het staat altijd op de goede plek en in de bedoelde verhouding. Wat je hebt ontworpen krijg je ook daadwerkelijk te zien. De enige variatie die je hebt (bij een netjes werkende ontwerper) is de drukkwaliteit en bijv. de kwaliteit papier. Een fotokopie is immers minder mooi dan een gedrukte pagina.
Op het web krijg je het NOOIT exact zoals je het hebt verzonnen in je ontwerpprogramma. Ga daar maar vanuit: nooit. Ja, heus wel mooi, maar niet exact hetzelfde. Daar zijn verschillende redenen voor:
- Het ontwerp dat in jouw beleving bestaat uit kleuren, lettertypen, afbeeldingen etc. is vertaald naar bits en bytes, naar HTML en CSS, naar PHP en andere programmeertalen. Kortom, jouw computer krijgt via nullen en enen de opdracht om iets op jouw beeldscherm tevoorschijn te toveren wat je kunt zien: kleuren, letters, foto’s. Dus geen voelbare inkt en papier, maar digitale gegevens.
- Alle browsers doen net weer iets anders met die digitale gegevens (Internet Explorer, Firefox, Opera, Safari, Chrome etc.). Wat bij de ene browser verticaal netjes uitgelijnd is, is bij de andere browser net 1 pixel versprongen. En dat zie je. Gebruik je speciale lettertypen (fonts) die niet standaard op elke computer aanwezig zijn (zoals b.v. wel Arial, Verdana, Times, tegenwoordig nog een paar meer), dan zul je zien dat iedere browser er weer net iets anders mee doet: dunner of dikker, meer tussenruimte of juist minder.
Sterker nog, Chrome op een Apple geeft een ander resultaat dan Chrome op een Windowscomputer….. - Verder is de kwaliteit van je beeldscherm natuurlijk bepalend voor hoe je de website ziet. Ga maar eens kijken bij een winkel met televisies in verschillende soorten en maten. Het beeld ziet er overal weer net wat anders uit. Dus is die mooie lila-kleur die je had verzonnen ineens een vaag grijs geworden? Misschien ligt het wel aan jouw beeldscherm.
- Uiteraard is ook de afmeting van het beeldscherm bepalend voor hoe je de site ziet: computerbeeldscherm, smartphone, maxitablet, minitablet etc. Maar daarover hierna meer.
- Tenslotte weet je nooit wat de instellingen van de browser zijn bij de bezoeker van jouw website. Heeft hij/zij toevallig het lettertype op ‘extra groot’ gezet, ga er dan maar vanuit dat jouw zorgvuldig uitgelijnde ontwerp er chaotisch uitziet. Heb je mooie lettertypen uitgekozen, maar heeft de bezoeker uitgezet dat extra fonts geladen mogen worden (dat scheelt namelijk weer in zijn mobiele internetabonnement), dan is je elegante styling volstrekt verdwenen.
Je begrijpt uit bovenstaande dat het voor webbouwers vrijwel onmogelijk is om exact het ontwerp op het beeldscherm te krijgen. Wil je dat toch, dan tast je diep in de buidel (eigenlijk doen alleen grote merken dat).
Functionaliteit is het allerbelangrijkste
Waren websites enige tijd geleden vooral nog mooi opgemaakte digitale folders op een computerbeeldscherm, tegenwoordig is dat echt anders. Voorheen maakte je het verschil met een mooie lay-out, een opvallend design en wellicht wat leuke gadgets of interactieve mogelijkheden.
Nu gaat het over functionaliteit. Wat vooral betekent dat jouw website goed leesbaar en navigeerbaar moet zijn op verschillende typen beeldschermen: computerbeeldscherm, smartphone, tablet. En die beeldschermen zijn allemaal ook nog eens in verschillende formaten. Een iPhone is immers kleiner dan een Samsung, een iPad mini kleiner dan de Asus, een computerbeeldscherm thuis vaak groter dan een laptop.
Dus is de website responsive
De website past zich aan aan het type beeldscherm, zodat je niet met je vingers hoeft te vegen om uit te vergroten. Meer daarover in ons aparte artikel ‘Wat is een responsive website?‘
Een leuk design komt nu op de tweede plaats. Allereerst ga je als professionele webontwerper nadenken over welke informatie waar moet komen en hoe die het best navigeerbaar is.
Bezoekers willen snel informatie vinden
Een ander aspect van functionaliteit is het snel voorzien van goede informatie.
Om je een idee te geven: 67% van de Nederlanders heeft in 2013 een smartphone (65% een computer), 78% van hen gebruikt die om te surfen op het internet. Wil je al die mensen vermoeien met het uitvergroten van je site, of bedien je die snel met de juiste tekst in leesbaar formaat?
Inderdaad, dan gaat het niet meer om een mooi achtergrondje of een leuk lettertype. Dan gaat het om snel en effectief je informatie delen. Want anders gaan ze heus direct door naar de volgende aanbieder van dezelfde dienst die wel een responsive website heeft waar ze meteen de juiste informatie vinden.
Voor de ontwerper betekent dat dus VOORAFGAAND aan het maken van het webontwerp nadenken over wat er nodig is en hoe zich dat vertaalt in verschillende soorten beeldschermen. Alleen een design voor een groot computerbeeldscherm is maken, is dus echt achterhaald.
Zet bezoekers aan tot het opnemen van contact
Tenslotte is het doel van elk promotiemiddel, communicatiemiddel, marketingmiddel (en dus onderdeel van de functionaliteit) dat de bezoeker contact opneemt, zodat jij hem kunt overhalen iets af te nemen. Dus moet een website aanzetten tot contact. Het internet heeft daarvoor de ‘call-to-actions’. Knoppen waarop je kunt drukken, zodat ze je contactgegevens zien of een contactformulier kunnen invullen. Met een smartphone is het nog handiger, want zet je telefoonnummer op een prominente plek en bij aanraking zal de smartphone gaan bellen. Dus je ontwerp moet aanzetten tot contact!
Maar hoe moet het dan?
Dat hangt helemaal af van het budget. Wil je persé een heel apart design dat telkens naadloos vertaald wordt naar de verschillende typen beeldscherm? Dan ga je naar de ’traiteur’. Die ontwerpt en bouwt voor elk type beeldscherm een aparte site en jij betaalt navenant (denk in de duizenden euro’s).
Of je gaat naar de ‘supermarkt’ en kiest een responsive thema dat zelf het aanpaswerk doet, je maakt een ontwerp dat goed vertaalbaar is binnen dat thema en je neemt sommige beperkingen voor lief. Maar je hebt dan heel betaalbaar (bij de Websitewinkel vanaf 550,- euro) toch een functionele, responsive website die er goed uitziet. Met supermarkt-eten kun je immers ook een heel lekker diner klaarmaken.
Hou rekening met balans tussen prijs en mogelijkheden
We noemden het hierboven al ‘je neemt sommige beperkingen voor lief’. Een thema (wij werken met WordPress-thema’s) is vaak qua kleur, font, grootte en afbeeldingen goed aanpasbaar. Wil je echter b.v. de pagina-indeling aanpassen of de titels op een heel andere plek, dan komt daar programmeerwerk bij kijken en kost dat extra. Dus als je kiest voor een webbureau zoals de Websitewinkel, dat voor een hele aardige prijs websites bouwt, dan zitten aan die aardige prijs ook beperkingen. Wil je meer of anders, dan is dat uiteraard mogelijk bij ons, maar dan vergt dat extra werk.
Dus onze belangrijkste tip:
Wil je dat jouw ontwerper van je huisstijl etc. ook je website ontwerpt? Zorg er dan voor dat de webbouwer aan tafel zit voordat het ontwerp gemaakt wordt. Dan kunnen jullie het met z'n drieën hebben over de functionaliteit, het allerbelangrijkste aspect van je nieuwe website.
En dan nog wat kleine technische tips:
- Natuurlijk werken met RGB-kleuren
- Mobiele gebruikers willen liever zo weinig mogelijk bytes laden i.v.m. hun internetbundel, dus wees zuinig met afbeeldingen, geen grote foto’s, niet overal sliders etc.
- Web werkt met pixels, niet met corps, millimeters, CMYK of andere slechts voor drukwerk van toepassing zijnde specificaties.
- Aparte fonts zijn leuk, maar ééntje is voldoende voor het web.
De Websitewinkel in Rotterdam ontwerpt zowel voor de digitale wereld als de papieren wereld. Wij weten aan welke voorwaarden beiden moeten voldoen en begeleiden je naar het gewenste resultaat. Zonder gedoe!