Posts in the Redesign Category

After an extended hiatus, the Redesign Watch is back.  I’m celebrating its return with eight new entries, including the very recently announced HTML+CSS reworking of Slashdot.  I wonder how their work compares to the third-party job that Daniel Frommelt did a couple of years ago.

Since only the most recent five redesigns are shown on the home page, you’ll have to dig into the archive if you want to see all the new stuff—from Everything Tori on forward—or you could just subscribe to the RSS 2.0 feed.  You can find it and other meyerweb feeds on the Feeds page.  (Go figure!)

• Back On Watch was published on Thursday, September 22nd, 2005.
• It was assigned to the CSS and Redesign categories.
• There have been eleven replies.

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.

• Technorati Redesigns was published on Tuesday, June 21st, 2005.
• It was assigned to the Projects and Redesign categories.
• There have been nineteen replies.

Everybody’s favorite fringe news organization, CNN, has updated the design of their Web site.  Unlike the last three changes of design, I actually like this one out of the gate.  Yes, I always got used to the old designs and quickly at that, but at first I disliked them.  This time I’m impressed.  It’s a little bit sparse, but the restrained use of whitespace is a refreshing change from many news sites (*cough*Fox News*cough*).

In part, this may be because the design isn’t a redesign so much as a tasteful makeover of the old design.  By that, I mean that everything’s basically in the same place as before, just with a more serious look.  However, it’s the addition of extra functionality that really appeals to me.  For example, most section boxes now have the title followed by unobtrusive links to the main section page, video or other media, and then partner links.  These links add a lot without upsetting the apple cart, as it were.

I also note with a good deal of interest that CNN’s video clips are now free; previously, you had to pay money to see their video.  What forces led them to drop the subscription fee, I wonder?  I can think of some likely candidates, but it would be interesting to hear from CNN why they did it.

Of course, they’re only free if you have the Windows Media Player 9 plugin installed.  Otherwise, they’re simply unavailable.  Gah!

• CNN Redesigns was published on Saturday, June 18th, 2005.
• It was assigned to the Redesign category.
• There have been fourteen replies.

The visual design of meyerweb turned a year old on February 1.  As a little celebration, I’ve rolled out an update to the design.  In the past, I’ve thrown out entire designs for completely new ones, but not this time around.  This time, the changes are more of an incremental advance; or, if you prefer, a mutation of the previous design.  After all, the basic layout is the same as before.  I simply opened it up, allowing the various components more breathing room, and cleared away some of the clutter that had built up, such as the various “RSS 2.0” buttons.  (So how does one now get the feeds?  I’ll explain that in just a minute.)

There’s more to this than just a simple evolution, I admit.  The first major change is the addition of navigation links across the top of each page.  For some time now, a lot of the material that people come here to find was buried, difficult to find unless you knew where you were going, or else on what terms to search.  By pointing directly to the topic areas I think will most interest visitors, I believe the site is now much easier to use.

The second major change is the layout of “metainformation” for each post (and comments on posts). In this area, I was heavily influenced by Khoi Vinh’s Subtraction 7.0, and I definitely owe him a debt of gratitude and inspiration.  As will be evident from even a casual comparison of the two sites, I took a general design idea Khoi uses and adapted it to my particular situation.  I think it works rather well.

The third notable change is a feature addition that I’ve been planning to add for a couple of months now. New to the site is a Syndication Feeds page which brings together (dare I say it aggregates?) all of meyerweb’s RSS feeds.  The real step forward here is the debut of two new “Thoughts From Eric” feeds, including a feed of just technical posts and a feed of just personal posts.  Now all of you who just come here for the technical stuff, and couldn’t care less about the person behind the site, can restrict your feed to screen out the worthless drivel.  Similarly, those of you who know me personally but don’t understand the eye-glazing technical stuff can filter out the confusing nerdity.

Even better, each of the three “Thoughts From Eric” feeds (including the traditional “show me everything!” feed) comes in one of two flavors: summary or full content.  At long last, I’ll find out if providing full-content feeds drives my bandwidth consumption up, or eases it down.

I’ve also established a new Redesign Watch feed, which is something I know will be of interest to many visitors.

I made other small refinements throughout, and odds are I’ll continue to tinker for a little while.  Overall, though, I feel I met my goal of making meyerweb a more friendly site to visit, and a more feature-rich environment.  Explore, and enjoy.

• New Design, New Feeds was published on Saturday, February 5th, 2005.
• It was assigned to the General and Redesign categories.
• There has been one reply.

