Skip to: Navigation | Content | Sidebar | Footer


Weblog Entry

Redesign Technical Notes

May 30, 2004

Next in the series of follow-ups to this past week’s redesign is a look at some of the technical changes for the new mezzoblue.

Meta Data

Meta data is now showing up in the right-hand sidebar on pages where it feels appropriate. Each individual article has a special yellow “Context” box that informs the reader of what they’re looking at in plain English. These auto-generated pseudo-summaries are mainly for the sake of those coming in off Google, but I’ll be interested in seeing how valuable I find them myself when I hunt back through the archives for older entries. (I have to use this site too, after all).

The extended-sidebar concept is continued on monthly archive pages, where the space is used to host the calendar, entry list, and previous month listing. The old structure saw them cramped into the content area as a kludge and left unresolved for entirely too long. Problem now solved, and the new category archives continue the paradigm. I’ve been diligently categorizing each article for a year and a half; finally there’s a front end for viewing past articles this way.

Comments

Of course we’ve been over the new comment highlighting system which has seen some tweaking, and will no doubt continue to improve. The other change to comments on this site involved moving them away from the main article onto their own page. There are still a few technical issues to figure out to make this system work properly; at the moment posting a new comment dumps you back onto the article page and not the comments page as you’d expect, and I’m still working out how to use my standard templating given Movable Type’s reliance on .cgi pages for previewing and comment errors. (Shaun Inman and “M. Perakis” have suggested solutions which may lend themselves to this problem.)

But these are details, and this isn’t an experiment — I’m choosing to keep a degree of separation between the original article and the comments that go along with it. This is no bandwidth issue, it’s about perception and managability. Though I’m not opposed to a gentle shift off-topic provided there’s value in the discussion, when a web standards primer aiming to wean absolute beginners off of tables starts bandying about the phrase ‘MIME type’, we have a problem; one example, but more exist.

This is my way of allowing myself to care less, which means ultimately I’m placing more responsibility in your hands to keep the discussions relevant. If the comment pages become a typical message forum wasteland of inanity they will just go away.

Browser Compatibility

I’ll go into the CSS changes in the next article but there are a couple of browser support issues to highlight here. While I tested widely, the fringe cases popped up anyway. Win/IE5.5 renders properly, Win/IE5.0 is a mess. My testing in Opera 7.x checked out, but the menus didn’t function. This is an acceptable degradation, but some have pointed out they do work though not as expected. I don’t know why I continue to write code that Opera interprets differently than everything else, including IE6, but this is my curse. There should be a solution (indeed, one has been suggested) so a bit more testing should resolve this issue.

And then there are the IE6 problems. The first reared its head after commenters pasted long URIs into their comments. It has since been fixed. overflow: hidden isn’t an ideal solution, but it’s effective. The second came as a result of my effort to allow the top menu :hovers to function in IE. Since I didn’t need the whole IE7 suite for this I grabbed Peter Nederlof’s whatever:hover hack and after tying it into the style sheet, didn’t need to do anything else to get them working. But it seems the hack needs to parse the entire style sheet on each page load. Given my large CSS files the slowdown is unacceptable so we’re back to square one. No menus for IE users.

Content Management

The site is still running Movable Type and I’ve even upgraded to 3.0. During the redesign process (well before the MT fallout [large page load, may crash browser]) I began a conversion to WordPress. It’s way easier to say “me too” after the fact, but the more I use open source the more I want to use open source. (Not to mention the convenience of having the lead developer on my iChat list)

Figuring out my new templates and learning a new templating system at the same time proved to be too much of an uphill battle, so it fell by the wayside. Something has to be done sooner or later though, all’s not well. I’m unable to re-build archives past a certain point due to errors, and going back too far in the archives leads to breakage in both Radar and Proton thanks to an inability to propogate the new structure.

Whether this is a template error, a Movable Type error, a server error, or whatever else, I simply don’t know. Either I figure it out, I pay someone to figure it out, or I switch tools. Purely circumstantial: our intranet runs on MySQL (which is fast, I’m told), and the main weblog has upwards of 1100 posts. Posting a new comment takes 30 seconds to a minute, but other weblogs run by the same installation of MT are far quicker. It appears MT has growth issues, perhaps the 330 posts and 4750+ comments on this site are causing it to choke. Perhaps not. I simply don’t know.

