The Technology Behind the Mäd Website. A Quick Glimpse of What's Under the Hood

Scroll this

In our announcement post of our new website redesign, we promised a case study in our we managed to make our website fast.

Starting with the right understanding of our user needs.

At Mäd, we always think about user needs first. This is key in building products and services that people love to use. For our own website, we have a wide variety of users:

  • General visitors –  who enjoy reading our content, but are not likely to buy any services or products from us.
  • Potential customers –  who may or may not currently be in contact with our representatives.
  • Our own content team – who need to update content, publish and schedule new case studies and posts, and build landing pages.
  • Google & Other search engines – they need to be able to easily crawl our content, and understand our website to show us in the most relevant searches.

Understanding what we want.

Firstly, we need a home on the web for our portfolio, and for potential clients to find out more information about us. That is why we place Case Studies first and foremost. We use plenty of images and intellectually driven long form content, which then drove the direction of our typographical decisions of having relatively large text in a single column layout.

Our clients hire us because we are able to solve difficult problems, not low-hanging fruits. It goes without saying that our website needs to reflect this trait. If the challenge of keeping an internal blog up to date or writing about our work is too much, then how can we honestly say that we are able to do this for our clients?

We wanted to get rid of the habit of creating PDF case studies that soon get out of date every time we want to change something. Hence, our website is now our main presentational tool. Try it yourself: got to full-screen mode in your browser for any case study, and it will feel like a presentation. So now we have all our presentations up to date with our latest branding, updated with the latest content, all at a moment’s notice.


Technology

We are very much a design driven company, but of course, technology plays a big part of many of the projects that we do. Our software stack for this project had to meet the following criteria:

  • As maintenance-free as possible.
  • Super stable: a website outage for is out of the question.
  • Easy for our content team to craft the content as they wish.

So for this project, we built our stack on a Digital Ocean server linked to ServerPilot using both Apache (for the backend) and NginX (for the frontend) as server software, using WordPress as our CMS (Content Management System).

This gives us a solid foundation for a fast, beautiful website, and a great separation between content management, DevOps, and visual design changes.

Image Optimisation

This is something that we currently do manually, but it is well worth the effort. We love to include images in our posts, though they take up the majority of the size of web pages.

You can see below how we reduced an image in our Naga Case Mobile UI Study from 840kb to 101kb. Consequently, we reduced the file size by 87.5%, for no discernable loss in quality. We do this by simply switching from PNG to JPEG and at approximately 60% quality setting on export.

This makes a huge difference, especially on mobile devices where bandwidth is sometimes limited.

Instant Click

This is an amazing bit of technology that enables us to decrease the perceived load time of our website. The website loads the next page as you hover over the link, even before you clicked it! This is the equivalent of getting a head start during a race, and we usually get between 200ms to 500ms of time during the hover where we can download the page content before displaying it, thus giving the illusion that the next page has loaded instantly.

We take this even further in our full-screen main menu by actually extending the clickable area to outside of the menu item and across the page width. As a result, the loading starts even earlier as the mouse cursor actually touches the link, even before the user has navigated to the link they want to view. This gives us a further 300ms-500ms to start loading the page.

Fade-in Text

As you might have noticed while reading this post, we fade in the page content as you scroll down the page. While this doesn’t technically improve the speed of loading the content (as we load the full page anyway), it does provide the user with a smooth transition as the user reaches the text.

Images Load from a Subdomain

If you take a look at the source code of our website, you’ll notice our images are served from subdomains such as http://cdn1.mäd.com and http://cdn2.mäd.com.

 

This ensures that on pages, such as this case study,  that have lots of images, can load even faster. The subdomains allow the browser to download more images simultaneously, instead of only downloading 2 or 4 at a time, which is the normal behavior if all the images are from the same domain. Each subdomain is treated as a separate entity. As such, we increase the multitude of images that can be downloaded simultaneously.

The icing on the cake is that we actually run these websites through Cloudflare, which is a CDN (Content Distribution Network). It means that we have copies of our images stored in dozens of locations worldwide to ensure fast delivery, anywhere in the world.

Clever Image Loading Techniques

Even with the above steps, sometimes our posts still have so many images that it’s unlikely that they will all load right away. So to ensure that user still has a great experience, we took inspiration from Medium, and decided that we show a blurred preview of our images while we wait for the page to load the beautiful full-size versions. Check it out how they do it on there:

 

 

We thought that this was not only really cool, but absolutely required on a site like our own. We are then able to showcase full-screen images and put a lot of graphics in our posts. Our homepage is especially full of images, so we implemented this effect.

This allows us to load initial images which are less than 1kb (yes, that’s not a mistake!) in size, and then stretch them and blur them to create an aesthetically pleasing effect. When the full-size images are ready, we apply a transition and fade effect and the full-size image comes through.

Conclusion

We know that our website reflects our brand identity and culture. For this reason, we invest a lot of time and thought into creating a website that is fast, lean and relevant. We carry this attitude of discipline to all the websites we create for all our clients.

Scroll Up