While working on the navigation for a project recently, I had the want/need to do something like this:
Nothing ground-breaking or cutting edge here (and certainly not meant to solicit ooohs and ahhhs from the gallery), yet when faced with a little challenge such as the design above, I do my best to make things as bulletproof as possible.
Humor me, while I elaborate.
In the field of web site design, there is rarely a solution that is 100% bulletproof–but just as an officer straps a Kevlar® vest on–being bulletproof isn’t something that is guaranteed, but rather something that is strived for continuously. Measures that can be taken to protect your designs.
What do I mean by bulletproof? I’m referring to designs that are as fast, flexible and accessible as possible. Designs that take into account the multitude of devices and browsers that may be reading them–as well as the flexibility that’s important in order for the user to be in control. Relative text sizing would make for a nice example.
In trying to avoid the term “best practice”, I’d classify bulletproof design as being “good practice” within the world of web standards.
To summarize, I see bulletproof design consisting of the following ingredients:
- Lean, valid markup
- CSS-based design
- Consideration for accessiblity
- Consideration for flexibility
A few prime examples of bulletproof design out in the real world:
- How to Size Text Using ems — A fine example of using em units for relative text sizing.
- The Sliding Doors of CSS — Image-like results for navigation, with flexibility as a key component.
- Elastic Design — Designs that expand and contract entirely, along with text size that the user controls.
- Mountaintop Corners — Tooting my own horn, yes. Definition lists that are turned into resizable rounded boxes.
The preceding are just a few of the “good practices” that I’m referring to. And now that I’ve rambled a bit, let’s get back to the slant-astic navigation that was introduced much earlier.
Slants That Grow
Keeping in mind my bulletproof yearnings, to create slant-separated navigation, I found a simple solution that fulfills the fast, flexible and accessible criteria.
The solution requires just a single, small GIF image that will be used as a
background for each navigation link included in a nice, neat, unorderd list. This image (pictured right) is transparent, and about twice as tall as we’ll need it to be.
By assigning this little image as a
background to each
a element, giving enough
padding to the right side of each link, and aligning the image
top right, we’ll be revealing only as much of the image as we need (see the following figure). Any excess will be hidden–but ready and waiting should the text be resized by low-vision users.
Should the user wish to resize the text (even several notches larger), more of the slanted image is revealed, with the angle of the slant continuing along the same plane. This ensures that the design of the navigation will scale along with the text (see the final figure).
Conversely, the navigation can also be scaled down the opposite way, with more of the image being obscured. I suppose if people like to squint… It’s because of this flexibility that we can use a relative
font-size, sleeping well at night knowing the design will remain intact, regardless of the browser or device.
See it in Action
A live example with sourcecode is available to see all the pieces fitting together. Try resizing your text up and down to get the full effect.
Again, this stuff is not earth-shattering. But a good excuse for me to jot down some thoughts on “bulletproof design”–helpful techniques that mix standards, design challenges and flexibility into the simplest solution possible.