Bulletproof Web Design (Second Edition) by Dan Cederholm
A brief summary by Chapter
Chapter 1
Mentioned in the book and previous blogs I have read e.g. http://www.kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/ it seems it would be more efficient to use ‘ems’ or ‘%’ due to their scalability amongst visually-impaired readers and mobile devices. Although ‘ems’ are more accessible, different browsers and platforms can interpret ‘ems’ differently. Therefore ‘px’ may be a better option if you require a precise look and feel to your fonts.
Also, with browsers giving the option to zoom font-size specifically or the whole page this in becoming less of a concern as the percentage of users for IE5 + 6 is declining month on month http://www.w3schools.com/browsers/browsers_stats.asp
Chapter 2
Recently at the #WDX @media conference in London I had the pleasure of seeing a presentation by the wonderful Steve Souders author of Even Faster Web Sites and High Performance Web Sites. Steve, amongst a wealth of designers I follow have inspired me to challenge myself when building websites to keep to web standards where ever possible (unfortunately there are still some cases where this can’t be accomplished in my day to day tasks), write clean, simple and effective markup, use of images and any other elements that are required to get the job done.
This chapter delivers a great way to minimize the use of imagery when creating a navigation by simply using css ‘background-repeat:’ and further more how to cater for scalability if the user is to change the font-size as described in the first chapter.
Chapter 3
I’m still amazed by how often I see this common mistake and love how it is described in the book ‘Make that extra chocolate chip cookie’.
Here’s 2 examples that keep annoying me every time I see them:
Even though it’s only a pixel out it’s still noticeable.
Hopefully by the time you read this, this image http://www.creativereview.co.uk/layout/img/bg_footer.gif will be a nice 1px stretched image or even better, not there at all and replaced with some css borders.
Chapter 4
In some cases, for example I recently created some eBay shops for The Hut eBay and zavvi eBay it is not always possible to avoid tables. However, if you do have control over the markup this chapter provides a great solution using definition lists and css. As well as providing more control and flexibility with css it is also faster to load than tables http://www.chromaticsites.com/blog/13-reasons-why-css-is-superior-to-tables-in-website-design/, http://www.mardiros.net/css-layout.html.
Chapter 5
Elaborating on chapter 3 this chapter describes best how to create boxes with content in and gives some good examples on how to cater for almost every eventuality. Using similar methods as in chapter 3 with use of small images and css it is possible to create a flexible content box that expands in all directions if extra content is added.
Chapter 6
This chapter provides some essential information and introduces you to some great assets when building bulletproof websites. With the assistance of Firefox and addons such as the Web Developer Toolbar and Firebug it is possible to test a number of possible occurrences that viewers of your site may encounter. Also mentioned is the importance of using valid code and how to test this via the the W3C http://validator.w3.org/, http://jigsaw.w3.org/css-validator/.
Chapter 7
In previous examples tables have been replaced for html / css, but if in the unfortunate case it’s not possible this chapter provides everything you need to know to apply the same flexible techniques. Some useful advice is given for reducing and creating clean markup, one such example is rather than to include ‘<br />’ tags in the markup, use the ‘display: block;’ property with css.
Chapter 8
Gives an incite into the various ways of building a site using a fixed-width, fluid-width or elastic layout. It also shows how to optimise a site to cater for all browser dimensions. A great example of this is @malarkey site: http://stuffandnonsense.co.uk/. Again I had the pleasure at #wdx @media to view Andy Clarke’s presentation and looking forward to his upcoming book @itshardboiled .
With new css3 media queries it is now possible to take things a step further provided you use a browser that supports it of course. With mobile devices ever on the increase I’m sure this feature will be a great asset to implement. http://www.w3.org/TR/css3-mediaqueries/#media0
Chapter 9
A great end to the book re-capping over all the chapters in one big awesome tutorial of mashing them together to create a great flexible, web standard website http://sumanpark.com/bpwd/english/chapter9/
On the whole a great book and great introduction to forward thinking and planning ahead when building websites, although some of the content is out of date it’s still a well worthwhile read. Many thanks Dan Cederholm!
