Meryl.net Home About Blog Clients Services Contact

Meryl's Notes Blog

Things wordy, geeky, and webby

Redesign – At Last?

Tuesday, January 21st, 2003 at 6:35 AM Category: Meryl's Notes Blog 7 comments

I’ve been talking about redesigning this place for exactly a year now and got no where as many other things jumped ahead of the redesign by way of priority.

When I got stuck reviewing a chapter of a technical book, I started working on the redesign. I couldn’t handle the chapter anymore and I needed to get rid of hard to read background on this site.

After bravely inviting a few helpful souls to review the first and current draft, I’m ready to share, I think.

The meryl.net redesign uses CSS and XHTML. It’s not perfect since I plan to add more accessibility code and a style switcher. It was too much work to try to do it all at once. Slowly, I’ll be switching to the new design and I hope to move it to a new server because this damned server can’t handle rebuilding this blog anymore.

OK, criticize away.

Tags: Leftovers

Subscribe to this here blog: RSS or E-mail

7 comments

Posted by Jay on January 21st, 2003, 8:18 AM
I see nothing to be critical of, rather I congratulate you on a very eye catching design.
Posted by Cornelia on January 21st, 2003, 11:06 AM
Congratulations! – it’s a very comforting design. In comparison to the previous design I like especially the new colours and the navigation.

I would give the BoxTitles of the right side the same surface as the TopMenu-box in the main part (padding: 2px; border: 1px solid black; or border-bottom: 1px solid black;) or would make the header completely part of the box with:

.BoxTop {
background-color: #fff;
border: 1px solid black;
margin: 50px 20px 10px 0px;
padding: 0;
color: black;
}
.Boxtitle {
font-weight: bold;
margin:0px 0px 12px 0px;
text-align: center;
display: block;
padding: 2px;
background-color: #f4e4cb;
border-bottom: 1px solid black;
margin: 0;
}
.BoxContent {
font-size:.75em;
line-height:1.5em;
font-family:verdana, arial, helvetica, sans-serif;
padding: 5px;
}

But there might be reasons not to do that this way, you will know it better .
Posted by Simon Jessey on January 21st, 2003, 2:59 PM
I like the redesign. It is cleaner and more functional than your current effort. It is MUCH easier to read, although I would consider upping the default font-size just a bit (on everything). For extra accessibility, you could move the markup of the top nav below your main content and then use CSS absolute positioning to stick it back up where it belongs.

I should point out that it is what you write that makes your blog such an interesting read, not how you present it.

Nice job, Meryl, and a belated Happy Birthday
Posted by Simon Loughran on January 21st, 2003, 5:29 PM
Like it. This design is certainly a big improvement. Clean, well-layed out and accessible. Looks good in all my browsers.

My only real criticism is that the font is too small. I’m strongly in favour of leaving font sizes for the main content of a page at 100%, thereby allowing visitors to read text at a size that they have decided is comfortable for them.

Just a few other suggestions:

The right hand boxes would also probably look a bit nicer with some padding.

Regarding the links in “TopMenu”: When viewing with Opera 6, the underlines caused by the hover state sit right against the bottom border of the box and look a bit ugly. You might want to increase padding-bottom to about 5px to fix that.

I’m not sure about grey for visited links. It just doesn’t seem to fit in with the rest of the page’s colours.

Anyway, nice design. Hope to see it up soon.
Posted by Dori on January 21st, 2003, 6:14 PM
I love the look, but the links on the right hand side are too small in IE/Mac OS X.
Posted by steve on January 21st, 2003, 6:40 PM
Excellent – I love it!
Posted by vanderwal on January 21st, 2003, 8:22 PM
I really like the new layout redesign. The content is much easier to read in the redesign (on Mac OS X in Safari). You may want to add some contrast to the headers in the main content box to help differentiate it from the right side boxes.