For no apparent reason other than I can, I’ve redone the sidebar to include a linkblog titled “Distractions.”  I did this by grabbing Markku Seguerra‘s wp-recent-links plugin and then hacking the holy bejeezus out of it.  I needed to add a “via” function, for example, and wanted to make the administrative interface a bit nicer.  That involved finding out how MySQL statements work (mostly by finding all the ways they don’t).  So, hack hack hack.  It was an interesting distraction.  I’ll make the files available in due course.

To make room, I took out the “Socialization” section because it seemed largely worthless; two of the services listed I hardly even look at any more, and the other one was mostly about me puffing up my ego in public, which nobody really needs to see.  I’m also thinking about taking out the Platelets because I don’t get to update it often enough, even though I have really soft spot for it in my heart.  We’ll see what happens.

Keen-eyed observers will notice that I backfilled a few entries from the past few days.  I needed test data, you know?

• Feeling Distracted was published on Monday, June 28th, 2004.
• It was assigned to the Redesign and WordPress categories.
• There has been one reply.

Congratulations to everyone who worked on the Blogger redesign!  I’ll have to start showing it off in presentations as another great example of standards-oriented design.

The PHP problems I was having in the archives should be all fixed up now.  Sorry about that—I had some HTML that was somehow interfering with the PHP calls, although I’m not entirely sure how.  In the course of conducting training this morning, I also discovered that I’d neglected to add alt attributes for the two RSS-feed buttons.  That’s fixed now too.  Apparently this was my day to find broken bits on the site, but at least they were bits I could fix.

Nick Finck, in citing his inspirations, had this to say about me:

One of the first presentations I ever heard Eric do was “CSS For Anarchists” and it really got me to think about CSS on a whole new level. Since then Eric has been a constant source of inspiration for me when it comes to CSS. As crazy as some of Eric’s ideas may seem, there is really some logical reasoning behind all of it.

Hey, whaddya mean crazy?!?  All my ideas are totally sane and rational.  It’s the rest of the world that’s nuts.  Now excuse me while I go adjust the geometry of my tin foil hat.

The “CSS For Anarchists” presentation was interesting for me too, as I was giving it at the same time President Clinton was giving a speech one floor directly above me.  I still wonder how many background checks were run on me, and whether they turned up anything good.  Because if they did, I’d like to know what.

• Blog Bits was published on Monday, May 10th, 2004.
• It was assigned to the Redesign category.
• There have been four replies.

Anyone visiting the main page of meyerweb with IE6 in the last fifteen hours (it’s now about 1300 EST) may have noticed the sidebar was intruding into the main content column, and generally looking icky.  The problem has now been fixed.  It happened thanks to, of all things, a bug in IE/Win’s rendering engine.  (Gasp! No!  How can this be?)

Here’s what happened.  I added the “Redesign Watch” and “Platelets” lists to the sidebar, which is actually marked with an id of extra in the source because it’s what I regard as extra material; it comes after the page’s content in the source.  I wanted the two lists to be side by side, and here’s how I originally did it:

#extra #redesigns {float: left; width: 9.5em;}
#extra #platewatch {margin-left: 9.5em;}

Simple enough, or so you’d think.  Instead, this caused IE6 to push the sidebar about half an em to the left, which is what led to the overlap.  The (previous) link at the bottom of the Platelets column was also way out of joint.  If I removed the two lists, then everything went back to normal.  So clearly IE/Win was having trouble with the floats, or perhaps with floats inside a positioned element.  At any rate, it was the new material that was triggering a bug.

I seriously considered doing this:

#extra>#redesigns {float: left; width: 9.5em;}
#extra>#platewatch {margin-left: 9.5em;}

By using the child-selection combinator (>), which IE/Win doesn’t understand, I could have entirely hidden both rules from IE/Win.  That would have meant the Redesign Watch and Platelets lists would simply follow one another, as Destinations does Navigation, because none of the floating or margin-modification would have been allowed to confuse Trident (IE/Win’s layout engine).  This solution, while practical, didn’t really satify me, so I decided to try another approach.  Perhaps floating both elements will be sufficient, I thought.  So:

#extra #redesigns {float: left; width: 9.5em;}
#extra #platewatch {float: right; width: 5.5em;}

It worked: the two lists ended up side by side as I wished, and the sidebar was no longer pushing its way into the main content column.

This should not have been a real surprise to me, as I’d been aware that IE/Win has trouble with floats overlapping the margins of normal-flow elements that follow them in the document source.  I just forgot, which I seem to do pretty regularly—it’s the one IE/Win bug I can’t seem to permanently store in long-term memory.  I have some hopes that writing it up will help affix it in my brain, in addition to helping out anyone who’s had similar problems with their layouts.

Thanks to The Ferrett for pointing out the layout problem, so I could track down and fix it.  I hadn’t sworn at IE enough this week anyway.

I also rediscovered Explorer’s lack of support for the keyword inherit.  So the “previous” link in the Platelets column will use a monospace font in IE.  Other browsers will properly see it in the site’s default font (Arial, as of this writing).  I could write a rule or two to make the display more visually consistent, but I decided against it.  In this case, I’ll accept the visual evidence of limitations in IE over needlessly complicating my CSS.

Oh, by the way… did you notice that I added HTML+CSS redesign and license-plate information to the sidebar?  My personal page also has a new sidebar feature, one which will be of particular interest to anyone who wants to know what I’m reading in my few spare moments.  These are all the result of my working on creating “blogmark”-type data structures and pushing them live via XSLT (<shudder />).  I haven’t bothered to set up individual RSS feeds for them, but it wouldn’t be difficult.  I may extend this to a real “blogmark” area where I point at stuff that I find interesting, but don’t want to spend time writing about.  Most of the things I’d be likely to link I’d be getting from other people’s blogmarks anyway, and somehow the process of taking someone else’s blogmark and turning it into a local blogmark just seems silly.

• It’s Always Something was published on Thursday, February 5th, 2004.
• It was assigned to the CSS and Redesign categories.
• There have been no replies.

As any visitor can easily see, the new design is in place and seems to be working smoothly.  In conjunction with the redesign, I’ve reworked the post structures and permanent URIs a bit.  The old URIs won’t change (’cause, you know, they’re cool) but moving forward, I’ve tightened the URIs up a bit.  In this, I followed Tantek’s lead to a large degree.  Generally my posts won’t include a timecode since it’s highly unlikely that I’ll post more than once per day.  (Shoot, any more I’m lucky to post more than once per week.)  If I ever do need a timecode for a post, it will be simple enough to add; my XSLT is already set up to handle it.

You may also have noticed that the posts previous to today have disappeared from meyerweb’s home page, and from the RSS feeds.  This happened because I rewrote some of the XSLT and changed the base XML structure of the archives, and trying to merge the old structure and transformations with the new ones was just too annoying for words.  So I’ve basically hit the reset button on the posts, although the old posts are still available from the archives, just as they always were.  It’s a temporary situation at best, since both the home page and RSS feeds will fill up as I write more entries.

As for the masthead image you can see today, it’s the same one I used for the Eos theme in the previous design, thus giving some minor sense of continuity to the process.  (Said image is the intellectual property of Tantek Çelik and used with his permission, by the way.)  The masthead image won’t remain constant—I’m planning to change it every week or two, with future images coming from photographs I’ve taken.  I already have thirteen ready to go, culled from the two thousand or so images in my iPhoto library.  I imagine that eventually I’ll add the ability to pick a favorite theme, or to pick one at random, or something.  I might even add the ability for you to supply the URI of an image you particularly like, although that seems a little obscure.  You can already do it with a user stylesheet anyway, since the site’s CSS signature (www-meyerweb-com) remains fully in place.  For those who feel the urge, the masthead images are 1280 by 128 pixels in size, and I’ve tried to keep them to 25KB or less.

Gradual changes will probably continue to happen for a while, in fact.  The sidebar content will be developed over time, for example.  I may also slowly enhance the design from its current sparse styling.  I doubt it’ll change a whole lot, to be honest, but I may from time to time test out new techniques or visual effects.

Let’s see, what else… oh yes.  If you’re using Mozilla or Safari (and maybe Opera), notice what happens when you mouse over the title of the post.  That’s generated content, not a background image, which is why Explorer doesn’t get the same effect.  This fails to bother me, since it’s more fun visual frosting than anything critical.  What’s interesting to note is that it doesn’t work in Safari 1.1 unless the border is changed in some way.  If the hover effect is removed, no generated content.  I wonder if that’s been fixed in the current internal builds.

The sidebar is absolutely positioned, and the gray area around the page content is the background of the html element (which means the black borders around the content are set for the body element).  The sidebar assembly was reworked so that it’s easy to add different content for different areas of the site.  For example, the Destinations on Kat’s page are different from those in my area of the site.  I haven’t done a lot with this capability yet, but probably will as time goes on.

That’s about it for now.  I’ll get back to the usual ramblings tomorrow.

• Rebirth was published on Sunday, February 1st, 2004.
• It was assigned to the CSS and Redesign categories.
• There have been no replies.