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!
With so many file types out these days, sometimes it’s hard making sure you have all the right software for the job.
Luckily the kind people over at ‘OpenWith.org’ have created a solution.
Great idea, I’m sure I’ll find this site helpful with my fresh OS install.
http://www.openwith.org
Press Release from Richard Chapple, Commercial Director, The Hut Group.
Visit the site here http://www.washbag.com/
The Hut Group enters Male Grooming Market with Launch of Washbag.com
The Hut Group today announced its move into the lucrative Male Grooming, Cosmetics and Health & Beauty market with the launch of Washbag.com. The decision follows a successful trial period of retailing a broad range of products on its general retail website, TheHut.com.
Health & Beauty has been identified as a key market for The Hut Group which intends to deliver a market leading retail proposition across Europe through its own site, Washbag.com, as well as across its growing retail partnerships with High Street and online retailers.
Washbag.com has been launched today with the clear message of delivering consumers a better experience than currently available online, based around service, experience & value.
Washbag.com will offer Free Delivery as standard, a completely unique offer against existing competitors. The free delivery service is a core value proposition across the portfolio of websites run by The Hut Group.
Using The Hut Group’s existing technology platform, infrastructure and relationships, Washbag.com is expected to become one of the largest online retailers within the Male Grooming market within 12 months.
Results from recent website launches support these ambitious growth plans. myBag.co.uk was launched 10 weeks ago by The Hut Group and has made a significant impact on the Handbag & Accessories market. Global market intelligence expert, Experian Hitwise, confirmed that myBag.co.uk has already taken a 10% market share since launch and continues to show rapid growth.
Commercial Director, Richard Chapple, commented: “The Hut Group’s ethos is to deliver market beating service, experience and value to UK & European consumers. The exciting launch of washbag.com is a further step in our expansion, both organically and through acquisition, in to a broad range of fast moving consumer sectors including Health & Beauty, Sports, Footwear, Fashion and Toys.”
Had an issue using wordpress in IE6 where the searchform.php
had the following line:
<input type="submit" id="searchsubmit" value="Search" />
I changed this to:
<button id="searchsubmit" type="Search">Search</button>
and used the following css:
#searchsubmit {
background:url(img/search-button.gif) no-repeat;
width:67px;
height:19px;
text-indent:-9999px;
cursor:pointer;
}
Thanks @halamoodie for this handy tip
(Click image to view in full resolution)
asda-entertainment.co.uk
Helping Haiti
Sonic & SEGA All-Stars Racing
Monsters vs. Aliens
Harry Potter
Susan Boyle
Michael Jackson This Is It
Pussy Cat Dolls
Night at the Museum 2
Leona Lewis
Lego Rock Band
Kesha
Elvis 75
“Cheryl Cole: 3 Words
Harry Potter and the Half-Blood Prince
Up
Microsoft Internet Explorer 8
2012
sendit.com
Napoleon: Total War
Massive Action Game
Tekken 6
Up
Zelda
Bruno
Take That: The Circus
Star Trek
Silent Hunter 5
JLS
Hot Chip: One Life Stand
Dark Void Takeover
Terminator Quadrilogy
New Moon
Grand Theft Auto: Episodes From Liberty City
thehut.com
Apple iPod nano
Apple iPod nano
Apple iPod nano
Super Mario Bros.
Terminator Salvation
Take That Singstar
Star Trek
Smackdown vs Raw
Public Enemies
Zelda Spirit Tracks
Forza 3
Avatar: The Game
woolworths.co.uk
Super Mario Bros.
Up
Twilight New Moon
Peppa Pig
Ben 10
New Moon
Pokémon HeartGold and SoulSilver
zavvi.com
New Site Launch
Watchmen
HALO 3: ODST
Uncharted 2: Among Thieves
Call of Duty Modern Warfare 2
Assassin’s Creed 2
Transformers 2
Inglourious Basterds
SALE
Darksiders
BioShock 2
BioShock 2 : Rapture Edition
Sherlock Holmes
Heavy Rain
Aliens vs Predator
Resident Evil Zero
Pro Evolution Soccer
Hangover
Grand Theft Auto: Episodes From Liberty City
Silent Hill: Lost Memories
New Moon
God of War 3
zavvi.es
Zombieland
Silent Hunter 5
Final Fantasy XIII
1 year anniversary working for The Hut Group
Today is my 1 year anniversary working for The Hut Group
Since I started we reached number 1 in Tech Track 2009
and spread overseas – zavvi.es
It’s been a busy year and I’ve learnt a lot. I can create my own Wordpress Themes,
have a much better understanding of Web Standards, increased my design and coding knowledge,
Tweet, Flickr and Blog on a regular basis and made many great new friends.
I’d like to thank everyone at The Hut Group for a great year, here’s to many more!
What I wanted to do:
- Download a 10mb file upload and run it on my iPhone
Completion Time = 2 Minutes
What actually happened:
- Had to download iTunes 93.6mb
- Install and run iTunes
- Wait for iTunes to sync my iPhone
- Wait for iTunes to backup my iPhone
- Install the update
- Restart
Completion Time = 1 Hour
Yes, it was pretty easy, just a pity it took so long.
Now I’ve got the drivers from installing iTunes, time to use my good friend winamp and mlipod
