StudioBySmart

Als nieuwe studio had ik nog geen portfolio, dus de website zelf moest laten zien wat ik kan. De eerste versie zat daarom vol effecten: een eigen cursor, een preloader, korrel over het beeld, een meebewegende bol en een draaiende badge.

As a new studio I had no portfolio yet, so the website itself had to show what I can do. The first version was full of effects: a custom cursor, a preloader, film grain, an orb that followed the mouse and a spinning badge.

Leuk om te bouwen, maar het werk zelf kwam er niet goed door. En toen er echte klantprojecten bij kwamen, was dat precies wat er moest gebeuren.

Fun to build, but the work itself didn't come through well. And once real client projects arrived, that was exactly what needed to happen.

Een audit liet zien dat Google de site slecht kon lezen. Alle verwijzingen gingen naar het domein zonder www, terwijl de site op www draait, en Google kreeg de Engelse versie te zien in plaats van de Nederlandse.

An audit showed that Google struggled to read the site. Every reference pointed to the domain without www, while the site runs on www, and Google was shown the English version instead of the Dutch one.

De afbeeldingen waren samen ruim 80 MB, met mockups van 6 tot 7 MB voor kaartjes van een paar honderd pixels breed. Op de werkpagina stonden dezelfde vier projecten twee keer. En op de telefoon viel het menu deels buiten beeld.

The images added up to over 80 MB, with 6 to 7 MB mockups for cards a few hundred pixels wide. The work page showed the same four projects twice. And on phones the menu partly fell off the screen.

Ik heb gekeken naar studio's die ik zelf sterk vind en de site teruggebracht tot de kern: het werk voorop, veel ruimte, één vaste maatvoering voor alle witruimte en teksten die zeggen wat ik doe en voor wie.

I looked at studios I admire and brought the site back to its core: the work first, plenty of space, one fixed scale for all spacing and copy that says what I do and for whom.

De effecten zijn eruit. De paginaovergangen bleven, maar nu ingebouwd in de browser in plaats van via een JavaScript-bibliotheek.

The effects are gone. The page transitions stayed, but now built into the browser instead of running on a JavaScript library.

Het menu valt nooit meer weg: het scrollt als het niet past, toont welke pagina actief is en heeft onderin direct een knop om een project te starten. De taalknop staat nu ook op kleine schermen.

The menu never falls off the screen anymore: it scrolls when it doesn't fit, shows which page is active and has a button to start a project right at the bottom. The language switch is now on small screens too.

Bij de oplevering van het herontwerp ging de JavaScript van 189 KB naar 17 KB. Met alles wat er daarna bij kwam, zoals de pakketkeuze, de agenda, bijlagen in het formulier en de interacties op de over-pagina, is het nu 34 KB: nog altijd 82% minder. De lettertypes worden zelf gehost, zodat er geen bezoekersgegevens naar Google gaan.

When the redesign shipped, JavaScript went from 189 KB to 17 KB. With everything added since, like the package choice, the calendar, attachments in the form and the interactions on the about page, it is now 34 KB: still 82% less. The fonts are self-hosted, so no visitor data goes to Google.

Verder: nette URL's zonder .html, Nederlands als standaardtaal voor Google, structured data, een sitemap en een automatische controle die bij elke wijziging titels, links, afbeeldingen en gedeelde onderdelen nakijkt voordat er iets live gaat.

Plus: clean URLs without .html, Dutch as the default language for Google, structured data, a sitemap and an automatic check that reviews titles, links, images and shared parts on every change before anything goes live.

Een aanvraag komt nu binnen als ontworpen e-mail vanaf mijn eigen domein, met alle gegevens op een rij en een knop om direct te antwoorden. De bezoeker krijgt meteen een bevestiging in mijn huisstijl, met een samenvatting en de volgende stappen. Valt de mailservice ooit uit, dan neemt een reserveroute het over, zodat er nooit een aanvraag verloren gaat.

A request now arrives as a designed e-mail from my own domain, with every detail in a row and a button to reply straight away. The visitor instantly gets a confirmation in my house style, with a summary and the next steps. If the mail service ever goes down, a backup route takes over, so no request is ever lost.

Alle titels en beschrijvingen zijn op de pixel afgestemd op Google, en elke pagina heeft een eigen deelplaatje voor WhatsApp en LinkedIn.

