Last week, we announced the launch of the new Johnson Deconstruction website. The site uses a lot of really cool features that make it really responsive. Check it out on all of your devices, mobile to desktop!

Lately, I’ve been brushing up on the practical use of inline SVG (scalable vector graphics) on the web, since every current version of every modern web browser now supports the use of them. With some safety-net fallback images for older browsers (mostly IE), a website can achieve total resolution independence – meaning nothing will degrade visually based on your level of zoom or the pixel density of your screen.

Johnson Deconstruction websiteJohnson
Deconstruction
website
Johnson Deconstruction website

Another great advantage of SVG is the file size, which we all know is drastically lower when it comes to raster vs. vector images. This is compounded by the fact that true inline SVG is just more markup code on the HTML page, which means no extra HTTP requests to load images. This also means (in this case) that we don’t have to detect a retina display, since we’re always getting an ideal look from the vector data.

Johnson Deconstruction website on a mobile deviceJohnson
Deconstruction
website on a
mobile device

The Johnson Deconstruction site is built completely with inline SVG – no raster-based images whatsoever. The site is also one of the most dramatic examples of the use of CSS meta-query breakpoints that we’ve created on a publicly released site. All of this makes the site extremely efficient and responsive, while ensuring that everyone has a great-looking experience.

On larger, more complex sites, there will always be a need for images which SVG simply cannot replace. Be that as it may, mixing in SVG for line art elements such as logos and other visuals can be a huge step forward for presenting a clean look to any device at minimal cost, both in implementation time and bandwidth usage.

View the project page for Johnson Deconstruction.