That Standards Guy



Search

About

That Standards Guy is the online persona of Karl Dawson, a web developer living and working in Ipswich, England.

I'm a member of the Guild of Accessible Web Designers and the Web Standards Group and team member at Accessites—an awards site to recognise accessible and usable websites.

I specialise as a front-end developer and worry about the minutae of semantic (X)HTML and CSS, accessibility, microformats, typographic rhythm and grid design. I also care about the user experience and remind myself constantly of visitor site goals when working with clients and their aims.

That Standards Guy is proudly powered by WordPress using my own “StrictlyTSG v3.0” theme. Site Policies.

Stay up to date via the RSS feed. What’s RSS?

Archive for the ‘CSS’ Category

Transcending CSS

February
23, 2007
Karl Dawson

Transcending CSS—the fine art of web design

Anyone who has ever seen Andy present will probably have already bought this book, so this review is for everyone else. The book is inspirational. Just like the stage show. Last year we were treated to some great CSS books for beginners and it was cool to finish the year off with a book for the rest of us. Not to say this book isn’t for beginners but it’s emphasis is more on getting out of the inevitable comfort zones we settle into as CSS developers rather than covering the basics of syntax and how to make an unordered list go across the page.

Divided into four sections, Andy first talks up his transcendent CSS philosophy with its “content-out” approach, use of a greater range of CSS selectors including CSS3, using JavaScript and the DOM to plug the gaps in CSS and generally not working to the lowest common denominator but adding progressive enhancement for those users of modern browsers. In the section on Process the reader is offered some thoughts on workflow, wireframing and interactive prototyping before putting the principles into practice. True to the book’s word, all the examples are best viewed in a modern browser—this is not an exercise in bulletproof design—that’s left for us to do naturally, particularly undoing or not implementing Andy’s choice of using JavaScript to clear a float.

The third section was the meat of this food-inspired book on CSS. Note: do not read this when hungry or on a diet, the full-bleed, gorgeous photos of food can overwhelm the weak of will. Dealing with Inspiration Andy looks outside the Web at newspapers and magazines as well as at websites for examples of grid-based designs and how to bring these ideas together in new ways. The reader is introduced to mood boards and scrapbooks and asked to (re)examine Flash as well as seek out typographic inspiration. With Windows Vista now out, I noted that Andy’s examples were using the new Vista fonts as a first choice—and why not? By coincidence I read this chapter on the train journey to the Fitzwilliam Museum in Cambridge and it certainly made me view the art collection in a completely different light. Hey! I’m supposed to be a developer, not a designer… I guess the chapter and the book must be working then.

The book concludes with Transcendence—a look at the various positioning methods and CSS3. Personally, I can’t wait for widespread support for the Backgrounds and Borders Module and watching the presentation of the book at the upcoming Future of Web Design conference.

A bookshelf essential.

★★★★★ Stars

Buy “Transcending CSS” now from Amazon.co.uk, Amazon.com or Amazon.ca.

Pixel to em calculator

Piotr ‘Riddle’ Petrus has released a simple JavaScript form to help calculate the em equivalent of a pixel size you want to emulate. I wrote a quick-and-dirty version of this in Excel to help with the typographic rhythm of my CSS framework but this is much nicer. You can add nodes below the body tag - h1, h2, h3 for example - set the pixel size you would like these to appear as and it automagically calculates the em value.

If you want to incorporate this into working with my CSS framework you’ll need to set both the “Default Browser Font Size” and “Body” values to 13px and set the “Show Decimals” value to 4. All it really needs now is a little extra coding to allow you to input a line-height value so it calculates margin and line-height values for any nodes you wish to get an em value for.

Thanks Piotr.

Framework update

Apologies to everyone in RSS land I’ve updated the CSS framework post so you’ll get that post and this one telling you of the changes. Essentially, I have added some basic version information to each file, including the downloadable .zip and more interestingly added some vertical rhythm to the headings and paragraphs based on Richard Rutter’s excellent “24 ways” post.

Popular articles

Elsewhere

I’m promoting

Patronage: It ain't just for the Medicis. The Joe Clark Micropatronage project