From desktop designs to five years in production

From an existing frontend to my own responsibility

Factif was an online agency in Deventer. My internship ran from September 2018 through January 2019 and began in the existing frontend templates of ShopMaster, the e-commerce platform Factif used for clients. Part of that work was the migration to Foundation.

After roughly six to eight weeks I was also entrusted with the frontend of the new Factif website. This was early in my development: I had written my first line of code at the start of 2018 and had about one year of programming experience at the time.

From desktop designs to a responsive frontend

Desktop designs were supplied for the corporate website. I built the complete frontend across six page types: homepage, blog index, blog detail, contact page, work index and work detail. Foundation provided the layout base and I used jQuery for interactions.

There were no tablet or mobile designs. For each page I determined how the grid should narrow, which elements should stack and how text and images would remain readable. That included less conventional compositions such as the angled client-work surface and a work index containing more than thirty image tiles.

The content came from ShopMaster CMS. The frontend therefore had to work not only with the sample content in the designs, but also with longer titles, shorter copy and new projects added by other people later.

• The visual design was supplied. My responsibility was the complete frontend implementation and its responsive behaviour.
• The CMS and backend as a whole, SEO and the website content were outside my responsibility.

When the problem is not in the CSS

The blog index design called for grouped sections with cards in different sizes. ShopMaster exposed the relevant content as one flat sequence of p elements, without wrappers or section boundaries on which I could responsibly base the layout.

I first investigated whether the missing structure could be derived in the frontend. When it became clear that this would not be reliable, I discussed it with the backend team. They adjusted the CMS output, after which I could implement the intended layout cleanly. The solution was not more CSS, but better structure at the source.

From internship to paid production work

After the internship I continued at Factif part-time as a junior frontend developer until September 2019. I worked on client interfaces and existing websites during that period.

This included the complete frontend of Sufficio, a 2019 client website organised around five modules. No usable archive image of that website has survived. This paid client work followed the internship, but it was separate from the Factif corporate website at the centre of this case study.

Approximately five years in production

Factif.nl went live in the second half of 2018 and was replaced in the second half of 2023. The frontend was therefore its corporate website for approximately five years.

The archive images date from near the end of that production period, when managed content such as a homepage news image was missing. I do not fill such gaps with material whose origin can no longer be verified.

The images show the implemented frontend structure and page types. They do not reconstruct responsive states and are not an exact capture of the website on the day it was delivered.

• The images are historical production captures, not current design proposals.
• They support my frontend implementation, not the visual design, the complete CMS/backend or other disciplines.