Technorati Redesigns

Published 19 years, 5 months past

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.

Comments (19)

  1. 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. 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. 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. 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. 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. 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. 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. 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. The lines as mentioned in #1 do not extend on the light gray boxes in Safari.

  10. 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. 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. Hmmmmmmmm *bites lip*

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

  13. 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. Wow! Very impressive! Keep up the good work.

  15. 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 ::

    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 ::

    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. 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 ::

    justaddwater.dk | Rounded Corners the Technorati Way

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

Add Your Thoughts

Meyerweb dot com reserves the right to edit or remove any comment, especially when abusive or irrelevant to the topic at hand.

HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <em> <i> <q cite=""> <s> <strong> <pre class=""> <kbd>

if you’re satisfied with it.

Comment Preview