Building a pattern library: wobbly boxes (part 1)
One of the biggest challenges of the UI design of the Marie Curie website came from the brand's graphic assets. These included a selection of irregular shapes, framing devices and keylines that helped to make up the charity's new visual identity. Another challenge was the colour palette — mainly yellow and orange, not ideal for creating accessible contrast levels in the user interface.
The wobbly box
The most widely used graphic asset the refreshed Marie Curie visual identity is a an irregular shaped yellow frame. The frame was developed to help people easily identify a Marie Curie piece of communication, particularly in medical situations, where they are sometimes mistaken for NHS literature.
The yellow frame works when the piece of communication is rectangular – leaflets, posters, social media etc. but it was harder to translate the frame to the fluid layout of the Marie Curie website. One option was to invert the frame and use it as a simple container for content across the site. This retains the colour and the shape – key to maintaining consistency, but eliminates the need for a rectangular container, providing the fluidity needed on a responsive website.
Because the wobbly box was (as the name suggests) an irregular shape, this could only be achieved using background images. The box device also had many potential applications, from separating sections of content, to calls to action. This posed a risk to performance and ongoing maintenance, as the site could easily end up using many background images of multiple sizes and colours for different use cases, not to mention getting images to render consistently over a wide range of screen resolutions.
Therefore, to create a robust UI pattern for the Marie Curie website, there were a number of things the wobbly box needed to do:
- Stretch to the full width and height of a container
- Have crisp edges with no fuzziness on high pixel density displays
- Be easy to change the background colour
- Not rely on multiple background images
- Be cross browser compatible back to IE 10 and provide a nice fallback for older browsers
Scaling SVG background images
I opted to use SVG images because (being vector based) I thought they could fulfill the first two requirements; scaling the width and height of any given container, while retaining the crisp lines of the wobbly box graphic on high pixel density displays. Initially I assumed I’d be able to use an SVG
background-image property with
background-size: 100% to stretch the SVG image to the size of the container.
However, I quickly discovered that SVGs don’t stretch beyond their natural aspect ratio. You need to delve into the SVG markup1 and reset the aspect ratio using the
preserveAspectRatio attribute is set to none, the SVG background will stretch out of its orginal aspect ratio to fill the container. This fulfills the first and second requirement of the wobbly box pattern. And it’s supported in the latest versions of Chrome, Safari and Firefox2 and in IE 9+.
Changing the background colour
The third requirement for the wobbly box pattern was to have an easy way to modify the background colour — ideally by adding or switching a class. When you use SVG images inline with your HTML markup you can use CSS to manipulate the fill colour. Unfortunately this isn’t an option when importing SVGs using the
background-image property in CSS. Instead I opted to make a sprite of my SVG, containing a path for each of the colours I wanted to use, then I manipulated the
Reducing HTTP requests
Having fulfilled the first three requirements, I wanted to make sure my pattern was as fast to load as possible. Although it was only making a single HTTP request, I removed the need for the extra request by embedding my SVG image data directly into my CSS3 using data URIs. And, if you’re using Sass, there is a Compass helper that will encode your image file automatically.
Inline data URIs don’t decrease the size of your image file, you’re just moving data that would be requested seperately into your compiled CSS file, so be sure to optimize your images4 as much as possible before converting. Data URIs are supported in the latest versions of Chrome, Safari and Firefox and in IE9+.
Setting fallbacks and print styles
Finally I used Modernizr to provide a simple fallback for browsers that don’t support SVG by applying a
background-color. I also added a print reset, which removes images and background colours when printed.
There we have our wobbly box — a flexible container pattern using a vector based background image. It scales to the size of the content, it’s easy to switch the colour, there are no additional HTTP requests and there is a graceful fallback for browsers without SVG support.
I’ve subsequently developed this pattern further, replacing Base 64 encoding with URL encoding. This gives you the option to manipulate the background colours using Sass functions, which I discuss in part 2 of this post.
- More information about creating and optimising SVGs, Using SVG, CSS Tricks.
- Firefox requires you to declare both the width and height values for the
- I’ve since revised my thinking on Base 64 encoding as discussed in part two of this post.
- Some handy SVG optimisation tools SVG Editor, Peter Collingridge, SVG OMG, Jake Archibald.