meyerweb.com

Skip to: site navigation/presentation
Skip to: Thoughts From Eric

Technorati Redesigns

It’s the time for redesigns, I guess—CNN did it over the weekend, and now Technorati has taken its beta design final.  I’m proud to say I had a part in making Technorati’s new look possible.  The graphic design was done by Derek Powazek, and from his graphic comp files I produced the XHTML and CSS.  Then I had to run the Tantek gauntlet; the job wasn’t done until he approved of the code I’d produced.

If you dig under the hood of the new design, you’ll probably find things you’d have done differently.  I’m not going to go into a detailed post-mortem here, but suffice to say that every choice was made within the project’s defined constraints.  So when you see, for example, a bunch of b elements used to create the corners, that approach was the best choice for the project: it best satisfied the concerns and demands of the various people involved.

This is not to say that my choices were the best for other projects with similar design demands but different technical demands.  They aren’t.  At a certain level, there are no canonically right answers.  There may be a whole spectrum of related solutions, where one variation is better for this project and another for that one.  And people like me, despite all their experience and knowledge, don’t always hit the right answer on the first try.  My initial approach to the corners is not what you see in the final markup.

That said, I am pleased with how I combined positioning and sprite-like styling to get the corners to work.  I know each technique has been done before, but I’m not aware of previous combinations of the two.  So that’s definitely a point of pride.  I hope to find time to document the details of this particular corner solution, along with variant approaches.

I’d like to thank Derek and the rest of the Technorati team for letting me be a part of the redesign project, and for giving me a chance to flex my creative and technical muscles.

