New Site Layout
Okay, it’s finally out there, and I’m welcoming feedback. First, let me take care of the obvious.
# The redesign is not site-wide. It will be in its final incarnation, but for now I’m focusing efforts on the cover page. It’s just easier to make changes on one page rather than hundreds.
# It looks like crap in Opera. Sorry. Perhaps together we’ll figure out why Opera is appending page icons to every freaking link on the page.
# The HTML doesn’t validate. One thing at a time. 
The new design really builds on what I’ve been learning about web design over the past year or so. There were really two main goals for this project: maintainability and simplicity. Our Story was rapidly outgrowing itself. The random photos on the sidebar were getting old. The Of Interest links felt like a hack. Chunks of static content were getting stale. Bits and pieces of the site were being overlooked and either got crufty or would break altogether. I wanted the redesign to be able to cope with more changes down the line rather than create more work. This involved (will continue to involve) quite a bit of choping and hacking on the back end.
One of the first things to go was Dean Allen’s wonderful Refer. Nothing against Dean, I just think I’ve calmed down a bit in terms of tracking who is visiting the site. Not too long ago, I was obsessing over every single inbound link to our site, trying to figure out who was talking about it, when, and how they got here. This gets old after a while–I’m chalking it up to personal growth. 
Beyond that, though, Refer has been the target of referrer-log spam campaigns. Keeping up with the spammers was too much of a headache, and I was loathe to give them free Pagerank, so Refer’s gone. It may come back as some other form, but probably not for the general public to peruse.
From an information architecture perspective, the site has taken on a particular paradigm that I’ve been thinking about. This paradigm focuses on the question of whether or not a site section has breadth or depth. If the section has breadth, it generally has a few spread-out pages at close to top-level URLs. The About section is a good example of this. There’s a description page, a templates page, and my résumé, and not much else. Site sections with depth, on the other hand, generally have an archive strategy that involves ordering entries by date or category or both. The Links section and the Blog both fit this criteria. For every site section that has depth, I’ve created a whole new blog in Movable Type. It sounds like a lot of overhead, but, if set up properly, can make routine updates a breeze. If there’s interest, I’ll maybe post more information on our site structure, but I’ll leave it at that for now.
As far as the layout of the pages is concerned, I’m focusing on the same simplicity that the previous design had, while expressing some (hopefully) more developed tastes in typography, whitespace, and balance. The sidebar is gone–I was tired of seeing relevant content marginalized into 200-some-odd pixels. If something’s worth displaying, it’s going in the center column. There’s a box for important annoucements on the home page (more of those, soon). Also worth noting is that I’m now ditching our random image rotation in favor of a more consistent photo presentation. The photo banner at the top of the page will be updated every couple of weeks or so with a new image that’s relevant to what’s happening now in our lives. You can even click the image for a description, and I’m playing with the idea of a timeline view.
Oh, and I think a cover page is a much cooler place for site summary information rather than a hokey Flash advertisement.
What do you think?
Categorized as Geek, kennsarah.net
Looks like it will be neat. Though, that lime green color was disturbing at first. Thought i click the wrong link offa my site at first ;-). Not a bad disturbing, just surprised me.
The tabs along the top, the float above the line in Safari. Then again, they do it in Mozilla as well, so perhaps it was intended? Also, this line, ” Ken · May 4, 2004 · kennsarah.net · 0 Comments” looks like this in safari, but not in the other browsers that I tried (Dashed lines added for clarity):
—
Ken ·
May
4
,
2004
·
kennsarah.net
·
0 Comments
—
Safari is also exhibiting the “icon on every link” problem you mentioned opera having.
Concerning Opera … it looks exactly the same in opera as it does safari for me.
Now that I check it also looks exactly the same in Internet Explorer as it does in Mozilla. Nice job! Thats one place i’ve been having some (a lot) trouble, requiring numerous hacks to get right (and still haven’t).
Just for fun, I thought I would try Konqueror because even though it is khtml like safari it often rendors completely differently. Usually on the absolutely wrong side of things … but in this case it looks identical to Mozilla.
Browser Version (Mac OS X).
Safari: 1.2.1
Mozilla: 1.7b
Opera: 7.50
Internet Explorer: 5.2
Konqueror: 3.1
Mike.
I miss content on the front page.
I suppose it wont be too bad, as most of the time I come in via the feed anyway, but still. The front page looks lonely.
Whoa, I thought I miss typed the address.
I can’t wait to see the final product.
Ken,
Whoa! What a surprise! Looking good, although I must agree with an earlier commentator that it looks a little lonely. I would also add a little “flat”. Graphically, that is. But as a designer and builder myself, I know well the frustration that comes from people being entirely too critical before seeing the final product. So I’ll leave it at that, and comment more later. But again, great job thus far.
And speaking of good design, have you been to the Apple store in SoHo?!?! I was there last night, and I was blown away! And especially if your an Apple-loving architect (which in some sense you claim to be ;-)), it’s the greatest space this side of heaven! (I hope that doesn’t start a tangential string of comments.)
Scott
It looks great in w3m and Lynx, other than a`|` (pipe) after list items.
Of course Firefox renders it correctly.
Debian GNU/Linux 3.0 (kernel 2.4.26 & kernel 2.6.4)
w3m 0.3
Lynx 2.8.4rel.1
Mozilla Firefox 0.8
Oddly, Firefox on mac does NOT render it correctly. Nor does safari.
Firefox on windows works like a charm. Strange that.
Guys, thanks for the feedback–keep it coming!
Mike, thanks for the tips on Safari. Good to know that it’s displaying similar behavior to that of Opera. It helps me realize that I’m actually doing something wrong, and (probably) not the browser. Good to know that IE5/Mac isn’t puking on the design, too. One of these days, I’ll be able to afford a Mac and test such things myself.
Ryan, I hear you regarding the content on the homepage. I really considered doing something a la Fireland [1] or or Dive Into Mark [2], featuring the whole text of the latest article there. But, I had to temper that with the desire to feature photos, links, comments, and (soon) quotes on the homepage. Its simplicity (bordering on blandness) is probably an over-compensating response to the clutter I felt in the previous iteration. As I get comfortable with it, I may add some depth (Josh’s Fireland site has an enviable balance of simplicity and texture).
Sean, thanks for your encouragement and Lynx testing. I actually haven’t checked this iteration there yet. The pipes are left over from the old menu (which is a chunk of HTML that I’m server-side-including in all my pages). I’m hiding them on the cover page with a CSS “display: none;” rule. I wanted to be able to use the components of the old design without being too disruptive, so there are a few presentational hacks.
Scott, I wonder if it isn’t Dina’s big brown eyes that make it lonely.
Oh, and don’t be afraid to critique–writing out the advantages of the design has given me a steely resolve and a thick skin. And, yes, I have been to the Apple store in SoHo and will gladly tangent to note that every Apple enthusiast worth his salt must make a yearly pilgrimage to that store!
One last thing: if anyone would like to share screenshots of their favorite browser bugs, I’ll gladly take them. Thanks!
1. http://www.fireland.com
2. http://diveintomark.org
Ken,
Don’t forget http://www.pixelgrazer.com for a brilliant (in my humble opinion) example of “an enviable balance of simplicity and texture.” Yes, too much flash for bloggers I fear. But …
Scott
I just tested in FireFox on MacOS X and it looks the same as it does in Mozilla or Internet Explorer on the Mac or FireFox on Windows. I can’t see any difference between the pages.
FireFox v0.8
I think Ryan’s firefox is confused
Mike.
Ryan, Mike, I know that some versions of Firefox/bird/whatever will–believe it or not–display sites differently. Ryan, do you think it is a versioning issue?
Ok. Just did a clean reinstall of firefox 0.8 os x. From the official download and everything. Latest stable version.
Took a screenshot:
http://www.flipsidejones.net/kennsarah.png
The tabs are wrong. On windows firefox, they work just fine.
There ARE changes between the two in regards to hotkeys and such. It seems bizarre, but maybe they change the renderer to reflect the norm on the platform? Or maybe the mac platform handles object margins differently?
Ryan, thanks for the screenshot. Right now, I’m using relative font sizes to render the tabs. You’ll notice this if you [Ctrl]+[+] or [Ctrl]+[-] in Firebird. I think I can anchor the bottom of the tabs to the content div such that changing the font size doesn’t raise or lower them. Looks like I need to go do some more homework.*
Of course, if any CSS-heads can figure it before I do, I’d welcome the solution here.
* http://www.alistapart.com/articles/slidingdoors/
I commented on that tab problem in my first post. They look that way in Firefox 0.8 on Windows as well as in MacOS X. I just think windows sucks and provides to many variables that will affect how relative-sized fonts will look ;-).
I hadn’t noticed that hot-key changes (hadn’t [and haven't] tried them on either platorm).
Mike.
I’m writing this in firefox 0.8 on windows, fresh install. The tabs work fine.
I have not changed any standard system font sizes or anything, so I suspect they work ok. Besides, Ken uses firefox on windows and I doubt he wouldve launched with known broken tabs.
I think your firefox is broken altp. ;P
Ok… where’s the spinning animated Gifs? Where’s the bitmaps? What, no java applet with ripple effects? No 8 minute long flash intro with HIGH TECH TECHNO BEATS?!! Ken… man… where did I go wrong…
HAHAHAHA. Ok dude, seriously, it looks good in Firebird to me. I kinda like going straight to content myself, but that’s an editorial decision on your end. It’s cool. Just remember to K.I.S.S. and you’ll be fine
–
I think your firefox is broken altp. ;P
–
May very well be … I’m gonna leave it as is, and when I see it working on MacOS X i’m gonna go check it in windows and see if its fixed. Could be interesting to see if its the same problem … but, that could just confuse things. Why would I see it and no one else?
–
I’m writing this in firefox 0.8 on windows, fresh install.
–
The only way to get a fresh install on windows is to reformat the box
Mike.
As usual, you’ve given me more ideas for my own site.
As for your own, I, of course, like what you’ve done with the place. It appears normal in Opera to me, but I suppose in the last week you’ve had plenty of time to work on those issues. I dig it. I’m annoyed that you got Google Ads to allow you to run ads when they wouldn’t let me because my site is a “personal site.” (grumble grumble) 
-jb
Looks like you got it working in safari.
Neat.
Mike.
Alas, fixed in Opera, fixed in safari… STILL NO ANIMATED GIFS! Maybe a spinning globe with an envelope or something for e-mail! And where’s the flash with dancing penguins! Linux penguins dancing with a cartoon Dick Van Dyke! Yeah, that sounds like a good idea. I mean, the picture of Dina is cool and all, but… the majesty of animated gifs… mmm…
*snort* hehehehe…
John, thanks for the encouragement. Glad to hear, too, that things are working in Opera. I did manage to find some quirky CSS that I was able to clean up. Didn’t actually test it, though.
Also, Google initially rejected my application to AdSense. They came back a month later with an acceptance letter; I have no idea why. But it’s /so/ worth it for the $1.06 I’ve made.
Jai, you’re right–the next design will try to emulate Mountain View Lutheran Church of Apache Junction AZ* as much as possible.
* http://www.healyourchurchwebsite.com/archives/001195.shtml
Now THAT is more like it! I love the gif on the Music page! yeeessssireee! That there is what we like to call “web presence”… LOL… oh Thnikaman, it’s the Thnikaman.
I just realized that the recent comments section on the front page really is a recent comments ;-). For some reason when I saw it I thought it was just list of recent articles you wrote.
Guess i shoulda paid attention to the headera little more
Anyway, thats really slick. I like that alot.
Mike.
Hey Mike–thanks.
Actually, that was in the other design, too–but cleverly hidden in the sidebar.
FYI, it also helps fight weblog spam to have all the latest comments in one place.