CSS Techniques Used While Redesigning Notable

This past Wednesday marked a memorable day for ZURB and the people that love the products we make. We worked hard for a couple months to completely redesign Notable. One of the reasons we redesigned Notable was customer pain points. We wanted Notable to be easier and more useful for anyone who tries it. We also wanted to create a visual style that would make Notable feel more professional and elegant.

One of the big opportunities we had with the relaunch was utilizing CSS3 techniques that gracefully degrade for older browsers. Graceful degradation is a phrase that has been around for awhile. In the realm of web design, it simply means designing for the newest browsers first and providing fallbacks for older, less awesome browsers. We used this idea and designed Notable for newer browsers first, while keeping the older guys in mind.

@font-face is the Cool Kid on the Block

For years designers were forced to use images for unique typography on the web, but these days the gloves are off. We can use tools like TypeKit or Font Squirrel and get access to a boatload of fonts to incorporate into our designs. While redesigning Notable, we fell in love with the font Proxima Nova. Proxima is like the next generation of Helvetica; it has the same great structure, but with more varying line thicknesses.

The awesome thing about @font-face, when used correctly, is the fact that it works across almost all browsers, even IE6! This enables us to fine-tune our typographic choices and know that almost everyone is seeing the same thing.

CSS Triangles FTW

Another nifty CSS3 technique we used in Notable was CSS triangles. A triangle in CSS? Yeah... you heard me right. We learned about this technique awhile back and didn't know how useful it would be. After a night of toiling away with some code, we were able to come up with an elegant sidebar navigation that only used one image! The entire list is built with CSS, except for the shadow to the right.

What is a CSS triangle you ask? Well it's basically an element with a width of 0 and a certain border property that creates the effect. The key here is making 3 of the borders transparent so they clip off the edges of the opaque border and create a triangle. The great thing about using triangles is that older browsers still get a nice looking sidebar in Notable, just without the flourish of the triangles to create the arrow. This doesn't affect usability and most users won't even realize they are missing it if they are in an older browser.

Here's the HTML and CSS needed to pull of the Notable sidebar navigation.

The HTML

1. <div class="side-nav-wrap orange">
2. <ul class="side-nav">
3. <li><a href="">Dave Gamache</a></li>
4. <li class="selected">
5. <span class="flag orange"></span>
6. <a href="">Jonathan Smiley</a>
7. <span class="arrow orange"></span>
8. </li>
9. <li><a href="">Matt Kelly</a></li>
10. <li><a href="">Tanya Breshears</a></li>
11. <li><a href="">Chris Michel</a></li>
12. <li><a href="">Anthony Tadina</a></li>
13. </ul>
14. </div>

The CSS:

1. .side-nav-wrap { height: 100%; display: inline-block; }
2. .side-nav { padding-bottom: 20px; margin-bottom: 30px; list-style: none; }
3. .side-nav li { margin-bottom: 10px; }
4. .side-nav li a { padding: 2px 0; display: inline-block; text-decoration: none; }


5. .selected { position: relative; }
6. .selected > a { padding: 6px 15px 6px 30px !important; margin-right: 6px; margin-left: -27px; color: #fff !important; -moz-box-shadow: 2px 3px 4px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 2px 4px 3px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255,255,255,.5); box-shadow: 2px 3px 4px rgba(0, 0, 0, 0.1); font-weight: bold; width: 199px; }


7. /* flag triangle */
8. .flag { display: none; position: absolute; left: -26px; bottom: -6px; z-index: -1; border-right: 6px solid #eee; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
9. .selected .flag { display: block; }


10. /* arrow triangle */
11. .arrow { display: none; position: absolute; top: 0; right: -9px; border-left: 16px solid #eee; border-bottom: 16px solid transparent; border-top: 16px solid transparent; }
12. .selected .arrow { display: block; }


13. /* IE Doesn't support triangles, get rid of them */
14. body.ie7 .arrow { display: none; position: absolute; top: 0; right: -9px; border-left: none; border-bottom: none; border-top: none; }


15. /* Color */
16. .side-nav-wrap.orange .selected a { background-color: #feb509; border: solid 1px #db9c09; cursor: default; }
17. .side-nav-wrap.orange .side-nav li a { color: #ca8e00; display: block; overflow: hidden; padding-right: 8px; }
18. .side-nav-wrap.orange .side-nav li a:hover { color: #feb509; }
19. .side-nav-wrap-tour.orange .selected a { background-color: #feb509; border: solid 1px #db9c09; cursor: default; }
20. .side-nav-wrap-tour.orange .side-nav li a { color: #999; display: block; overflow: hidden; padding-right: 8px; }
21. .side-nav-wrap-tour.orange .side-nav li a:hover { color: #feb509; }
22. .arrow.orange { border-left-color: #feb509; }
23. .flag.orange { border-right-color: #ca8e00; }

The Beauty of CSS Shadows and Gradients

We can all remember a day when creating gradients required images. These images didn't always render smoothly (gradient banding FTL). Browsers have come a long way and now render color much more accurately than their predecessors. We used this to our advantage and deployed CSS gradients, shadows and radii to different elements within Notable. This allowed us to give an amazing, fresh experience to people using newer browsers without the need for images.

People using an older browser will see solid colors, no shadows, and square corners. This in no way adversely effects the usability of Notable, and those people won't miss it. They'll still have access to the power of Notable.

Keep the Older Guys in Mind

We took these techniques and used them to our advantage to give people a unique, memorable experience within Notable. Thinking about how older browsers will render your code is important when undertaking any web design project. Always keep in mind how an older browser will render the new hotness you are coding into your project.