Essential Reading for Web Designers – Second Edition

I wrote a post back at the end of 2005 called "Essential Reading for Web Designers" in which I wrote about a few books that I considered essential reading for anyone who does website design. Primarily these books focused on using web standards, at the time these books were the few key books about this subject.

Since then a lot more books have been written but the books I wrote about then are still very important. In fact two of them have been updated with a second edition bringing them right back up to date with the current state of web design. As these second editions have come out I thought I’d make a second edition of my own and update my list of essential reading too!

Cover image of Design with Web Standards - 2nd EditionDesigning with Web Standards – Second Edition by Jeffrey Zeldman

This second edition by an author who was recently called ‘The King of Web Standards’ in a recent interview on BusinessWeek.com brings this key book up to date. the back cover states:

Best-selling author, designer, and web standards evangelist Jeffrey Zeldman has updated his classic, industry-shaking guidebook. This new edition, now in full color, covers improvements in best practices and advances in the world of browsers since the first edition introduced the world to standards-based design.

View Designing with Web Standards – Second Edition on Amazon.

Cover image of Bulletproof Web Design 2nd EditionBulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS, Second Edition by Dan Cederholm

This second edition, due for release in September 2007, updates this excellent book. Dan writes about it on his own website saying:

This isn?t a giant update nor a new book entirely. Rather, it brings the examples in line with Internet Explorer 7 (which wasn?t released when the first ed. was published) and adds several more examples based on ems (which were sorely lacking from the original book). There are of course errata fixes and nips and tucks throughout as well, and about 30 additional pages were added in total.

View Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS, Second Edition on Amazon

Cover image of DOM ScriptingDOM Scripting: Web Design with JavaScript and the Document Object Model by Jeremy Keith

This book focuses on best practices for Javascript coding. It’s a great book aimed at web designers rather than programmers so it’s an excellent way to get into the power that the DOM and Javascript can offer:

The book is aimed at designers rather than programmers. If you’ve learned the benefits of Web Standards through CSS and you’re now ready to move on to the next level, this is the book for you. It will show you how to add stylish, usable enhancements to your web pages using Web Standards that guarantee future compatibility.

View DOM Scripting: Web Design with JavaScript and the Document Object Model on Amazon.

Cover image of Bulletproof AJAXBulletproof Ajax by Jeremy Keith

Following on from DOM Scripting, Jeremy Keith writes further about best practices in Javascript programming. This book focuses on how to use AJAX but in a way that degrades well and is accessible:

Using flexible design elements that adapt to the user?s needs, Web sites continue to work beyond the typical browsing environment. I believe that the same philosophy can be applied to Ajax. Far too many Ajax applications are built like a house of cards, dependent on just the right stack of technologies in the browser. Browsers that don?t support the required technologies are locked out and their users are turned away. To avoid this, you need to create flexible applications using bulletproof Ajax.

View Bulletproof Ajax on Amazon.

And many more…

These are just a few books on these subjects, but they are a few that I would definitely recommend reading, and probably in the order I’ve listed them too. A quick look on Amazon (or in my Amazon aStore found under the ‘Store’ section above) will find many other books to take your web design and development further.

~Rick

Apple publishes ‘Optimizing Web Applications and Content for iPhone’

Apple published Guidelines for developing web content for the iPhone over at http://developer.apple.com/iphone/. It’s good to see a focus on standards based development being encouraged there, it makes sense given that the Safari browser on the iPhone has great support for XHTML and CSS, particularly CSS 3 properties – of which the iPhone makes particular use of, more of that in a moment.

Quick overview of the Guidelines…

The guidelines are split into several sections:

  • Understand User-iPhone Interaction
  • Use Standards and Tried-and-True Design Practices
  • Integrate with Phone, Mail, and Maps
  • Optimize for Page Readability
  • Ensure a Great Audio and Video Experience
  • Know What Safari Supports on iPhone
  • Connect With Web Developers

Understand User-iPhone Interaction

This section introduces you to the whole concept of interacting with the iPhone, mainly that the input device is not a mouse but your hand so it’s not as precise as a mouse so web interfaces for the iPhone need larger click targets to interact with. As has been pointed out on various blogs there is no copy and paste, but there is also no drag and drop or text selection either so this is another factor to keep in mind.

