Category: WebStandards

Useful Links: Twitter Fan Wiki, State of the Web, and an off topic foray

Useful links, including the Twitter fan wiki, a short essay of mine, the results of the state of the web survey and a look at bold and italic.

Thanks to a tip from the fabulous Miraz, I discovered the Twitter Fan Wiki and its page of apps that work with Twitter. I was just reading in Macworld yesterday about the Twitterific app for the iPhone, but this page reveals many more choices.

The Gift is a story of mine, totally off topic and only for the incurably curious about me. Published at The Elder Storytelling Place.

A Blog Not Limited reflects on the results of the state of the Web 2008 survey. At a Blog Not Limited, we see,

What surprised me the most (in an entirely unpleasant way) were the findings for use of HTML elements:

Seventeen percent use <b>
Fifteen percent use <i>
Seriously? Someone please explain this to me.

I can explain why I occasionally use <b> and <i>. There are times when I need a presentational effect that does not involve emphasis or strong. I don’t want to give the impression that the marked up text should be more important or in any way distinct.  I just want a presentational effect that will be apparent to the majority of users and won’t confuse users with assistive software.

If I don’t have control over the CSS for a site, and I write for a lot of sites where I do not, then how can I achieve benign presentational effects like bold or italic without using <b> or <i>? Em and strong have semantic meaning that I may not want to attach to text. Therefore, I may resort to bold and italic for appearance sake.

Review: Universal Design for Web Applications

by Web Teacher
get this book from amazon.com

Universal Design for Web Applications: Web Applications That Reach Everyone (Amazon affiliate link)

★★★★★ Universal Design for Web Applications by Wendy Chisholm and Matt May is from O’Reilly (2008). This is a great little book. It manages to take a new approach to accessibility that includes HTML, CSS, scripting, AJAX, RIAs and does it briefly in a clear and simple way. A perfectly accessible book.

Anyone teaching HTML, CSS, scripting, AJAX, RIA or topics such as creating iPhone apps should have this book on hand. The thing I like most about this book is that it does so much with so little space. I didn’t really learn anything new about accessibility—I’m fairly well informed on the topic. But someone who was not already knowledgeable could get the essentials with ease from this book. Although the authors stress that the book is not a WCAG 2.0 tutorial, they also make it clear that the information in the book can be used to achieve Level A success with WCAG 2.0.

If every student coming out of a class on HTML, CSS, scripting, AJAX, or some RIA had the background in this small book, the web would be well on the way to universally accessible.

Here’s a look at the table of contents:

  1. Introduction to Universal Design
  2. Selling it
  3. Metadata
  4. Structure and Design
  5. Forms
  6. Tabular Data
  7. Video and Audio
  8. Scripting
  9. Ajax and WAI-ARIA
  10. Rich Internet Applications
  11. The process

There’s also an appendix with a cross-reference to universal design for web applications that uses 20 questions based on Level A Success Criteria on WCAG 2.0 specs.

Summary: Easy, practical, and comprehensive. Good for reference or a course in accessibility.

Technorati Tags: ,

Useful Links: power in social media, ROI, web fonts

Social Media Breakfast Leverages Two Truckloads of Tyson Food Donation for Boston Food Bank! at Beth’s Blog is another story to add to the list of amazing things achieved with social media. In this case, blog comments were enough to raise 2 truckloads of food for a food bank in just 3.5 hours. How did we ever get anything accomplished before Twitter?

Web Standards: Where the ROI is from Molly writing at MIX online explains the business reasons for web standards. (MIX online has an interesting stylesheet, by the way.)

@font-face in IE: Making WEb Fonts Work is from Jon Tangerine. He says, “What we need to encourage designers and developers to use EOT today is a good tool to create EOT files in the first place. Perhaps even one hosted remotely, where we can buy a licence, convert the font to EOT, grab the same OTF subset for complaint browsers, and get the work using the typefaces we’ve always dreamed of. WEFT is not the tool right now to enable EOT usage. In fact it discourages it.”

Web Directions North workshop for educators

A workshop about the education of web professionals. I’ve mentioned this event before, and I’ll probably mention it again. I just registered to attend today. The rooms at the venue are reasonable but going fast, so get moving. What am I talking about?

I’m talking about Web Directions North, to be held in Denver in early February. The education team at the Web Standards Project (WaSP) is putting on a full-day workshop at Web Directions North called Educating the next generation of web professionals. The workshop will be lead by Chris Mills, Stephanie Troeth, Aarron Walter, and feature web experts including Dave Shea, Derek Featherstone and Christian Heilmann.

If you are involved in developing or delivering education for web designers and developers, whether in the secondary, post secondary, vocational or the commercial sector, this day is for you.

The day is divided into the following four sessions

  • Session 1: HTML semantic markup and web content technologies
  • Session 2: Cascading style sheets and web presentation
  • Session 3: JavaScript and Ajax
  • Session 4: Accessibility and usability

Did I mention this point?

