You are here

Responsive Emails, SVG on the site!

At long last, we had time to update some of the graphics and CSS driving the site and email design; for a very long time, emails would extend beyond the bounds of smaller device screens, making for a frustrating side-scrolling experience on mobile.

Additionally, way back when the original version of this site was designed, SVG files were not well supported in all browsers, so we used a 'poor man's retina compatibility mode' by uploading a few double-resolution PNG files for certain graphics... meaning things looked sharp on high-res displays, but the Server site would take a little longer to load—never a good thing for a service that holds itself to a standard of speed and simplicity!

So for emails, we futzed with the one-column layout to make them completely responsive, meaning you can read the email on the smallest mobile device or a giant 5K display, with no need for scrolling.

And for the site, we regenerated all the vector graphics as SVGs instead of double-resolution PNGs. The results of this change are pretty dramatic—average page load time went from 1.3s (for 156KB of assets) to 1.0s (for 89.4KB of assets).

That's a 50% reduction in data, and almost the same reduction in page load time!

If you have a site that still uses rasterized graphics where you could be using SVGs, consider taking the plunge and converting all the graphics—all modern browser now support SVGs very well, and there's really no reason to use GIF, PNG, or JPEG if you don't have to!

This is a blog post from Server, a website and server uptime and performance monitoring service. Sign up for Server to know when your server is down.

Subscribe to RSS - Server Blog