Superhot standards-based redesign

20 Mar 2009 3 pm eastern

Seed Magazine has received a killer redesign courtesy of Mike Pick and Tim Murtaugh.

And, except for the custom Flash-based video players, it’s all web-standards-based. CSS, XHTML, and JavaScript were never so hawt. Click on STUDIO in the nav bar, then explore SALON or SAVED BY SCIENCE to experience the new hotness.

Tags: tim murtaugh, mike pick, seed, seedmagazine

Filed under: Design, Web Design, Web Standards, Websites, development, links

19 Responses to “Superhot standards-based redesign”

Mike said on 20 March 2009 at 4:10 pm:

This is a great looking website.
Jeremy said on 20 March 2009 at 4:40 pm:

That is great!

Seed has a beautiful print design as well, nice to see the website matching.
Greg said on 20 March 2009 at 4:55 pm:

Tim and Mike do incredible work. It’s a pity that many people won’t or can’t appreciate their genius.
NIck said on 20 March 2009 at 6:59 pm:

Brilliant design no doubt! Not sure why they used non-semantic ID’s and class names like leftCol, rightCol or rightModule.
Ben Carlson said on 20 March 2009 at 7:15 pm:

Yeah, really nice looking site. Have always wondered how hard it would be to design and build a magazine site. Powered by EE, too, I think.
Stefan Seiz said on 21 March 2009 at 6:36 am:

Jeffrey,
as hot as it might be, isn’t it a bit ironic, that you have to say:
Click on STUDIO in the nav bar, then explore SALON or SAVED BY SCIENCE
Instead of just posting a direkt hyperlink (what the web is all about) ;-)
Christopher Fahey said on 21 March 2009 at 10:40 am:

Yes, the site looks awesome. Really elegant work.

But must we say that Flash-based video players are not web-standards-based? Does that mean that all video isn’t standards-based? Why not throw in GIFs then, too?

@Stefan: Jeffrey wasn’t merely suggesting to visit those pages. He was suggesting to use the cool STUDIO nav feature. Try it.
Party pooper said on 21 March 2009 at 12:28 pm:

Why this?

1
2
3
…

And why this? http://tinyurl.com/dd5h4z
Party pooper said on 21 March 2009 at 12:30 pm:

<ul id=”slideButtons”>
<li><a id=”sl_0″ href=”#”>1</a></li>
<li><a id=”sl_1″ href=”#”>2</a></li>
<li><a id=”sl_2″ href=”#”>3</a></li>
Jeffrey Zeldman said on 21 March 2009 at 1:48 pm:

And why this? http://tinyurl.com/dd5h4z

it would appear that the validator is complaining about missing alt text on images in a slideshow. Some of those images are invisible (via display: none). To a machine, an image that is hidden from the user via CSS still requires an alt text. To a thinking human being, however, an image that is hidden does not require alt text.

Do the other images in the slide show require alt text? They probably do. On the other hand, Tim or Mike might have made the decision that only sighted people who browse with images turned on would bother to visit a JavaScript-powered photo slide show. Thus the absence of alt text in these photos would not be a problem for these users.

(I don’t know if they made that decision based on that rationale, or if the absence of alt text on slide show images is an oversight.)
Feed Icons Exist for a Reason | ara pehlivanian—Web Standards, Web Culture, Web Everything.™ said on 21 March 2009 at 10:56 pm:

[...] just dropped in on the new Seed Magazine site after reading about its redesign on Zeldman’s site. After looking around a little I decided that I’d like to subscribe to its feed so as to keep [...]
Andrii Ponomarov said on 22 March 2009 at 8:23 pm:

Wow, but tags on the left are too light.
William Lawrence said on 23 March 2009 at 9:43 am:

but tags on the left are too light.

I agree. Visually, it kinda looks cool, however the design lacks functionally integrity. Having #ccc text on #fff background is one thing, but to leave out something as simple as :focus in their CSS demonstrates a very popular myopic understanding of standards-based design.

Of course, I’m being a bit persnickety, yet praise to copy and paste Meyerian reset CSS ought to be a bit more critical.
James said on 23 March 2009 at 11:49 am:

very nice… just don’t let the WCAG crowd see those left hand links!

(I find Jonathan Snook’s contrast tool invaluable in that respect)
http://snook.ca/technical/colour_contrast/colour.html
Jeffrey Zeldman said on 23 March 2009 at 3:56 pm:

Andrii, WIlliam, and James:

The links on the left hand side are light on the *home* page.

But what happens when you read an article?

For instance, this article.

Look at the left-hand links now.

Notice that the relevant ones POP.

They are very easy to read. The contrast is strong.

This contrast — this popping almost out of nowhere — calls your attention to the tag feature and (by its contrast with the nearly invisible affect of the rest of the tags) visually explains how the tags work.

To me this is smart UI design.

The team didn’t fail to consider contrast.

Rather, they considered it deeply and used it effectively.

That’s my opinion, anyway.
Don Builder said on 23 March 2009 at 4:37 pm:

I loooove the seed magazine.

Can I expand on your wonderful post?

The magazine team aim to tell the fundamental story of our world today and to provide information and knowledge to help us prepare for the story tomorrow.

There’s Development, Politics, Environment, Design, Business, Technology, Theory, Findings, and more.

This is an experiment in media, and yet an old cause in journalism…
John F Croston III said on 23 March 2009 at 11:40 pm:

As others have said the left hand navigations color contrast and brightness under WCAG 1.0 is way to low. the brightness should be >= 125 and the #CCC (light gray) on #FFF (white) is only 51, which is 40.8% of what it should be. While the color difference should be >= 500 and is only 153, which is 30.6% of what it should be.

I give the designer at my day job trouble if they are not on the money or at least close to the required numbers. These number are not even close to what they should be. I did notice that the color contrast is much great for items that are represented in the articles.

The color contrast and brightness also fail for WCAG 2.o and for all three color blindness tests. Try entering values to the following – Accessibility Color Wheel checker.

What is some one wanted to look at the tag “Leadership”, they would have a very hard time finding it in the navigation. Even when I pick “Leadership” from the navigation it does not highlight that item on the left. It does list articles in the content section of the page.

They also seem to not have any or many ALT tags on the home page. Even if they are hidden at some point with JavaScript or whatever they should still have ALT tags in case they become visible or an individual with a screen reader finds them and needs to know what they represent, unless they are decorative.

Not trying to be nit picky, just making sure I understand what I have read and put into practice.
Jeffrey Zeldman said on 24 March 2009 at 10:04 am:

They should have ALT text, and when you choose a tag like “Leadership,” it should highlight in the left nav. That it does not do so appears to be an oversight I trust the team will fix. (I noticed this problem as well.)
Ischa Gast said on 2 April 2009 at 3:12 pm:

Design is really nice, I like the clean style but it’s a pitty that it doesn’t fit 1024*768 screen resolution :(

20 Mar 2009 3 pm eastern

Superhot standards-based redesign

19 Responses to “Superhot standards-based redesign”

Speak up!

Elsewhere

The Deck

Job Board

See Me