July 28, 2003, 11:18 PM ET
Separating ads from content in all browsers
Problem:
Maintain a clear separation between editorial and advertising content ("Extras") on our lawrence.com restaurant guide detail pages -- in all browsers, not just modern, graphical ones.
Solution:
- Offset the Extras box graphically by using a different color -- yellow instead of gray.
- Require the words "Brought to you by."
- Use the word "Advertising" in the
titleattribute for every link in the Extras box. - Place horizontal rules before and after the ad, to designate the separation explicitly for non-graphical browsers. Hide these
<hr>s withdisplay: nonein the style sheet for graphical browsers.
July 23, 2003, 11:59 PM ET
New weblog feature: Reserved comment names
I used to make frequent improvements to the homegrown weblog software that powers this site, but I regret weblog innovation has taken a backseat to other things in my life. Still, I managed to implement an idea this evening that I'd come up with earlier today: Reserved comment names. Let me explain that.
I keep a close watch on this site's user-posted comments, and I do my best to delete spam. But, because anyone can post a comment under any name, there is a chance that one day some mischevious commenter might pose as me, with my name and URL, deceiving the readers of this site until I saw the comment and deleted it.
Such mischief would damage the credibility of this site's comments. But now that can't happen.
Now, every time you see a comment by "Adrian," you can be assured that I wrote it. Why? Because, simply, I'm the only person who can post comments with that name. Likewise, you may not post a comment as "Adrian H." or "Adrian Holovaty," although I will never use those names. If you attempt to use one of those names, you will be notified, pleasantly, that you may not.
Similarly, commenters from the general public may not use "holovaty.com" in the "Web site" form field.
Short of user registration, which I will never implement here, this is the best way I could think of to solve this potential problem.
As for the idea of reserving certain names for certain commenters, I've thought about it, but I have serious doubts about whether anybody would want to reserve his or her name in the Holovaty.com comment system. Let's be honest here: Who cares?
July 17, 2003, 2:34 AM ET
On hiring young Web developers
A response to Steve Outing's latest Editor and Publisher column, ""Attract the College Set With Design, Interaction":
One point I wish you'd mentioned is the importance for news Internet operations to hire young people. Speaking from experience, I'd argue that people of my generation are almost always more computer-savvy, more accepting of new ideas, more capable of learning new technologies quickly, more innovative/creative and just flat-out more likely to "get it." If you're aiming to attract the college crowd, it'd be incredibly beneficial to have a few folks from that generation on your staff.
The cynic in me realizes that maybe bigwigs don't care about any of that. OK, here's something that'll make 'em listen: Younger people have lower salary requirements.
July 15, 2003, 3:40 PM ET
More weather site questions and answers
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.
July 13, 2003, 4:22 PM ET
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.
- UPDATE, July 15: I've posted a separate entry that answers reader questions about the design.
July 2, 2003, 12:52 AM ET
Best practice: Edmunds.com zip-code prompt
I've complained before that news-site registration forms don't give users an incentive to give accurate demographic information. Here's proof that it can be done well.
Edmunds.com is an outstanding example of how to gather user zip codes more reliably and less annoyingly than similar implementations (e.g. usatoday.com and washingtonpost.com). Although Edmunds isn't a typical media site -- it provides car-buying information -- news site operators can learn a lot from it.
To see what I mean, visit the site's new cars or used cars section. You'll see this screen before you can access the content:
Why do I like this so much?
- It gives me a reason to provide a valid zip code. The "benefits of providing your Zip Code" are spelled out for me clearly and succinctly.
- It doesn't require me to give a zip code. The "Continue without providing Zip Code" link is right in front, as if to say, "We know some of you aren't comfortable giving away this information, and that's fine." That wins the site some extra credibility points.
The benefit for users: No hassle, and a better, more targeted browsing experience. The benefit for Edmunds: More accurate zip-code demographics. (Why take the time to enter bogus info when you can click a link to skip the form entirely?) And credibility/good vibes.
My only beef is that the site's privacy policy isn't linked-to from this page.
