More weather site questions and answers

Written by Adrian Holovaty on July 15, 2003

Thanks to everybody for your outstanding feedback on my announcement of our new Lawrence weather site. I'll try to answer questions/comments in this new entry, rather than bogging down the comments section of the old entry.

Lou Quillio:

How are you switching styles when another medium views the page?

It's pretty basic (and can certainly be improved): There's only one style sheet, and I use the "media='screen,projection'" attribute to target the stylesheet at only those two document types. (The "projection" is in there because the combination of "screen" and "projection" blocks out Netscape 4.) Hence, any device that doesn't answer to either screen or projection -- such as print and standards-abiding cell-phones -- gets the low-tech version.

Jough Dempsey:

My only suggestion is to provide some feedback on mouse-over hover states.

Thanks for this feedback. We added a hover color.

Julie:

Re: the alt tags... I'm curious why you chose to use, for example, "Image of clear sky" rather than just "Clear sky"? Seems like that would make it a more seemless and sensible display for anyone not able to see the image. (After all if you're not able to see the image it doesn't much matter that it is an image -- just more word clutter on your text display). Those who are seeing the image know it's an image and, correct me if I'm wrong, but don't speaking screen readers already announce images when they get to the image tag? Now that I think of it, even if they don't, the information "Clear Sky" is probably just as useful.

Good question. We decided to go with the verbose "image of ___ sky" syntax because an alt tag of, say, "Clear," next to the accompanying custom short-text blurb (e.g. "Extremely hot") might get confusing. The two terms don't necessarily jive when viewed together in text format, if that makes any sense.

We're very open to changing this, although it certainly qualifies as minutiae. :-)

James Parsons:

The only comment or question I have is that in validating the CSS, the pseudo-element, last-child, returns a parse error and I'm not exactly sure why. On first blush it doesn't look like it should.

The last-child pseudo-element is a CSS3 element, which the validator doesn't know about yet. The last-child is used, by the way, to give the right-most table cell a right border. It is supported only in Mozilla and (I think) Opera. We opted to do this instead of giving that td a separate class; the benefits of clean code outweighed the minor fact that the right border wouldn't show up in Internet Explorer or any other non-CSS3 browsers. It's no biggie.

Rex Sorgatz:

Part of the reason this looks so clean is there are no ads. Slap a few flashing banners and skyscrapers on there and it immediately starts to go yucky.

Agreed. Which is why our policy on our sites in general is to shy away from banner ads and other such overly annoying distractions. (You might find grandfathered-in banner ads on some of our sites, of course.) I suspect we'd settle on a text-ad solution for sponsorships; we've found them to be more successful than banner ads, anyway.

No maps? A weather section without maps seems a little courageous. Since I know how meteorologists are, I gotta ask: where's the SUPER DUPER DOPPLER 6000, or whatever they're calling it there?

I'm not sure whether we have rights to Web-post that sort of thing. All of that is above and beyond me; we used what we were given.

Our site traffic absolutely skyrockets during times of severe weather. I start to wonder how this somewhat "happy" page looks when tornado sirens are going off.

This is on the to-do list. We were thinking of altering the design of the entire page based on severe weather. You hit it on the head: It'll be tough to pull off balancing Happy Cartoon Land with life-threatening conditions.

Boris Mann:

I would love to be able to have this sort of weather display for myself -- the problem being that 1) there is no XML-ish standard for consumer weather info and 2) other than screen-scraping, there doesn't seem to be any freely available "feeds". Any idea on where/how the site gets its weather info? Any PHP code that could be shared?

The National Weather Service provides plenty of free data feeds. There's a standard format called METAR, for which there are several open-source parsers in Perl, PHP, and, I'm sure, other languages. A quick Google search should turn up plenty of help.

Ed Coyle:

[T]here's lots of missed opportunities to employ good text formatting beneath the panorama. For example, I'm a huge believer in standard practices when it comes to usability. Standard practice on the web for weather is to employ icons to indicate the condition - sun for clear, clouds/sun for partly cloudy, etc.

We did think about this, but is there really a "standard" for weather graphics? Every site I've looked at uses different ones. Some are pseudo-realistic, others are cartoony, others are somewhere in between.

That's not the best argument I can give. A better one is that having separate weather graphics for each day would also be redundant, unless we got rid of the panorama.

For example, on the example I am looking at, Friday has a high of 100 degrees and is labelled "dangerously hot". Why not color code this?

This is a great idea. We'll look into that and see what we can whip up. One problem would be determining how to represent "partly cloudy" on the color wheel, but maybe just the extremes (cold, hot) would be colored.

Also, why not promote the metereologists significantly? The "More from 6News meteorologists" could be accompanied by a direct mug shot of the personality in question.

Bigger, individual photos are coming soon.

Comments

Posted by Lou Quillio on July 15, 2003, at 11:22 p.m.:

Excellent. Another strong argument for semantic coherence.

Btw, just loaded the page in my cell phone's browser and it displays as you intend -- but there's an issue. The daily conditions/forecasts depend on the graphics to indicate which day of the week we're talking about. Since there's no text representation of "Current Conditions," "Monday," etc., it's hard to tell in the cell phone's tiny viewport which day is which. A user needs to infer that the first citation is Current, the next is tomorrow, and so on. Probably want to move the day citation to text.

And just a heads-up: you're using the named entity references ° and ©. One day those'll have to become numeric.

Thanks for your help. I'll be switching from @import to your method.

Posted by Jose Fandos on July 16, 2003, at 11:25 a.m.:

Lou [Lou Quillio], could you explain why the named entity references ° and © as per your example would have to become numeric? I'm interested in this. I have seen sites using both and I sided on the numeric ones, but didn't have any particular reason. It would be nice to have an explanation for it. Thanks.

Posted by Mark Powell on July 16, 2003, at 4:15 p.m.:

Aside from the great look and layout with CSS, you've done a great job of humanizing the site. There is personality and sincerity, which is hard to accomplish and rarely even attempted. It's more than the illustrations, it's words like "Still Warm" and "Pleasant." Compare that to weather.com's interpretation of: "Partly Cloudy" and "Partly Cloudy." As a web designer, former Larry town resident and a closet "Urinal World" fan, you've done a great job of raising the bar for news sites, local or national.

Posted by Lou Quillio on July 16, 2003, at 7:05 p.m.:

Jose Fandos: Leaving aside the creation of and reference to your own DTD, the W3C's XML 1.0 recommendation (XML is a W3C construct) stipulates that well-formed documents may escape only five character entities in the familiar alphabetic way (& < > ' "). These may be escaped numerically, but all others must be. I guess the idea is that we don't need a big set of standardized alpha-mnemonic entity references when we've already got Unicode. (Note that the ubiquitous   does not make the core W3C DTD. Use   instead.)

That well-formedness requirement may seem like a hassle, but it makes sense when you consider that anyone may construct their own DTD that maps named entities to their numeric equivalents. It's mostly to prevent sprawl.

There's a lot I don't understand about the XML spec, but that's what I've taken-away so far about representation of extended characters. Since I don't want to have to revisit the question down the road, I'm in the habit now of using numeric references, and have started to memorize them. I use this cheat sheet a lot.

Since most of us use CMSes or templating any more it's even less of a big deal. Key what you want, and automate the transformations to numeric entity references programmatically.

Hope I haven't left something important out, and hope this helps.

Posted by Jose Fandos on July 17, 2003, at 3:50 p.m.:

Lou, sure does. Thanks a lot.

Posted by rick on July 23, 2003, at 4:01 p.m.:

Regarding the comment by Boris Mann and METAR, an OpenWeather service is being developed which will provide these feeds in RSS format.

Comments have been turned off for this page.