Why It s Bulletproof


Why It's Bulletproof

We just took a pleasing tab navigation design from a high-profile Web site, ripped it apart, and reconstructed a similar system with less code that is easily updatable, more accessible to a wider range of browsers, devices, and assistive softwareand most notably is flexible, regardless of the size and amount of text placed within it.

Because of the steps we took to creatively align background images and assign colors, the entire tab set is scalable. If the user chooses to bump up the text size a few notches to increase readability, then the entire design will scale along with it (Figure 2.14).

Figure 2.14. This tab design can be scaled up or down by adjusting the text size in the browser.


In a matter of minutes, we can also change the wording and/or add or remove tabs for instant updates, simply by editing the unordered list that's used to structure the navigation items (Figure 2.15). All that needs to change is the text within each list item in our markup:

 <ul >    <li ><a href="/">Home</a></li>    <li ><a href="about.html">Why Lance Rules</a></li>    <li ><a href="news.html">The Latest News</a></li>    <li ><a href="sponsors.html">People Who Like Lance</a></li>  </ul> 

Figure 2.15. It takes just a few seconds to change the text for each tab by updating our easy-to-read, unordered list.




Bulletproof Web Design(c) Improving flexibility and protecting against worst-case scenarios with XHTML and CSS
Bulletproof Web Design(c) Improving flexibility and protecting against worst-case scenarios with XHTML and CSS
ISBN: N/A
EAN: N/A
Year: 2006
Pages: 97

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net