Safari on iPhone doesn’t have windows that can be moved around or have scroll bars like a conventional browser, content is resized intelligently to fit the viewing area, it is recommended to avoid wide blocks of text. Double-tapping is used to zoom in to content.

Use Standards and Tried-and-True Design Practices

This section really reinforces the use of web standards for designing pages for the iPhone. Makes the point that Safari on iPhone uses a ‘real’ browser in that it doesn’t use stylesheets targeted towards handheld devices, it’s intended to give a rich browsing experience by supporting HTML 4.01, XHTML 1.0, CSS 2.1, partial CSS 3.xx, JavaScript 1.4, DOM support, AJAX, XMLHTTPRequest.

It encourages the use of separate HTML, CSS and Javascript as well as using valid HTML, and also optimised images and script content to keep sites running smoothly.

Apple published Guidelines for developing web content for the iPhone over at http://developer.apple.com/iphone/. It’s good to see a focus on standards based development being encouraged there, it makes sense given that the Safari browser on the iPhone has great support for XHTML and CSS, particularly CSS 3 properties – of which the iPhone makes particular use of, more of that in a moment.

Quick overview of the Guidelines…

The guidelines are split into several sections:

  • Understand User-iPhone Interaction
  • Use Standards and Tried-and-True Design Practices
  • Integrate with Phone, Mail, and Maps
  • Optimize for Page Readability
  • Ensure a Great Audio and Video Experience
  • Know What Safari Supports on iPhone
  • Connect With Web Developers

Understand User-iPhone Interaction

This section introduces you to the whole concept of interacting with the iPhone, mainly that the input device is not a mouse but your hand so it’s not as precise as a mouse so web interfaces for the iPhone need larger click targets to interact with. As has been pointed out on various blogs there is no copy and paste, but there is also no drag and drop or text selection either so this is another factor to keep in mind.

Safari on iPhone doesn’t have windows that can be moved around or have scroll bars like a conventional browser, content is resized intelligently to fit the viewing area, it is recommended to avoid wide blocks of text. Double-tapping is used to zoom in to content.

Use Standards and Tried-and-True Design Practices

This section really reinforces the use of web standards for designing pages for the iPhone. Makes the point that Safari on iPhone uses a ‘real’ browser in that it doesn’t use stylesheets targeted towards handheld devices, it’s intended to give a rich browsing experience by supporting HTML 4.01, XHTML 1.0, CSS 2.1, partial CSS 3.xx, JavaScript 1.4, DOM support, AJAX, XMLHTTPRequest.

It encourages the use of separate HTML, CSS and Javascript as well as using valid HTML, and also optimised images and script content to keep sites running smoothly.

Integrate with Phone, Mail, and Maps

This section starts to get to more of the iPhone specific code examples that hook into the dedicated apps on the iPhone. You can click on Telephone numbers in Safari and the number will be automatically dialled, Safari will automatically convert numbers that look like phone numbers into telephone links. However you can format a telephone link on purpose:

<a href="tel:1-408-555-5555">1-408-555-5555</a>

Email links are in the standard format and open up Mail in order to send an email., links to Google maps take the standard link format also but these are opened up into the dedicated Google Maps application on the phone. I believe that links to YouTube movies do something similar but there is no mention of this in this section.

Optimize for Page Readability

This section gets more interesting and links back to my initial mention of CSS 3 properties. If you want to provide a particular window size for a page to be viewed on the iPhone you can set an iPhone specific stylesheet by using a CSS 3 media query like so:

<link media="only screen and (max-device-width: 480px)"
href="iPhone.css" type="text/css" rel="stylesheet" />

There are more guidelines for laying content out for the iPhone viewport such as a recommended width of 320px so that the layout doesn’t change between portrait and landscape modes. It also details some webkit specific CSS properties to help control text sizing. Image formats supported are JPG, PNG, GIF and TIFF.

Ensure a Great Audio and Video Experience

Formats and bitrate advice is provided here to help optimise video for WIFI and EDGE network capacities. Maximum video dimensions of 480 x 360px are recommended. Formats supported are H.264, MPEG-4, AAC-LC, .mov, .mp4, .m4v, .3gp file format, video or audio that can play on an iPod.

There is advice for the server side of providing audio and video for use on the iPhone too, interestingly the RTSP protocol is not supported but apparently only video via HTTP streaming.