Every title and description is tuned to Google's limits down to the pixel, and every page has its own share image for WhatsApp and LinkedIn.

Een mooie site is pas het begin. Daarom kwam er direct een tweede ronde bij: vaste pakketten met prijzen, een formulier dat vraagt welk pakket past, en een knop om zelf een kennismaking in mijn agenda te plannen. Die agenda opent in een venster op de site, en Google laadt pas iets na de klik. In het formulier kun je nu ook je bedrijf en huidige website invullen en tot drie bestanden meesturen, zoals een briefing of je huidige logo.

A good-looking site is only the start. So a second round followed right away: fixed packages with prices, a form that asks which package fits, and a button to book an intro call in my calendar. The calendar opens in a window on the site, and Google only loads after the click. The form now also takes your company and current website, and up to three files, like a brief or your current logo.

Daarnaast een paar kleine interacties die iets laten zien in plaats van alleen te bewegen: een schuif om voor en na te vergelijken, een schakelaar die de combikorting uitrekent, een route die meekleurt terwijl je scrolt en een 404-pagina met briefjes die je kunt verslepen.

Plus a few small interactions that show something instead of just moving: a slider to compare before and after, a toggle that works out the combination discount, a route that fills as you scroll and a 404 page with notes you can drag around.

De over-pagina was een rijtje feiten met een tijdlijn. Nu vertelt hij in zeven hoofdstukken hoe ik via retail, horeca, sport en klantenservice bij design en development kwam, en waarom de studio bewust klein en persoonlijk is.

The about page used to be a list of facts with a timeline. Now it tells, in seven chapters, how I got to design and development via retail, hospitality, sport and customer service, and why the studio is deliberately small and personal.

Elk hoofdstuk heeft één kleine interactie die het punt laat zien in plaats van het alleen te vertellen. Zet design, technologie of mensen uit en je ziet wat er misgaat. Stuur een idee door vijf lagen en het komt aan als “Template 4, maar dan blauw”. En wie de eerste kennismakingsvragen alvast beantwoordt, vindt die antwoorden terug in het contactformulier.

Every chapter has one small interaction that shows the point instead of only telling it. Switch off design, technology or people and you see what goes wrong. Send an idea through five layers and it arrives as “Template 4, but in blue”. And anyone who answers the first intro questions finds those answers waiting in the contact form.

Een strikte beveiliging laat alleen scripts toe die ik zelf heb goedgekeurd, en zeven beveiligingsheaders staan op elke pagina. Het contactformulier controleert waar een aanvraag vandaan komt, remt herhaalde pogingen af en houdt spam tegen. Bijlagen worden in de browser en daarna nog eens op de server gecontroleerd.

Strict security only allows scripts I approved myself, and seven security headers sit on every page. The contact form checks where a request comes from, slows down repeated attempts and keeps spam out. Attachments are checked in the browser and then again on the server.

Ook de regels zijn netjes geregeld: een privacyverklaring in gewone taal, geen cookies en dus ook geen cookiemelding, prijzen duidelijk voor zakelijke klanten en algemene voorwaarden die de rechten van consumenten respecteren.

The rules are taken care of too: a privacy statement in plain language, no cookies and therefore no cookie banner, prices clearly stated for business clients, and terms that respect consumer rights.

Het herontwerp staat sinds 4 oktober 2026 live, de tweede ronde en het nieuwe verhaal sinds 5 oktober. Diezelfde dag ging de hele site langs een vaste checklist: alle pagina's op drie schermbreedtes, de doorverwijzingen, de beveiliging, het formulier en elke interactie.

The redesign has been live since 4 October 2026, the second round and the new story since 5 October. That same day the whole site went through a fixed checklist: every page at three screen widths, the redirects, the security, the form and every interaction.

Lighthouse geeft 100 voor SEO, toegankelijkheid en best practices op alle elf pagina's, op mobiel en desktop. Snelheid: 100 op desktop, 98 tot 100 op mobiel.

Lighthouse scores 100 for SEO, accessibility and best practices on all eleven pages, on mobile and desktop. Speed: 100 on desktop, 98 to 100 on mobile.

Elke wijziging gaat voortaan via een vaste route: eerst een automatische controle op titels, links, afbeeldingen, teksten en beveiliging, dan een testversie, en pas daarna live.

Every change now follows a fixed route: first an automatic check of titles, links, images, copy and security, then a preview version, and only then live.