19 Responses»

    • #1
    • Comment
    • Tue 21 Jun 2005
    • 0132
    Stephane wrote in to say...

    It looks fantastic! Great job. The way you handled the rounded corners is interesting but in the two light grey boxes the bottom border extends on both sides (Firefox). I’m not sure if that’s a bug or you intended it that way.

    • #2
    • Comment
    • Tue 21 Jun 2005
    • 0136
    Steven Ametjan wrote in to say...

    The method of creating the rounded corners, in conjunction with the CSS-Sprite technique is a combination I have been toying around with for a corporate intranet redesign I am in the middle of. The nice thing about the combination of the two methods is that it allows all four corners to display simultaneously.

    Additionally, while many people might complain about the use of b tags, I see no problem with the use. The b tag holds no more semantic value than a span tag, and ends up in a total of 6 less keystrokes to create one corner’s markup. It reminds me of one of your posts

    • #3
    • Comment
    • Tue 21 Jun 2005
    • 0336
    westi wrote in to say...

    The redesign looks fantastic. Now we can see the corner effects demonstrated in the workshop in context!

    However as Stephane says the bottom border of the two light grey boxes is extending to the edge in firefox (Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.8) Gecko/20050511 Firefox/1.0.4).

    • #4
    • Comment
    • Tue 21 Jun 2005
    • 1035
    Richard Downton wrote in to say...

    That’s a point… Are these the same corners that you demonstrated at the London CSS workshop? They certainly look very similar in design.
    Anyway the site looks very nice… really clean, good job.

    • #5
    • Comment
    • Tue 21 Jun 2005
    • 1837
    Peter Foti wrote in to say...

    1280 x 1024 resolution: The bottom does not extend all the way to the end of the view port. Result: the gray box on the bottom has rounded corners on the top, and then square corners on the bottom. Bug or feature? You decide. :)

    • #6
    • Comment
    • Wed 22 Jun 2005
    • 0102
    Tobias Parent wrote in to say...

    Very impressive. Elegant in its simplicity, and complex under the hood. I like it. However, (there’s always a however…) I did notice a glitchy thing happening in one of the news articles. Not sure what was happening, but here’s the HTML from it:

    <h4><a href="http://www.cnn.com/2005/LAW/06/21/mississippi.killings/index.html” title=”Read this news story">CNN.com – Former Klansman�found guilty of manslaughter – Jun 21, 2005</a></h4>

    For some odd reason, in Firefox v1.0.4, the word ‘found’ is hanging way off the right side of the enclosing box. In Safari, it’s all OK, except that the question mark seems to be some unrecognized code – it’s displayed inline as a question mark in a diamond character. Odd, but thought you’d like to know.

    I realise that the articles/news/links aren’t a key part of the design, but if they break the design, there’s (obviously) a problem.

    Regards!

    • #7
    • Comment
    • Wed 22 Jun 2005
    • 0410
    Riddle wrote in to say...

    I don’t like new presentation on my site.. I used to have normal “Technocrat” link with img, turned off by CSS… and now ugly .. thing. Look at this please:

    http://img279.echo.cx/img279/2848/technorati9iw.png

    • #8
    • Comment
    • Wed 22 Jun 2005
    • 0518
    Steve Pugh wrote in to say...

    The tags page http://technorati.com/tags/ demonstrates an Opera bug. Opera has several rounding error bugs and the font-size: 1.03em that’s used for the tag sizing triggers one of them. All the tags appear the same size as the text size is rounded down.

    This also leads to the realisation that “The bigger the text, the more active it is.” isn’t very good accessibility. As the semantics of nested <em> elements is a bit vague (does <em><em> = <strong>? and similar navel gazing) it’s not certain how a user who doesn’t see the font sizing can gain the same information as one who can.

    • #9
    • Comment
    • Fri 24 Jun 2005
    • 1823
    Noah wrote in to say...

    The lines as mentioned in #1 do not extend on the light gray boxes in Safari.

    • #10
    • Comment
    • Mon 27 Jun 2005
    • 1500
    Mike S wrote in to say...

    As a person not lucky enough to have attended the London workshop, I can’t compare these corners to a previous technique. I did want to ask about the use of -x-background-{x,y}-position as opposed to background-position. If I understand correctly, the -x prefix indicates an experimental CSS attribute, so in what circumstances should one use this sort of experimental attribute instead of an official one? I’d be interested to hear the reasoning behind it; thanks.

    • #11
    • Comment
    • Mon 27 Jun 2005
    • 1515
    Eric Meyer wrote in to say...

    Richard and Westi: yes, it’s the same technique I demonstrated in the workshop, and included sanitized versions of the markup and CSS on the Survival Kit CD.

    Various others: there may be rounding bugs in browsers that cause some odd effects. We grappled with those and decided that minor presentational oddities were a price worth paying for the benefits.

    Riddle: your image didn’t provide any context, so I don’t know what you’re complaining about, let alone how it might be fixed. Sorry.

    Steve: that’s a bug Opera needs to fix. I think you raise a good question about the accessibility and general advisiability of “bigger means more important”, but that’s independent of Opera’s messing up relative font sizing.

    Tobias: that appears to be an encoding problem, with some browsers doing strange things with an unusual character. There isn’t much I can do about it. The Technorati gang is going to have to either filter out problematic characters, or else just live with the weirdness. I did report it to them, so hopefully they’ll come up with a fix.

    Mike: I didn’t use any -x-background-{x,y}-position properties; I simply used background-position when I needed to alter the position of a background’s origin image. A quick search of the CSS imported into the Technorati home page confirmed this for me. If you can point to a Technorati-based CSS file online that contains what you’re talking about, with a complete rule containing the properties in question, that would help a whole lot in providing an answer.

    • #12
    • Comment
    • Mon 27 Jun 2005
    • 1531
    Matt Robin wrote in to say...

    Hmmmmmmmm *bites lip*

    The site is obviously well built throughout and beacon of superb CSS coding. Well done Eric et Al.

    • #13
    • Comment
    • Tue 28 Jun 2005
    • 0009
    Mike S wrote in to say...

    Thanks for such a quick response! In my efforts to attack the code without getting lost in a sea of CSS, I dove right to the corners by using the Firefox DOM Inspector to examine those areas. In Firefox 1.0.4, the DOM Inspector’s CSS Style Rules view seems to rename the background-position attribute to the -x-background attribute I mentioned. When I switch to the Computed Style of the object, though, the background positioning seems to disappear.

    • #14
    • Comment
    • Fri 1 Jul 2005
    • 1436
    mary wrote in to say...

    Wow! Very impressive! Keep up the good work.

    • #15
    • Comment
    • Sat 2 Jul 2005
    • 0948
    T. R. Valentine wrote in to say...

    RE: link on ‘Redesign Watch’, not Technorati

    On the home page, in the ‘Redesign Watch’ section is a link to Huntington Banks. I tried to look at it with Opera 8.01 and received Recommended Browser Software notice advising me to ‘upgrade’ to IE6+ or Navigator 7+. Stupid page didn’t even have a charset and couldn’t be analysed by W3C validator because it used an ASCII character.

    Good grief.

    • #16
    • Pingback
    • Wed 5 Oct 2005
    • 0810
    Received from High Context Consulting » Blog Archive » Technorati Redesign

    [...] ogging Policies » Technorati Redesign Eric Meyer discusses his role in the recent redesign of Technorati. I was pleased to have Eric work on [...]

    • #17
    • Pingback
    • Thu 10 Nov 2005
    • 1827
    Received from Take My Advice - I’m Not Using It! » Welcome New Students!

    [...] icks of the Trade – Professional secrets from those in the know. Eric Meyer discusses the Technorati Redesigns that he and Derek Powazek recently completed. Technorati [...]

    • #18
    • Comment
    • Mon 16 Jan 2006
    • 0716
    Nicholas Shanks wrote in to say...

    The best line in the new design is this one:
    <body id="technorati">
    Since it allows me to restyle anything I like without the fear of other websites being affected. I really believe everybody should do this, or alternativly that CSS should have a hostname selector, perhaps something like:
    .box[@technorati.com] { background-image: none; corner-radius: 8px; box-shadow: 0.2em 0.2em #DDD; }

    • #19
    • Pingback
    • Thu 15 Feb 2007
    • 0601
    Received from justaddwater.dk | Rounded Corners the Technorati Way

    [...] info Eric Meyer: Technorati Redesigns (June 2005) Smileycat: CSS Rounded Corners [...]

Leave a Comment

Line and paragraph breaks automatic, e-mail address required but never displayed, HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



Remember to encode character entities if you're posting markup examples! Management reserves the right to edit or remove any comment—especially those that are abusive, irrelevant to the topic at hand, or made by anonymous posters—although honestly, most edits are a matter of fixing mangled markup. Thus the note about encoding your entities. If you're satisfied with what you've written, then go ahead...


June 2005
SMTWTFS
May July
 1234
567891011
12131415161718
19202122232425
2627282930  

Sidestep

Feeds

Extras