Naar inhoud
Werk
Historische case
  • Factif
  • Bedrijfswebsite
  • 2018–2019

Van desktopontwerp naar vijf jaar productie

Mijn stage begon in de bestaande ShopMaster-frontend. Na ongeveer zes tot acht weken kreeg ik de volledige frontend van Factifs nieuwe bedrijfswebsite toevertrouwd: zes paginatypen uitwerken vanuit aangeleverde desktopontwerpen, inclusief het responsive gedrag voor tablet en mobiel.

Archiefbeelden van de gerealiseerde Factif-website

Van bestaande frontend naar eigen verantwoordelijkheid

Factif was een online bureau in Deventer. Mijn stage liep van september 2018 tot januari 2019 en begon in de bestaande frontendtemplates van ShopMaster, het e-commerceplatform dat Factif voor klanten gebruikte. Ik werkte daar onder meer aan de migratie naar Foundation.

Na ongeveer zes tot acht weken kreeg ik ook de frontend van de nieuwe Factif-website toevertrouwd. Dit was vroeg in mijn ontwikkeling: begin 2018 had ik mijn eerste regel code geschreven en ik had op dat moment ongeveer een jaar programmeerervaring.

stageShopMasterFoundation

Van desktopontwerp naar responsive frontend

Voor de bedrijfswebsite waren desktopontwerpen aangeleverd. Ik bouwde de volledige frontend van zes paginatypen: homepage, blogoverzicht, blogdetail, contactpagina, werkoverzicht en werkdetail. Foundation vormde de layoutbasis en voor interacties gebruikte ik jQuery.

Ontwerpen voor tablet en mobiel waren er niet. Per pagina bepaalde ik waar het grid smaller werd, welke onderdelen onder elkaar kwamen en hoe tekst en beeld leesbaar bleven. Dat gold ook voor minder gewone composities, zoals het gekantelde vlak met klantwerk en het werkoverzicht met ruim dertig beeldtegels.

De inhoud kwam uit ShopMaster CMS. De frontend moest daarom niet alleen kloppen met de voorbeeldcontent uit het ontwerp, maar ook met langere titels, kortere teksten en nieuwe projecten die later door anderen werden toegevoegd.

  • Het visuele ontwerp was aangeleverd. Mijn verantwoordelijkheid lag bij de volledige frontendimplementatie en het responsive gedrag.
  • Het CMS en de backend als geheel, SEO en de inhoud van de website vielen niet onder mijn verantwoordelijkheid.

Wanneer het probleem niet in CSS zit

Bij het blogoverzicht vroeg het ontwerp om gegroepeerde secties met kaarten van verschillende afmetingen. ShopMaster leverde de relevante inhoud als één vlakke reeks p-elementen, zonder wrappers of sectiegrenzen waarop ik de layout verantwoord kon baseren.

Ik onderzocht eerst of de ontbrekende structuur aan de frontendkant kon worden afgeleid. Toen bleek dat dit niet betrouwbaar kon, besprak ik het met het backendteam. Zij pasten de CMS-output aan, waarna ik de bedoelde layout schoon kon implementeren. De oplossing was dus niet meer CSS, maar betere structuur aan de bron.

Van stage naar betaald productiewerk

Na mijn stage bleef ik tot september 2019 parttime bij Factif werken als junior frontenddeveloper. Ik werkte toen verder aan klantinterfaces en bestaande websites.

Daaronder viel ook de volledige frontend van Sufficio, een klantwebsite uit 2019 die was opgebouwd rond vijf modules. Van die website is geen bruikbaar archiefbeeld bewaard gebleven. Dat betaalde klantwerk volgde op de stage, maar stond los van de bedrijfswebsite van Factif die in deze case centraal staat.

Ongeveer vijf jaar in productie

Factif.nl ging in de tweede helft van 2018 live en werd in de tweede helft van 2023 vervangen. Factif gebruikte deze frontend daarmee ongeveer vijf jaar als bedrijfswebsite.

De archiefbeelden dateren van het einde van die productieperiode, toen beheerde inhoud zoals een nieuwsafbeelding op de homepage ontbrak. Ik vul zulke gaten niet aan met materiaal waarvan de herkomst niet meer te bewijzen is.

De beelden tonen de gerealiseerde frontendstructuur en paginatypen. Ze reconstrueren geen responsive toestanden en zijn geen exacte opname van de website op de dag van oplevering.

  • De beelden zijn historische productiebeelden, geen actuele ontwerpvoorstellen.
  • Ze onderbouwen mijn frontendimplementatie, niet het visuele ontwerp, de volledige CMS/backendbouw of het werk van andere disciplines.
Samenvatting

Aangeleverd desktopontwerp, volledige responsive frontend.

De Factif-website was een vroege productieopdracht met een duidelijke grens: het ontwerp en de inhoud kwamen van anderen, terwijl ik de frontend bouwde, het responsive gedrag bepaalde en technische blokkades tot aan de juiste systeemgrens onderzocht. De website bleef ongeveer vijf jaar in gebruik.