If you are involved in developing or delivering education for web designers and developers, whether in the secondary, post secondary, vocational or the commercial sector, this day is for you.

Oh, yeah, I mentioned that.

Here’s the thing: a bunch of members of WaSP are working on a full-blown curriculum for educating web professionals. The curriculum will be revealed to the public in March at SXSWi. Here’s your chance to get a bit of a preview into what’s going on, talk to the people involved, and maybe get involved yourself. If you are teaching anyone web design or development and suspect that your skills and methods are a bit out of date, this will be inspirational. Get inspired.

Web Directions North, of course, includes more than this one workshop, all of it worthwhile. If you are teaching web design and development courses, this event and SXSWi should both be written in stone in your travel budget.

See you there.

Review: Everything You Know About CSS is Wrong!

by Web Teacher
get this book at amazon.com

Everything You Know About CSS is Wrong! (Amazon affiliate link)

★★★★★ Everything You Know about CSS is Wrong! by Rachel Andrew and Kevin Yank is from Sitepoint (2008). It’s a small book of little more than 100 pages. It’s mainly about various CSS display properties that create a table layout appearance.

There’s nothing new about CSS properties such as display:table; they’ve been known and advocated for some time by folks like Al Sparber at Project Seven. The thing that’s new is that finally the big dog, Microsoft Internet Explorer, with the release of version 8, is going to support these CSS 3 properties.

Up to this point, CSS layouts have mostly been created using positioning and floats. Either approach has problems that could be solved by a switch to a workable grid system that appears like what you have with a table, but isn’t actually a table. That’s what  display: table in CSS gives you. A grid appearance without any semantic relationship to a data table in HTML.

Most designers haven’t seen much advantage to be gained from using the CSS table layout properties and don’t have a lot of experience with them. This book gives you concrete examples of how to get up to speed with these CSS3 properties and explains (with examples) the following properties: table, table-row, table-cell, table-row-group, table-header-group, table-footer-group, table-caption, table-column, table-column-group.

The book explains (with examples) what implied or anonymous table elements are. For example, if you use display: table-cell without first containing the cell in a block set to display: table-row, the row is interpreted by the browser as implied and the browser acts as if the anonymous row is actually there. Other information included in the book includes flexible layouts, nesting CSS layout tables, and interesting new information about source order. Importantly, since IE6/IE7 are still with us, there’s some quick and easy to use help for how you can create a style sheet for those older browsers that will be acceptable to substitute when you are using a CSS table display layout. The book takes a fast run-though two other CSS3 layout techniques: grids and multi-columns.

Summary: A must have, recommended.

Technorati Tags: ,

CSS3 box-sizing

Just when you thought you had the CSS box model figured out, you don’t. The upcoming recommendation for CSS3 may contain a new property called box-sizing. This property has two possible values:
box-sizing: border-box
box-sizing: content-box

According to helphant.com, here’s the basic difference:

CSS3 is going to include a new attribute called box-sizing so we can choose whether the width set on an element will include borders and padding or whether borders and paddings will be added to the width.

The difference is basically the difference between the IE5 and W3C box models. The default will still be the W3C way we’re all used to where the padding and borders will be added to the width, it’ll just be possible to opt into the other way when it makes things easier.

To quote the W3C directly,

content-box
This is the behavior of width and height as specified by CSS2.1. The specified width and height (and respective min/max properties) apply to the width and height respectively of the content box of the element. The padding and border of the element are laid out and drawn outside the specified width and height.
border-box
The specified width and height (and respective min/max properties) on this element determine the border box of the element. That is, any padding or border specified on the element is laid out and drawn inside this specified width and height. The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified ‘width’ and ‘height’ properties. As the content width and height cannot be negative ([CSS21], section 10.2), this computation is floored at 0.

Note. This is the behavior of width and height as commonly implemented by legacy HTML user agents for replaced elements and input elements.

At Coding & Dreaming, we get a hint about why this new property is being considered by the W3C.

The age-old problem of having to use the conventional Level 2.1 box model in conjunction with padding and/or border values is solved using CSS3. Up until now, this problem was a major stumbling block for developers, particularly in the instance of specifying a border/padding value in relation to a fluid length element, but the new ‘box-sizing’ property answers this problem.

OK. Far be it from me to suggest that this is the way IE worked for years and has been considered “broken” by the W3C for a long time. Maybe it was the right way all along.

At Quirksmode, PPK quotes himself, saying,

Logically, a box is measured from border to border. Take a physical box, any box. Put something in it that is distinctly smaller than the box. Ask anyone to measure the width of the box. He’ll measure the distance between the sides of the box (the ‘borders’). No one will think of measuring the content of the box.

Web designers who create boxes for holding content care about the *visible* width of the box, about the distance from border to border. The borders, and not the content, are the visual cues for the user of the site. Nobody is interested in the width of the content.

Since all the sources quoted above put together visuals of both border-box and content-box, I hope you pay them a visit to read the full articles and see the visuals.