Know What Safari Supports on iPhone

This set of guidelines covers the resource capacity of Safari on the iPhone. Downloaded resources such as CSS, HTML, Javascript, images or other non-streamed media must be less than 10Mb. Javascript execution is limited to 5 seconds before it times out, this will really mean people having to review their use of the various javascript libraries available and make sure that only the bare essentials are present. Interesting to see how Adobe’s Spry library stands up on the iPhone.

Other information covers support for files including the various mime types, PDF is supported but not (as has been widely covered on various blogs!) Flash or Java. I think various browser testing scripts for detecting Flash will need to be updated to factor in the iPhone’s lack of flash support. I wonder how long it will be before we see Flash on the iPhone? It surely must be coming, seems like a missing piece of a puzzle to me? It also covers the Security support of Safari such as SSL and RSA.

Connect With Web Developers

It ends with some useful web development links including W3C, WHAT-WG and Web Kit project site.

There’s a real push throughout about the fact that web standards and associated best practices are an integral part of creating successful sites that work well on the iPhone safari browser.

When I’ve got a moment I’ll try out a the iPhone specific code, especially now that my friend Alyn seems to have successfully gotten his iPhone activated, more about that on his blog I’m sure.

~Rick

The importance of cross-platform testing

Well, in my new mission to post on this blog regularly I have gone and created a nice new blog widget for the purpose of quick and easy posting to the site. It’s working pretty well but I still can’t figure out how to save preferences in widgets, it just doesn’t seem to work. Perseverance needed!

With all the hoohaa about Apple’s Bootcamp software that allows you to run windows going on I thought it best to test and see what happens to sites when viewed using Bootcamp.

I chose my friend Alyn’s Blog as a test subject, here’s the results:

So, you can see that sites do look quite remarkably different when using Bootcamp.

Essential Reading for Web Designers

I’ve been busy finishing a few projects so I haven’t blogged much recently I know but I’m going to try and pick up the pace a little bit.

I just got a couple of new books from Amazon this week and I’ve now found that I have four books that I look to for cool solutions for the challenges presented by Standards Compliant website design. So I’m putting a little mini-review here of them, despite the fact that I’ve only just started reading one of the books I got this week, it’s just I can tell it’s worth recommending them!

Designing with Web Standards
By Jeffrey Zeldman

Picture of Designing with Web Standards book jacketThis book is the one to read if you don’t know anything about Web Standards at all, it’s intended more to explain the benefits of Standards compliant web design rather than being a how-to manual with extensive code.

It does have some code examples but it doesn’t go too deep so it serves as a great primer for those beginning to get a feel for CSS and XHTML.
It’s written well and is not a dry technical manual but interesting to read.


Web Standards Solutions: The Markup and Style Handbook
by Dan Cederholm

Picture of Web Standards Solutions book jacketFor those who’ve read the first book and have gotten hooked then this next book is a great way to move forwards. There’s lot’s of practical code examples which relate to real world usage, it gives solutions that can be applied to give great results.

Like the book above it’s well written and fun to read with simple explanations, perfect for extending your Web Standards knowledge.


Bulletproof Web Design: Improving Flexibility and Protecting Against Worst-Case Scenarios with XHTML and CSS
by Dan Cederholm

Picture of Bulletproof Web Design book jacket The next book follows on from the previous book and focuses on ‘bulletproof’ techniques to use in building your sites.

Lot’s of clear code examples that compare traditional methods of site design with the benefits of creating the same layout using Standards compliant techniques. It’s written well like Dan’s first book and really gives a great overview of some brilliant techniques to apply to the website that you build.


DOM Scripting: Web Design with JavaScript and the Document Object Model
by J.Keith

Picture of DOM Scripting book jacketThe title of this book might sound a little ominous, maybe all of them do?!?! This book is a great companion to the rest in that as the other books deal more with Standards Compliant CSS and XHTML this book focuses on Standards Compliant Javascript coding.

It’s a great book aimed at web designers rather than programmers so it’s an excellent way to get into the power that the DOM and Javascript can offer.


These are all great books that I regularly dip in and out of, they’ve really helped me get a better understanding of all the benefits of Standards Compliant website design as well as how to practically put it into practice.

~Rick