Before we moved in to our new offices in 2014, we quickly set up a temporary one-page website, initially only in Dutch. It lasted for 4 years and bursted out of its frames ever since, because… hmm … no priority, no time. A new site was like a running joke for a long time, until Laracon US 2018 offered us the perfect deadline to finally get this thing out.

At the base of the new site navigation lies the urge to better communicate what we really (like to) do these days. From a web design agency that tinkered with Laravel a few years ago, it's obvious nowadays that this is where our heart and future lies: custom web development in Laravel, and open sourcing as much as we can. We want to take on bigger and more complex projects. The navigation should be rather clear about this.

The setting

Mountains

Using nature photography worked really well before. It's perfect to balance out the cold technology we work with. We're based in Antwerp, one of Europe's larger harbors, so the reference to water and sea where previously an obvious choice. This time I wanted to focus more on our solid expertise and craftsmanship and switched to a mountain theme.
 Although this setting has been used a lot elsewhere, I think it still delivers a great story. The washed-out backgrounds should be recognizable for anyone that has spent some time in the mountains and bring memories of freedom, difficult roads with great rewards, and endless possibilities. It's fun to play with these images to support our message. Eg. have look at the interns background vs. that of a vacancy. The custom graphic on the web development page further works on this setting. I'd like to do more of these and replace the Font Awesome icons one day.

All images were found on unsplash.com.

Typography

We already used Gotham as our corporate identity font. This time it is accompanied by a serif font —Chronicle Display— for the headlines and titles of the outro sections. 
Chronicle Display gives some weight to the bold statements and should underline our expertise. It furthermore adds a magazine feel to the longer pages and catches the attention in the CTA phrases.

More fine fonts can be found on typography.com.

Content

Because of our growing international audience, this time we started out in english. We'll have to evaluate if a translation to Dutch is still worth the pain. 
The copy is more engaging and self-confident, but not too serious. It again emphasizes our quality of work and eagerness to work on bigger projects.

Because we don't want to use cookies we stayed away from intake forms for now. 
All call-to-actions are simple 'mailto' links with prefilled subjects and body. If someone really looks forward to working with us, they'll know how to find us.


Responsive images

As Freek pointed out before, the images are making use of our medialibrary option to work with scrset variations. By starting with an sizes attribute of 1px, we use the smallest inline src as blurry placeholder. When the placeholder is rendered, we swap this sizes value with the real width of the image, thus making a request for the larger version.


In this case we needed to perfect this technique in 2 cases.

Firstly, we’re using object-fit: cover on some images to fill out their responsive container (like a background). The dimensions of the required image are therefore a bit more complex to calculate: you have to take the aspect ratio of both the image and that of the container into account. 


Secondly, this page has a lot of postcards and was still heavy. We implemented Intersection Observer for the srcset images so they lazy load only when visible on the page.

Thank God we have Sebastian who helped me out with the actual code to implement these features.

See all code on GitHub.

CSS

As in all our recent projects, Tailwind CSS and PostCSS are used, but this time I wanted to bring CSS variables and CSS grid in the mix. Firstly, Tailwind responsive grid helpers are created. These can then be applied and modified by components.

/* grid.css — grid helper classes */
:root {
    --cols: 1fr;
    --rows: 1fr;
}


@responsive {
    .grid {
        display: grid;
    }

    .grid-template {
        grid-template: var(--rows) / var(--cols);
    }
	
    …
}


/* wrap.css — the postcard part */

.wrap-gallery {
    @apply grid grid-template gap-0;

    --cols: repeat(auto-fill, minmax(10rem, 1fr));

     @screen sm {
        --cols: repeat(auto-fill, minmax(16rem, 1fr));
     }
}

Grid is really powerful for these kind of layouts. With a simple repeat(auto-fill, …) pattern you can cut down on traditional media queries.


We are lucky to have a tech-savvy audience. Usage of IE11 and below was 0.8% for the previous year (hat tip to the 2 IE7 visitors). For the few IE11 users, I still wanted to present a clean experience. All grid content is laid out in 1 column with following simple CSS rule and I use @supports for the rest of us.

/* wrap.css — grid fallback in 1 column */

.wrap{
    & > :not(:first-child) {
        @apply mt-8;
    }
}

@supports(display:grid) {
    .wrap{
        @apply grid;

        & > :not(:first-child) {
            @apply mt-0;
        }
    }
}

In conclusion

Building something for yourself is always the hardest. I'm glad our site is in full shape again to be built upon for the next years. Already on the list:

• Adding real case studies
• Adding more custom graphics and illustrations

Let us know what you think!