Realizing that my main layout was partially table-based after CSS Naked Day '07, I switched to a pure CSS layout tonight. I changed to a three column layout, placing primary blog navigation on the left, with everything else on the right. I also got rid of that terrible old picture of me - now you get a great photograph of Coit Tower with Alcatraz in the background courtesy of my friend (and ex-Macromedia colleague) Vern Viehe, a name some of you may remember.

Very nice. I like that the layout is clean and the background does not compete with the content. I'm sure we're all going to miss your old picture, though.

Yeah, the first BACFUG I went to I thought. "When is Sean going to show up?" Then I realized you were there and I thought, "Well, he doesn't look like he does in his blog...maybe there's two Sean Corfields?" LOL

Honestly, it feels a little cramped. I'm on a 1280x1024 and there's a TON of white space on either side, which means your columns are not auto-widening. Even at 1024x768, you have a lot of dead space on either side. Your content area plus two side bars come to 890px where a 1024x768 monitor has 1008px of width. 1024x768 is just about the standard for our industry and my own stats for House of Fusion show almost 97% of users are using that or better (march numbers). Adding 80 or 90 pixels of width to the center area would probably show a big difference. But then again, I'm design challenged so my opinion doesn't count for much in this area.

Say hi to Vern for us. It's been a while since we talked last. And that feather boa.... (ask him about it sometime) :)

I just disabled CSS on your page and then inspected the page with Firebug to make sure.

Actually the wording of "CSS Naked Day" is a misnomer. It really should be "Show off your Structural and Semantic HTML Day", but that doesn't sound as good.

While the move to the pure css layout is a start, your underlying HTML still isn't structural. CSS (and Ajax) is much easier working with a structural HTML DOM than without one.

Structural or Semantic HTML is important because it allows users to get an idea of how your content is related to each other and whats important. The HTML adds an additional layer of meaning to the content it surrounds. This is illustrated by removing CSS. What's important on the page? How are items related? Which items are related? When I remove the CSS, I can't find that type of information on your page.

Not trying to beat you up, I applaud your work to remove tables from your layout that aren't data. But there is still work to be done.

Luckily , one of my talks at CFUNITED this year is going to cover Structural HTML and how to get to the information easily using CSS. (CSS Back to the Basics).

That's a whole lot of vertical real estate, but a nice view, so perhaps it's worth it ;)

I can say its a welcome change & couldn't have come at a better time. The 3 column layout was much need for your site as the earlier layout had grown tooo long in size. The only suggestion I would like to give is to add some color to your blog. everything including the community expert logo is b/w. should surely have a colored Adobe logo ;-) atleast

Looks good,

Your old format was hard to read, as the graident got darker down the bottom the text was harder and harder to read.

I think that was this site?

Oooh, that was a fresh surprise! I like it, Sean.

I like the new blog look, Sean. The black-and-white photo gives it a slight retro feel I don't think I've seen in any other blogs.

Hi Sean, I like the new look:) Nice picture too, reminds me of those SFSU days.

Best of luck with all your new adventures.

Very nice. I think the new layout was overdue :)

Thats funny, I just did the same thing yesterday. I like the 3 column approach. Just so much information to fit into one side column.

Great photo.

and as luck would have it, the center column appears at the bottom on the page in IE6. Why am i a wanna-be well known CF programmer using IE6? cause the military hasn't upgraded to IE7 and i'm on a contract. ie6 is all i have, and the internet looks ugly with this window!

@Michael D, yes, it's deliberately not an expanding layout because I wanted everything bounded by the width of the new masthead picture. FYI, my previous layout was 800 pixels wide, left aligned so you actually have *less* whitespace now - it's just split between both sides instead of all on the right :)

@Sandy, yes, this is just a first step since I'm still working off an ancient version of BlogCFC (3.5.2) which, as even Ray will admit, had terrible HTML. Next week I'll start to go through the actual styles and try to make it more structural (again, I noticed this very clearly when I turned off CSS for the Naked Day but I just didn't have enough time last night to fix everything).

@Rahul, I'm torn on color. The primary Adobe Community Expert badge has a bright red Adobe logo so, until I decide what to do with color elsewhere on the blog, I went with the more neutral (and branding-compliant) black version.

@Dale, yes, I used to have the same background gradient used on macromedia.com / adobe.com (in fact, I added it in order to look a little bit more compliant with my employer back then) but I had a lot of complaints about readability.

@Jonese, the center column appears in the right place on Win IE 6 for me. I tested it even tho' I'm primarily a Mac Safari / Firefox guy! Admittedly, my first attempt at the three column layout behaved as you indicate until I applied some margin fixes so maybe IE has cached the old CSS for you? Anyone else seeing that problem in Win IE?

@All, thanx for the compliments :)

