Month: October 2006

Tip: Testing CSS for Handhelds

As I pointed out in a post a few days ago, testing handheld CSS is problematic. Here are a few of the resources that are available.

Opera’s View > Small Screen feature comes close to emulating some handhelds, and will display a page with handheld CSS accordingly. It also does a decent job of displaying a page with no handheld CSS as it would look on a handheld. Even more helpful is the Opera Mini Simulator an online simulator that looks like a phone.

The W3C Mobile Web Best Practices 1.0 comes with an online validator in alpha state that tests 34 of the 60 best practices.

Online simulators are scarce for individual mobile devices. Most manufacturers have some help in their support pages and many offer a downloadable emulator, such as this one from BlackBerry.

Technorati Tags: ,

Reinventing HTML: Tim Berners-Lee

In a blog post, Reinventing HTML | Decentralized Information Group, Tim Berners-Lee announced a new W3C working group to reinvent HTML. This has unleashed a storm of blog posts, the majority of which you can find at the end of this article by 456 Berea St. The idea motivating Tim Berners-Lee is that the move to XML has failed because people are still using HTML 4, and something needs to be done to move people away from HTML 4.

My attitude as a teacher/writer on the topic of learning HTML/XHTML has always been that students should learn HTML as if it were XHTML. That is, students should write HTML using all the characteristics of XHTML such as quoted values, lower case tags, well-formedness and so on. The single exception to that is leaving out the trailing slash in empty elements when writing HTML. In addition, students should learn to write HTML with separation of content from presentation and without deprecated elements.

One reason I like this approach is that problems in XHTML such as MIME types, XML prologues, and so on can be avoided by using HTML, but in a way that is as clean and valid as XHTML without actually moving to an XHTML DOCTYPE. The material I’ve written on this topic teaches students to write XHTML and then transfers that set of coding rules, syntax habits, and attitudes to writing HTML.

Since any change in the rules at the W3C will occur in slow-motion, I don’t think anyone needs to worry about the code, textbooks, or methods they are using now becoming obsolete overnight. But we need to keep an eye on how this plays out, because at some point students may need to learn to write HTML/XHTML in consideration of whatever comes next in a way that takes their skills forward. I’ve found a way to teach HTML/XHTML so students write HTML according to the current standards and is as clean as XHTML. We’ll need to find a system as effective as that, if the W3C actually comes up with another specification for HTML.

Technorati Tags: , , ,

Visit Web Teacher to read any comments.

Tip: IE7’s New Feed Reader

The new Internet Explorer 7 has an RSS feed reader built in. Here’s how you subscribe to a blog using this new feature.

I’m using the blog Time Goes By as my example, because this post was inspired by a woman on a conference call among several of the readers of Time Goes By who said she read the blog but didn’t know how to subscribe to a feed. There were all sorts of suggestions given to her, but since Microsoft is encouraging everyone to download the new IE7, I thought that might be the easiest way to go for her, and perhaps for others too.

To see the feeds you are subscribed to in IE, open the Feeds toolbar. It is under Tools > Toolbars > Feeds.

Open the feeds toolbar

That opens up a panel on the side of the browser where you can see Favorites and Feeds. It appears at the left in the following image. If you want to add a feed, look for the orange icon that symbolizes the presence of a feed. There’s an arrow pointing to it in the following image.

Adding a feed

If that orange icon is not grayed out, it means the site you are visiting has a feed, and you can subscribe. Click it.

Subscribe to the feed

A new window opens. At the top there’s a box that says this page has a feed and a link that says Subscribe to this feed. Click it.

Subscribe again

IE7 asks you again if you really want to subscribe to this feed, and you must click the Subscribe button. After that the feed will be in your panel on the left and you can click it just like clicking on a Favorite. The feed will automatically update each time the blog you’ve subscribe to posts something new.

Three Microformat Creators

Microformats.org has three wizards that will generate the code for a microformat for you. Very easy to use. Try them: hCard Creator, hCalendar Creator, and hReview Creator.

ADDENDUM: I thought I’d give one of the microformat creators a try. Here’s the code it generated for me as an hReview.

Oct 29, 2006 by

Virginia DeBolt


photo of 'CSS Site Design'

CSS Site Design

★★★★★ A collaboration between the CSS guru Eric Meyer and the training movie queen Lynda Weinmann. It’s all on CD so the price tag is a little high, but the movies let you learn all about CSS layouts from the master

This
hReview brought to you by the
hReview Creator.

Technorati Tags: , microformats

Tip: Want to write CSS for a handheld?

I’ve been researching CSS for handhelds of late. Chapter 15 for my new book is about CSS for handhelds—Chapter 15, does that mean I’m almost finished—yes! It’s been tough finding information and testing the CSS I’ve written in ways that yield reliable information. Consider this:

  • Some devices, especially phones, use only WAP (Wireless Application Protocol). Phones labeled WAP2 can use regular websites with XHTML and CSS.
  • Some devices, such as the BlackBerry, offer users a choice between WAP and regular browsing.
  • Some devices only support HTML 3.2. Some support HTML 4. Some support XHTML.
  • Some devices support CSS. Some do not. Those that do support CSS understand link better than @import.
  • Some phones apply screen styles as well as handheld styles; others ignore both.
  • Screen widths range from 100 pixels to 320 pixels for phones.
  • Screen widths range from 320 pixels to 640 pixels for PDAs.
  • Some devices have monochromatic screens. Some have color.
  • Some software, such as AvantGo on either a phone or a PDA, offer users a choice as to whether they want images to display or not.
  • Most devices can’t handle tables, floats, frames, JavaScript, popups, or dynamic menus. Some devices, however, will display simply formatted tables and JavaScript when there is a meta element declaring the document HandheldFriendly.

Testing is a nightmare, too, because there aren’t enough easy to find and use emulators and simulators available.

I’ve been able to come up with a few helpful ideas for CSS for handhelds, but I think we still have a long way to go before there’s much predictability in this area. My advice for now is to make lavish and liberal use of display: none for nonessential parts of your pages and make sure your color contrast is going to work on a small screen. Check your pages with CSS switched off to make sure they linearize sensibly (good semantic HTML is the underpinning of everything no matter what kind of device you’re designing for). Provide skip navigation links or other navigation aids to make the pages easier to work through.

Drawing near the close of the writing work on the new book makes me aware of how much I’ve neglected Web Teacher in the last few months. This little excerpt from what’s coming is my way of making peace and promising to be back soon with lots more.

Technorati Tags: , , , , ,

Where are all the men of web design?

I been hearing from a few of the folks who are getting their entry in the Style Me Challenge ready to submit. And you’ll never believe this, but they are all women. Where are all the men of web design? Why don’t we ever hear from the men? Are the women running an exclusive all-girls club? Nope, we’re not. Hey, fellas, we accept entries from men. All ya gotta do is send one in.

Technorati Tags:

Visit Web Teacher to read any comments.