At work, we recently launched a new standalone weather site, 6newslawrence.com/weather. Photoshop guru and illustrator extraordinaire Dan Cox did the beautiful design work, including the Lawrence-skyline panorama that changes based on the weather forecast; I coded the site into HTML/CSS and did the backend.
It's proof (we hope) that relatively complex layouts are possible using CSS techniques that are well-supported right now. Aside from Netscape 4 (which, we decided, wasn't worth supporting), to my knowledge, it renders properly in modern versions of IE, Netscape, Mozilla/Firebird, Opera, Safari and Konqueror. Do let me know if you find rendering errors in your browser.
A few interesting things about the redesign:
- We opted not to include an annoying upgrade-your-browser message for Netscape 4 and other browsers that cannot render the CSS properly. Rather, those browsers see the phrase "Low-tech edition" just under the site's main logo. Soon, that phrase will link to a page that explains what a low-tech edition is.
- In order to meet Dan's requirement that the site be centered on the page, I made use of the IE 5-friendly CSS centering technique. I can't say enough about how many useful resources are devoted to CSS layout techniques. If the concept of an all-CSS layout sounds daunting, don't be scared; every problem you'll run into can be solved with a quick Google or css-discuss search.
- In the spirit of separating content from presentation, all non-content images, such as the shadowed border, are declared as background images in the style sheet; they're not hard-coded images in the HTML markup. I used the background-image-to-replace-text technique explained by Douglas Bowman.
- Putting aside all the content-vs.-presentation holy wars, I will say that, as the design matured, I found myself editing only the style sheet when we wanted to make a design tweak. Plain and simple, CSS made design changes easy. That's a powerful concept -- one that's been evangelized at CSS Zen Garden, where the CSS-based layout changes dramatically but HTML markup stays the same.
- UPDATE, 10:40 p.m.: Forgot to mention this super-cool feature: The "current conditions" graphic not only changes based on the current weather, but on the time of day, as well. At night, it's a nighttime graphic. How does it know when night begins? Simple: I use the sun-and-moon rise and set data that we display on the site's front page anyway. So the graphic is accurate to the nearest minute.
- UPDATE, July 15: I've posted a separate entry that answers reader questions about the design.
Comments
Posted by Anil Dash on July 14, 2003, at 12:36 a.m.:
The tech's fascinating, of course, but the sexy part of this site is the spate of weather graphics as one seamless panorama. Beautiful!
Posted by Adrian on July 14, 2003, at 2:09 a.m.:
Thanks, Anil! Like I said, the outstanding illustration was done by Dan Cox, who is one of the best in the business -- and my hero.
Posted by Steven on July 14, 2003, at 4:42 a.m.:
Great site, Adrian! My hat's off to you and Dan! The panoramic weather graphic is (as Anil said) just sexy as hell, but so is the markup! I'm glad to see another well-executed CSS design, especially in the online news field (which, in general, has some real catching up to do in the markup area).
The one quibble I have is that the link colors and underlining are confusing to me. Your h3 header color (#6a768a; dewpoint, heat index, etc.) looks almost exactly the same as your link color (#626f84), and it *is* the same color (#6a768a) as the temps in the panorama section. Also, some of the links are underlined ("Meet the weathercasters", etc.) while others (the main nav --- and I really dig the subtle bg colors in the nav, btw) are not underlined. I moused all over the page looking for what was clickable and what wasn't. It would greatly enhance the usability of the site to make more differentiation between the links and non-linked headers and/or regularize the use of underlining on the links.
Even with that one criticism, it's an outstanding site. It's given me some real inspiration for what I can do with our weather page in my upcoming all-CSS redesign of our site.
Posted by anonymous on July 14, 2003, at 12:42 p.m.:
gee.. i see tables
Posted by Kris on July 14, 2003, at 2:32 p.m.:
anonymous, the panorama at the top is in fact table data if you study the data relationship carefully. The graphics can be replaced by "current conditions", "monday", "tuesday". etc., and it would have made sense immediately. Check the alt text on those images and see that that is just what their value is.
Well done Adrian!
Posted by Ethan on July 14, 2003, at 2:53 p.m.:
Gorgeous work--congratulations on the launch!
Posted by Steven on July 14, 2003, at 3:26 p.m.:
Just to follow up on Kris' response to anonymous: just because you use CSS for presentation and use semantic markup doesn't mean you can't use tables. It just means that you use tables for what they were originally intended: tabular data. As Kris pointed out, those tables are semantically sound, even with images for titles. In fact, Adrian pointed out that he uses Doug Bowman's "background-image-to-replace-text" technique on those tables. Separating content from presentation isn't so much about WHAT you use, but rather HOW you use it. And Adrian did a bang-up job on this project.
Posted by holly on July 14, 2003, at 3:39 p.m.:
Nice job, looks great, too. The dynamic panoramic is very neat. [I might like to somehow include, cloudy, partly cloudy, sunny, etc on those changing graphics alts.] I believe it adds important information. For instance, under one day it might say Hot, Humid, etc... but it would be excellent to know if it is cloudy, sunny, ... Cloud cover or UV info does not always appear to be included in forecast data cell below those daily images. Maybe this is not necessary if the person who adds that weather data in, remembers to include cloud coverage, clear, etc... in text form?
Next, The table is fine and good to use, a simple addition of the scope attribute inside the TH would be helpful to make sure each column's cells are associated well with the day of the week that is represented.
These are simple accessibility changes that would add that extra level to the great work.
Posted by Paul Watson on July 14, 2003, at 5:27 p.m.:
Very nice work, I would have thought "damned TABLE layout" if I had not linked through on Zeldman's advice.
I agree with Steven on the links in the main-nav though, definitley need underlines or some colour indicating they are links.
Lets not lash out too hard on anonymous, his/her comment was sarcastic but unfortunatley we have ourselves to blame. I was in a meeting the other day going on and on and on about web standards and CSS, hell I was boring myself. But the client needed to hear it, to be educated. Then a few days later I presented them with some samples and in it I had used TABLE for some data.
Boy did I get it in the neck. I got emails and phone calls from both the client and our sales guy asking why after that long meeting I had then gone on to use TABLEs. In the meeting notes I had commented that TABLEs were not all bad, simply that TABLE based layouts were wrong.
But they had taken my crusade and all the links I had given as backup as gospel. TABLE anything was bad in their eyes now.
So then I had to re-educate a bit, explaining what Kris said above. I guess we need to reinforce that it is "TABLE layouts" are bad, not "TABLEs" are bad. Those headlines "TABLEs are bad!" are catchier than "TABLE layouts are bad!" but people take us on our word.
Posted by sleeper on July 14, 2003, at 6:17 p.m.:
This site is great. I can't encourage you and compliment your efforts enough.
I was curious about the centering "workaround" that you used. Since you are using a fixed width for your content, there is another workaround that may function more appropriately in this case. You can absolute position your content block, set a negative left margin equal to half the width of the block, and set the left at 50%.
To mimic the bluerobot example:
#Content {left:50%; margin:0 -250px 0 0; position:absolute; width:500px;}
Note that this example doesn't require the text-align rule, and so doesn't affect child elements inappropriately. It also allows you to use the same method for Internet Explorer and Netscape based browsers.
Posted by Adrian on July 14, 2003, at 7:04 p.m.:
Thanks for all the great comments, everybody! I'll address the issues one by one...
Steven: "the link colors and underlining are confusing to me." I agree. As I type this, we're working on changing the link color scheme a bit. The design problem is: We want the navigation bar links *not* to be underlined, while the other links probably should be.
anonymous: "i see tables". As other folks have pointed out above, I used a table for the panorama image because it's tabular data.
holly: "[I might like to somehow include, cloudy, partly cloudy, sunny, etc on those changing graphics alts.] I believe it adds important information." I originally didn't put alt information on the panorama graphics, because I figured the text below would suffice, but I agree with your point that the two pieces of content aren't necessarily identical. So I added appropriate alt information on the images; check it out. Thanks for the suggestion!
Posted by Adrian on July 14, 2003, at 8:18 p.m.:
Sleeper: Thanks for the suggestion. I'll play around with that technique this afternoon.
Posted by Brian Alvey on July 14, 2003, at 9 p.m.:
The panorama graphics are amazing. I think the outstanding design does an excellent job of distracting readers from the fact that they're getting their weather information from three guys who look to be a combined 45 years old. Great work!
Posted by Elaine on July 14, 2003, at 9:02 p.m.:
Gorgeous and inspirational. wonderful to see something that is beautiful, usable, and standards-compliant! thanks for sharing this with us....
Posted by anonymous on July 14, 2003, at 9:38 p.m.:
Beautiful! The best looking localized news website I've ever seen.
Posted by Lou Quillio on July 14, 2003, at 10:30 p.m.:
Truly fine and inspiring. Many congratulations.
What I'm most curious about is the alternate "lowtech" display and how it's invoked. Markup of the class "lowtech" is all that renders when media="print", or when the page is viewed in Lynx (probably kicks-in for handheld, aural, etc., too).
I see that the lowtech content is marked-up directly in the page source, and is set to display:none; by style.css. I also see that style.css is linked with a media attribute of "screen, projection". So far, so good.
How are you switching styles when another medium views the page? There are no linked alternate stylesheets, client-side scripting nor @media constructs in style.css (wouldn't matter anyway, since css has been discretely linked by media type), so I assume this is done either (1) on the server side, from header data, or (2) in some really obvious way that's escaping me.
It's a DOM thing, right? Whatever it is I gotta know, so I can do it too. Very clean.
Posted by Jough Dempsey on July 14, 2003, at 11:24 p.m.:
Nice work. Wow, that panorama is just gorgeous. I've added your site to my list of CSS-based layouts that I can show skittish clients (although don't you find that most clients hardly care how a site is put together anymore - they just care what it looks like).
My only suggestion is to provide some feedback on mouse-over hover states - right now links don't "do" anything when you hover over them. My eyesight isn't so great so having a link change colour, or become underlined, etc., when hovering over it is a BIG usability concern.
Otherwise, wow. What a fabulous job.
Posted by Wilson Miner on July 15, 2003, at 1:17 a.m.:
Excellent job. Simple, original idea executed elegantly. My kind of party.
Good to see good old Larrytown making a showing on zeldman.com. I was so surprised I had to refresh.
Posted by Julie on July 15, 2003, at 3:05 a.m.:
Very cool, Adrian.
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.
Posted by James Parsons on July 15, 2003, at 5:06 a.m.:
Lovely. Very nice. I'm going to direct this to the attention of our local ABC affiliate who's weather page has really become the bane of weather pages. Like your's, their's has tables. But unlike your's, their's has them for all the wrong reasons. Your XHTML validates. 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.
Posted by kpaul on July 15, 2003, at 5:27 a.m.:
Kudos! :)
Posted by Dan on July 15, 2003, at 8:13 a.m.:
The former online editor in me is blown away. Better than weather sites at markets 100 times your size... the elegance-in-simplicity Adrian trademark.
The current copy editor in me notes, though, that you can have the coolest design ever, but you still gotta have that content right ... probably should get someone to change all those "Kansas University" references on the bios page.
Posted by Sara on July 15, 2003, at 8:35 a.m.:
As a copy editor at the newspaper where Adrian works, I can attest that "Kansas University" is, indeed, Journal-World style. It's not a mistake.
Posted by Rex Sorgatz on July 15, 2003, at 8:42 a.m.:
The things I like:
* The way the navigation guides me through the content. I don't feel overwhelmed by data, like you do on many weather pages. The navigation invites me to click and discover.
* That time-based graphic is really pretty cool.
* It's remarkably clean. Almost eeriely so, like I'm looking at a publicly funded site, which leads me to....
The things I wonder about:
* 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. (Hopefully you can find more attractive sponsorship integration, if it does indeed get/need sponsorship. Weather is a huge revenue generator for us, and we even have some ads that are invoked based upon weather events, such as air conditioners during hot weather.)
* 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? Also, I wonder how much of an "extension" of the television news brand this is. [After looking around, I found external links to maps in the "Weather links" area, where I wouldn't have looked.]
* 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.
Sorry if that's negative. I really do like it -- fresh ideas.
Posted by Kevin Elliott on July 15, 2003, at 1:43 p.m.:
That's wonderful! I wish my site looked as fine tuned as that.
Posted by James on July 15, 2003, at 2:32 p.m.:
on...tables
+the tabular data would help those users with vision impairments to know what the weather forecast is.
Well done, this is a great page.
Cheers
James
Posted by Boris Mann on July 15, 2003, at 2:46 p.m.:
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 it's weather info? Any PHP code that could be shared? More info here: http://www.bmannconsulting.com/node.php?id=347
Posted by Jeff Jarvis on July 15, 2003, at 5:30 p.m.:
Adrian: The very first site I created at Advance.net, lo, 9 years ago was our weather site. I haven't seen much new under the sun since then. Yours is new: very nice concept, very nicely executed.
Posted by Barry on July 15, 2003, at 5:33 p.m.:
Thanks for the effort at a standards compliant, and very readable, site.
Pity we don't have something as nice and accessible for the weather in our part of the world.
Running Mozilla and Konqueror on Debian stable.
Posted by Ed Coyle on July 15, 2003, at 5:48 p.m.:
It's interesting.
Showing the weather in the panorama is a great way to integrate the forecast. Very cool (Hi Dan!).
Other than that, there'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. These are actually one of the better web standard practices because it allows for quick skimming of the content to find the day - and condition for that day - that interest you.
On the text issue, I think a lot could be done with color and icons to further allow for skimming. The graphic work in that panorama is great - but I think it breaks down a bit when you reach the text.
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? Heat like that is just as much of a factor into personal decisions when it comes to weather as rain/sunshine are. I think you should reflect all "exceptions" to the average in the panorama and the text.
Where are the ads? Weather is a TV station's brad and butter - it's what they do. Why isn't this section sponsored in a big way?
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. Again, weather is a TV station's bread and butter - the weather personality is as significant in some cases as the weather itself. Making it look more like the statemtnt is coming directly from one of the personalities would reinforce the TV brand more.
Are you going to incorporate more navigation and branding for 6News?
Posted by Scott on July 15, 2003, at 7:14 p.m.:
Nicely done. Was surprised to see my Alma Matter mentioned on zeldman.com.
Very cool.
Posted by Darrel on July 15, 2003, at 11:43 p.m.:
Regarding the "background-image-to-replace-text technique explained by Douglas Bowman" my understanding is that will totally break most screen readers, as they won't see the text (as it's hidden) and won't see the image (as it is a background image). Otherwise, great site!
Posted by Dave S. on July 16, 2003, at 12:10 a.m.:
Fahrner Image Replacement (as popularized by Douglas Bowman) only breaks JAWS if the stylesheet is linked - if imported, JAWS ignores screen media as it should.
This is all assuming your CSS is "media: screen" of course
Posted by Darrel on July 16, 2003, at 12:41 a.m.:
Dave, could you clarify? It is my understanding (and limited experience) that JAWS (and other screen readers) ignore CSS completely...they simply read what is actually rendered in the browser. If the screen doesn't render the actual text, then it doesn't read it. Is that incorrect?
Posted by Dave S. on July 16, 2003, at 4:39 p.m.:
Darrel, see url attached to my name for information on media types. Essentially, JAWS shouldn't be rendering 'screen' media because the end user won't see it in most cases - 'aural' is a far more appropriate media type. CSS-2 provides 9 individual media types. User agents should theoretically be using the one most appropriate for the task at hand.
Posted by Kevin on July 16, 2003, at 5:34 p.m.:
Exceptional!
Posted by Darrel on July 16, 2003, at 9:08 p.m.:
Dave:
Ah, I see what you are saying. The problem is that most of the screen readers simply read what is rendered on screen and ignore the aural CSS. I've seen arguments both for and against screen readers using aural CSS, but, for now at least, the reality is that the reader will read the page as it appears in the browser. As such, using the background-image-for-text method is a bad idea if you want to accomodate anyone using a screen reader since there is no real text for the reader to read. If you really want the graphic, use a graphic, and add the ALT text.
Posted by janco on July 21, 2003, at 7:42 a.m.:
I just wondered after looking at the code, when do you decide to use a class and when an id? Is this to workaround some bugs ?
Posted by Lou Quillio on July 24, 2003, at 11:24 p.m.:
janco: The general idea springs from the DOM and the requirement that ids occur only once per document. That directs us toward using ids to contain broad content areas within a document, within which XHTML tags may be contextually assigned display characteristics, with classes providing another level of granularity beyond that.
So the general guidance I give myself (and it's odd how this isn't made clear in most references) is to mark-up all parts of the <body> in logical and discrete ids and apply contextual CSS selectors within them -- ranging into contextual classes only where necessary.
Within a "header" id, for instance, an <h1> renders this way, a <p> that way and an <input> another. But within a "content" id, headings may appear differently, as can paragraphs, lists and list items, tds, etc.
It's not talked about much, but ids logically connote structural semantics, classes apply visual formatting. An exception to this is that margins and padding might well be applied to ids themselves (and nested ids). In general, however, (1) carve your document into discrete parts with ids, (2) style XHTML tags within those ids with contextual selectors applied to the tags, and (3) reserve classes for special cases -- and apply them contextually as well.
Posted by janco on August 11, 2003, at 10:41 p.m.:
Thanks! As I'm currently becoming more interested in xhtml I found a simple rule for myselves. If I want to have certain elements only once on a page (sidebar, header, footer), I give them an id. If its more generic I use classes. I'm also strugling a bit between the div and standard elements like p but will find a way in having a good separation between structure and display. I find myselve now abusing <div> as paragraphs sometimes
Comments have been turned off for this page.