Next up: CSS features, functionality, and tweaks.


Reader Comments

Matt says:
May 30, 01h

What happens to all the old comment “permalinks”?

May 30, 02h

It’s a shame you have only optimized the new design for Mozilla before publishing it. It’s a shame you don’t support well enough Opera at least. It’s a shame!

By the way, the old design is also not very well optimized for Opera (the top menu for instance). And the problem is not in Opera for sure as it supports everything you need.

And the color scheme, as some noticed before, is very bad to say the least.

DS: read the post you’re commenting on one more time, please.

Tomas says:
May 30, 02h

Lud Oligofren: Gee, why so chirpy? Did you win the lottery today? Please do continue to share your opinion, but keep in mind that it’s only your _opinion_, so have some humility about it.

I, for one, think the color scheme _rocks_, much better than the old design. In fact, this design is making my inspirational juices boil, I’m going to have to restrain myself to not steal some of this shit.

May 30, 02h

Dave,

I also find Opera to choke easily on code that works fine everywhere else. It is a frustrating browser.

As for the :hover in IE6, I’ve found a way to fudge it using javascript, and adding functions to the onmouseover and onmouseout events - you need a script to parse the page looking for the elements you want affected. Then just add the right CSS rule manually in a function, like

el.onmouseover = function() { this.className = ‘submitbuttonover’; };

or whatever. It works great for rollover “effects” on buttons, for me, and should work for your menus. But looking at your code, couldn’t you use the :hover for your link to open the menu? Or an “onclick” for IE?

Isn’t this crazy electronic world so much fun, though?

;-)

May 30, 03h

Hi Dave,

> overflow: hidden isn’t an ideal solution, but it’s effective.
I don’t know much about MT but why don’t you use a tiny serverside script for cutting to long URLs in the comments? I use preg_replace in this case.

May 30, 03h

FYI: currently, IE7 also parses all the style sheets in a page (i’ll make this configurable later) so it will have the same affect on load time as whatever:hover. I recently posted on an old blog of yours about caching on IE (specifically images). In researching this I am led to believe that CSS files are not cached by default (like images). Read this post for more info:

http://www.mezzoblue.com/archives/2004/04/08/ie_vs_image_/comments/

configuring your server to instruct IE to (correctly) cache common resources might lead to better performance of soultions like whatever:hover and IE7.

I’ve got a sample apache configuration here:

http://dean.edwards.name/my/flicker.html

ps. cool new look! tres slick. and some subtle gui enhancements…

Dave S. says:
May 30, 06h

Aaron: I was able to get plenty done hacking only the main .php file and the style sheet, but it was just happening too slowly. I really do like the way Movable Type handles templates, it makes plenty of sense to me. But I am for more familiar with it, so that must influence my preference.

Chris: That was my immediate thought too. I’ve had a few back and forths with Peter-Paul Koch, and with our very minimal testing it appears it works as we’d expect only when the CSS file is linked separately from the HTML, not @imported from the CSS. Which is a small problem for my style switching, but perhaps not insurmountable.

Matt: yeah. They break. Can you check the referral URL for an anchor using PHP?

Lud: Read the post you’re commenting on again, please.

Tomas: thanks!

Chris: whatever:hover does similar to that, which was the incentive for using it.

Jenna: got a link for that? My PHP is pretty basic.

Dean: I get the feeling the problem isn’t caching, rather that the HTC files are executed client-side. Which means every new page load results in the script executing again, so no amount of caching would fix it. I could be wrong, but I doubt it in this case.

May 30, 06h

Although I read everything you put up one here, these walk throughs are far and away my favorite reads. I consider myself a “budding” web designer - with just a few corporate sites under my belt - and really appreciate these explanations/discussions of what you go through when designing and building a new design.

DarkBlue says:
May 30, 06h

I have resisted commenting on the design until now as I wanted to familiarise myself with its nuances before posting…

First of all, I’d like to congratulate you Dave on the beautiful new template. Having got over the initial shock of the redesign, I am beginning to really appreciate the subtlety of the colour-scheme and the direction the design has taken. Your use of whitespace and black text/white background also appeals to me.


Meta Data

The clear and concise metadata is good. It’s very user-friendly and, thankfully, lacking in the (dare I say it?) clutter of its predecessor. However, I miss having all that functionality to hand (yes, I know I can use the style-switcher) and have been considering possible alternatives.

I would prefer a dynamic sidebar with a selection of panels that could be switched between visible and hidden as required. Dunstan’s blog includes a good example of this in action (ref: http://www.1976design.com/blog/ ).

I would also question the utility (but not the implementation) of the “pseudo-summaries”. Surely a simple breadcrumb-trail would offer the same information in a format that is widely-understood and something of a standard these days? The “pseudo-summaries” lack the visualisation-of-structure that a breadcrumb trail offers in my opinion.


Comments

You’ll probably be relieved to learn that I have no opinion on your comment highlighting. I appreciate that it is useful to both yourself and a portion of your readership. It doesn’t affect me, one way or another.

I applaud your decision to move comments on to their own pages. I have never felt comfortable with presenting article and comments together. These are related items of content, but they are also distinct from each other. It is generally the case, in my experience, that both can be digested independently.

For example: I often visit this site (and many others) and just read the articles. However, sometimes I will visit just to participate in a particular comment thread, which I can do without even a cursory glance at the parent article.


Content Management

Your informant is correct. MySQL is one the fastest RDBMS’ out there, even usurping Oracle in the performance stakes (ref: http://tinyurl.com/27efd )!

MySQL scales extremely well and the database you are describing is small-fry for such a heavy lifter. So the problem is unlikely to be there.

As you probably know, MT is written in Perl. Perl is an interpreted language and has very high overheads.

Looking at your hosting platform on Netcraft, I immediately noticed that you don’t appear to using mod_perl (ref: http://perl.apache.org/ ). If you’re not, then you should be. The difference between Perl (launching afresh with each request) and mod_perl (memory-resident) is truly amazing. I adopted it a couple of years ago and saw request-service times drop from tens-of-seconds into the enviable sub-second zone.

mod_perl is used to power high-volume websites like IMDB, /., Wired, CMPNet, Macromedia, Adobe, ValueClick… do you need any further convincing?

If you are already using mod_perl (NetCraft can’t “see” it if it’s behind a proxy or load-balancer, etc), then I suggest you look at the hardware: Check that your disk sub-system is not choking and that you have sufficient RAM in your server for the volume of traffic you service.


Printing

Your print stylesheet could use a revision or two. There is far too much cruft on the print output including:

1.5 pages of a textual version of your “about”, “weblog” and “contact” menus
1 page of “About this Entry”

I might be wrong, but I feel that neither of these are required or appropriate for the printed page.

Alistair says:
May 30, 06h

Dave,

I can’t imagine that it is mySQL that is the problem with the performance. The mySQL database might not be perfect, however it does perform amazingly well in my opinion.

A forum I read daily (*cough* half hourly *cough*) takes a 700-1000 user load every day. Content is pulled from the one machine (ie the db isn’t split over multiple servers) and powered by a single box running IIS/Coldfusion and just eats it up.

More likely, you’d think that the problem is the structure of the database than the db server itself. I haven’t personally, however have you looked into the strucutre of the database which MT uses? It could be quite poor and not lend itself to high performance. I guess it could also be the physical machine that your site is hosted on, shared hosting environment and taking a lot of load maybe?

Al.

May 30, 06h

>Dean: I get the feeling the problem isn’t caching, rather that the HTC files are executed client-side.

believe me. the main overhead on these kind of scripts is loading the external data. sure, there is an overhead for the script executing but sending http requests for five or six style sheets is also an overhead. i’m looking into this right now and well, i’m not sure either. but when testing IE7, i notice slow connections rather than slow machines..

perhaps a kindly server/comms expert could shed some light on this?

DarkBlue says:
May 30, 06h

Re: Server performance.

This is speculative: Are you using “.htaccess” files in your web directories (root or otherwise)?

If so, are they complicated (rewrites, etc)?

If you are, you should consider moving their directives into “httpd.conf” or loading the files with “httpd.conf” (via the “Include” directive).

The “httpd.conf” file (and any includes) are processed once, at server start-up. Whereas “.htaccess” files are processed with EACH REQUEST and sap performance considerably, especially if they contain rewrite directives (regardless of whether you’re using mod_perl or not)!

May 30, 11h

I use Wordpress in at my site currently, and i’ve hacked every file in the distribution to get my site to look like I want it. I was wondering if you ran into similar problems during your exploratory conversion to Wordpress, and if you think a better templating solution for Wordpress would really solve the problem.

May 30, 12h

To fix the problem with IE6/IE7 load time, you might try loading the hover effects CSS off onto its own file. I haven’t used IE7 yet, so I don’t know how that would work.

May 31, 02h

Metadata:

Dave, is this a part of page itself, using MT template tags to generate it, or do you write it to a separate file and include the data when the page is requested?

@import and styleswitcher:
What I often do (and something I’ve learned from looking at the code of some webpage Douglas Bowman made) is refering to a stylesheet using an ordinary ‘link’ tag, and on the stylesheet I use @import directives to import other stylesheets.

This way I have the benefit of both alternative sheets and the @import hack. Would this be an option to solve the described problem?

dusoft says:
May 31, 02h

Dave,

thank you for sharing with us. I do not use neither MT, nor WP, but I found your explanation quite interesting and I am awaiting what’s coming next (CSS features, functionality…).

And BTW: The new design was shock, but very pleasant one I like the top menus, very cute.

PS: Comment previewing is now without CSS styles applied?

Susanna says:
May 31, 02h

The metadata sidebar is a great idea for a large blog on a site with a lot of information. I’m used to using “breadcrumbs” and headers for context, but this takes it a step further. Something to think about on future sites for certain.

I’m conflicted about the redesign of the blue bar across the top. I like the functionality of the rollovers (puts the comment form on every page, essentially), but I get the sense that my monitor is too large for the background image to look right.

haze says:
May 31, 04h

o__0 your design reminds me of a hybrid cross between mondrain and the smurfs… or maybe a mondrain smurf? mondrain smurf high on crack? ;)

Trent says:
May 31, 05h

“Figuring out my new templates and learning a new templating system at the same time proved to be too much of an uphill battle, so it fell by the wayside.”

I don’t get it. The first line of the Wordpress stylesheet says “Default WordPress by Dave Shea || http://mezzoblue.com”. I would think designing the stylesheet for Wordpress would be a pretty good learning excercise.

BTW, on an unrelated note, whenever I fill in a text box on your site (such as my name/email/url) using Firefox, the drop-down box that shows remembered values is out of place. Check out the pic here:

http://tinyurl.com/32gq4

Daynah says:
May 31, 06h

I have to say, I love what you’ve done to this place. :) The design is beautiful and professional. Love it!

Also, I’ve been using b2 (pre-wordpress) ever since Michel started scripting it. Wordpress has come a long way, and I’m glad more users are able to enjoy and appreciate it. :)

May 31, 12h

Hej from Germany.

It is only a very little and simple funktion, see http://jeenaparadies.de/test/click_uri.html

Jeena

JaX says:
May 31, 12h

The new coding is inspiring and brilliant, but I just can’t dig the design. I, for one, loved your old blue layout. I’m sure you can do better. The crossed out comments are a bit rude. Making them a slightly transparent color does the trick without dismissing what the person has to say.

Still, I love this site! Keep up the great work.

23
Mike K says:
June 01, 06h

As for the :hover issue, I think this script may be more of a solution you are looking for. It appears to me that rather than load the entire css file, this script just listens for events and then adds a classname during these specific events (hover and active). I may be looking at it wrong, but it looks like something you may be interested in Dave:

http://www.vladdy.net/Demos/IEPseudoClassesFix.html

Anil says:
June 02, 04h

“It appears MT has growth issues, perhaps the 330 posts and 4750+ comments on this site are causing it to choke. Perhaps not. I simply don’t know.”

I doubt that’s the cause of the problem… MT’s running sites like About.com that have hundreds of weblogs, each the size of yours. The most common cause of problems with posting or slowdowns are either not using a database (using BerkeleyDB, for example, instead of PostgreSQL or MySQL) or having template tags that are doing intensive loops on posting.

“MySQL scales extremely well and the database you are describing is small-fry for such a heavy lifter. So the problem is unlikely to be there.”

Agreed. And static pages will always scale better than dynamic ones, so it seems to indicate some configuration or setting tweaks are in order.

“As you probably know, MT is written in Perl. Perl is an interpreted language and has very high overheads.”

Yep, Perl is interpreted. As is PHP, or virtually any other scripting language that blog tools are written in. mod_perl will certainly make a big performance improvement, and MT runs just fine under it.

It seems most likely that there’s some parts of the page (like the metadata) that are more compute-intensive to generate, or that you’re rebuilding more pages than you need to at post time. (Though MT3 is a lot smarter about what it chooses to rebuild) It’s still better than forcing a dynamic build for each person that visits your site, better you once than each of your readers once, but I bet it could be optimized a lot.

Scott says:
June 02, 08h

Small typo - I believe it’s “manageability.” ;)

Understanding IE’s lack of :hover support, it would still be nice to be able to see those spiffy drop-down menus in that browser. Arguably, having to script in support for a “crappy” browser isn’t fun - but when it’s the vast majority of the market, the support thing is a consideration.

26
ross says:
June 02, 09h

Not meaning to respark the comment sorting debate. But I think manual highlighting as you have resorted to doing atm is going to be a rather time consuming approach.

What about some type of meta-moderation system ala slashdot/slashcode. That way we can rate responses as a democracy. A simple 3 radio button selector per comment should provide enough granularity.

Peter says:
June 02, 10h

I must admit the first time I saw this new design it did strike me as sub-par. I thought you could do much better, and that it appeared to be something you threw together in an hour. After allowing it to sit for a number of days, I now have to say that I rather like the new design. There is beauty in its simplicity. Although it is not nearly ‘friendly’ to IE, that it something that we must live with. A number of the above fixes seem to have merit, and I’m going to try them out myself to see if I make hacking for IE a bit easier.

Peter says:
June 02, 10h

I must admit the first time I saw this new design it did strike me as sub-par. I thought you could do much better, and that it appeared to be something you threw together in an hour. After allowing it to sit for a number of days, I now have to say that I rather like the new design. There is beauty in its simplicity. Although it is not nearly ‘friendly’ to IE, that it something that we must live with. A number of the above fixes seem to have merit, and I’m going to try them out myself to see if I make hacking for IE a bit easier.

June 03, 05h

Dave,

For replacing links, the PHP you require is below. This little function will replace http://hugelonglinks with (www) - you could alter the script to set it to only do that for links that are longer than x characters (or cut them in the middle http://huge…links like so). If you’re unsure how to do this - drop me a line, I’d be glad to help =)


Sorry about the lump of code here, I figure it’s quick and useful for everyone, so sorry if I scare any web beginners off (as noted in your post) =/


function displayAutoLinks($input) {
$input = str_replace(“http://www.”,”http://”,$input);
$input = str_replace(“www.”,”http://”,$input);
$input = ereg_replace(“[[:alpha:]]+://[^<>[:space:]]+[[:alnum:]/]”,”(link)”, $input);
$input = ereg_replace(‘[_a-zA-Z0-9-]+’ . ‘(.[_a-zA-Z0-9-]+)*’ . ‘\@’ . ‘[_a-zA-Z0-9-]+’ . ‘(.[_a-zA-Z0-9-]+)*’ . ‘(.[a-zA-Z]{1,5})+’,”(email)”, $input);

return $input;
}


As for your problems with templates and what-not, sorry about the self-plug, but take a look at my site engine, Lamina - http://seuj.com. As you can see it’s still a long way from finished and in development, but it’s built from the ground up with standards in mind, and all the backend templates for the pages are pure XML. Maybe you’d find that a lot easier to understand given your background in web design. As before, drop me a line if you’re interested.

30
james riley says:
June 03, 08h

FYI, your site does not work on Opera 7.50 windows XP. a very standards compliant browser…

June 03, 09h

Dave, absolutely love the new layout. It looks great in Konqueror 3.2.1 too. I did not have to tweak the font, thank you. I think that it is because sans-serif is the first font in the list so it displays properly due to the fact the sans-serif on my Gentoo system is Luxi Sans. Awesome work!