Melanie Daveid | Examples | Responsive Web Design

Melanie Daveid

Melanie Daveid site seen across four breakpoints
Melanie Daveid across four different breakpoints

View Melanie Daveid

Melanie uses SVG for the header to create the hand, shadows and even the lovely cursive writing for her name.

The performance of the site pretty good with a load time of 3s on a LTE connection however there are a few things which could be done to speed this up even further. That includes

  • Concatenating all of the JS files into a single file
  • Enabling Gzip compression on the server
  • Running on H2 (requires HTTPS as well which is certainly not a bad thing)

There’s also no caching on the site at all at the moment, so any subsequent views of the site requires a full download of everything again. This isn’t so bad for a single page site, however, it’s certainly something that could speed the site up a little. This is also a perfect candidate for Service Workers as well, allowing the site to be viewed in offline conditions as well.

Respond.js is being used on the site as well which I’m not a fan of anymore, I think we’re past the stage where we need to enforce media queries on non media query supporting browsers and just let them fall back to the single tube of content.

Melanie Daveid Technical Details

Site Meta Tag

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0"/>

Media Queries

@media (min-width:1px) { }

@media (min-width:768px) { }

@media (min-width:992px) { }

@media (min-width:1200px) { }

@media (min-width:1px) and (max-width:767px) { }

@media (min-width:768px) and (max-width:991px) { }

@media (min-width:992px) and (max-width:1199px) { }

@media (min-width:1200px) and (max-width:999999px) { }

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.