Telegraph Hill & Alcatraz. Probably one of the best view in US. :)

I really like SF.

Ah, by the way, design is nice. :)

wow! my eyes were all prepared for purple. very pleasant surprise.

i kinda like the monochromatic look... but i'd probably add the red back into the Adobe logo. it'd be a nice contrast with the rest of the site (minus a few ads) being black and white).

really nice job.

@Charlie, thanx! I may change the blue highlight to a dark red and then I will go with the red Adobe logo. As for "ads", I guarantee the only ones you'll ever see on this blog are badges for conferences and Clark's "jobs" widget. I stated a long time ago I would not use advertising to subsidize this site :)

regarding "ads"... i wasn't trying to be accusatory or derogatory or any other type of "-atory"... :\

i didn't mean "ads" in the google sense. i was just referring to the external "widgets" (like the cf.Objective() ad, clark's widget, and the skype widget). things over which you have no control (as far as the colors).

i guess "widgets" would have been a better term but "ads" was the word that popped into my mind :(

Hi sean - have to agree with Michael - looks very cramped to me. I know these deep banners seem very popular as well, but you know, regulars are not going to appreciate it every time they turn up. Monochrome is fine for me

ahh yes! Much better man... I was actually thinkin last night, that you should either leave it naked or change it up... strange... And cheers to the no ads! we see enough of them in our daily lives... even if we don't leave our computer desk... screw you marketroids!!

haha

:-)

Sean, I can second Eric's observation of the problem in IE6. The site is now a "U" layout. :-) The central column content appears at the bottom of the other two columns (which are about the same length of content, at least as I view this page above).

And before anyone jumps on us using IE 6, let me just say that analysis browser visitors to 4 of 5 web sites I show IE 6 still the highest (just barely), so it just makes sense for me to use the browser most of my visitors use. I also use FF, but I use IE 6 primarily (and am giving IE 7 a little more time to shake out).

Anyway, Sean, I too applaud your change from the gradient gray. I wondered if I was alone in finding it nearly impossible to read some later comments in entries with many of them. :-)

While you're at it, you should take a look into integrating CFAkismet so that you won't have to manually filter every comment. :)

I thought I just landed on the wrong site when it first popped up. Then I was like...oooooooo...ahhhhhhhh!

Very nice Sean! If I were to have one comment, it would be about the height of the banner - a little tall. you couldn't do much by cropping some sky out tho.

Anyway, it all looks sweet! Look forward to visiting more often.

Will

Ditto on the IE6 issue...top of the center column is positioned at the bottom of the left/right columns.

@Joel, Charlie, Eric - I cannot repro the IE 6 issue. I've tried different browser windows sizes and all five text sizes and the center column appears correctly no matter what I do.

Any help you can give in debugging this / fixing it would be much appreciated.

Also, can *anyone* with IE 6 confirm that they see the site *correctly* (other than me)?

Hi Sean,

I have tested on IE6 and first page looks ok. But when I click the title of this entry, main enty block is just down.

This is a known CSS issue. I think div sizes would be a problem. I will try to check also your CSS.

@Sean, I have tested at IE6 (1024x768) and as I guessed it is simple width problem for divs.

If you change content size in style as 201 or less, it works in IE 6 without any problem.

An Architect's view is of Alcatraz?

@motobass, I wish that was the view from my "office"... As it is, I love the Coit Tower and just think this is an awesome photograph!

OK folks, I resized the banner image so it's wider (980px) and shorter (240px) which means less whitespace for Michael D and hopefully a less cramped feel for everyone. Also tested in Win/IE6 and it seems OK on both the list pages and the entry pages.

Structured HTML is on my list of things to do. Stay tuned.

Hi Sean! I'm tickled and flattered to see one of my favorite images of San Francisco atop your page! Thanks for honoring me in this way!

@Vern, hey buddy!! Great to see you drop by the blog! I know many CFers still think fondly of you for your time as community manager. Everyone seems to love the picture - I still have the full set you sent me... there really are some *stunning* images in that set, especially some of the sunsets!

Yes, indeed, Vern, I echo Sean's sentiments. Nice to hear from you again.

Name:
Email Address:
Comments *** Please note that all comments require moderation so it may be some time before your comment posts to this blog! ***
Remember My Information: