Lawrence weather site in all CSS.
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.
