Comments on: Technorati Redesigns

By: justaddwater.dk | Rounded Corners the Technorati Way

justaddwater.dk | Rounded Corners the Technorati Way — Thu, 15 Feb 2007 11:01:20 +0000

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

By: Nicholas Shanks

Nicholas Shanks — Mon, 16 Jan 2006 12:16:13 +0000

The best line in the new design is this one: 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; }

By: Take My Advice - I’m Not Using It! » Welcome New Students!

Take My Advice - I’m Not Using It! » Welcome New Students! — Thu, 10 Nov 2005 23:27:39 +0000

[...] 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 [...]

By: High Context Consulting » Blog Archive » Technorati Redesign

High Context Consulting » Blog Archive » Technorati Redesign — Wed, 05 Oct 2005 12:10:45 +0000

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

By: T. R. Valentine

T. R. Valentine — Sat, 02 Jul 2005 13:48:47 +0000

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.

By: mary

mary — Fri, 01 Jul 2005 18:36:55 +0000

Wow! Very impressive! Keep up the good work.

By: Mike S

Mike S — Tue, 28 Jun 2005 04:09:24 +0000

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.

By: Matt Robin

Matt Robin — Mon, 27 Jun 2005 19:31:16 +0000

Hmmmmmmmm *bites lip*

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

By: Eric Meyer

Eric Meyer — Mon, 27 Jun 2005 19:15:19 +0000

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.

By: Mike S

Mike S — Mon, 27 Jun 2005 19:00:25 +0000

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.

By: Noah

Noah — Fri, 24 Jun 2005 22:23:23 +0000

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

By: Steve Pugh

Steve Pugh — Wed, 22 Jun 2005 09:18:21 +0000

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 elements is a bit vague (does = ? 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.

By: Riddle

Riddle — Wed, 22 Jun 2005 08:10:39 +0000

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

By: Tobias Parent

Tobias Parent — Wed, 22 Jun 2005 05:02:26 +0000

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:

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

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!

By: Peter Foti

Peter Foti — Tue, 21 Jun 2005 22:37:16 +0000

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