'Splainin' to Do

Published March 17, 2009 @ 15:18 in Ch-ch-changes, Movable Type

mouseThis morning, I blew up this website. I run this site with Movable Type, so all the entries, pages, comments, categories, etc. reside in a MySQL database. That gives me a lot of flexibility when it comes to site redesigns. Once I write the new CSS and XHTML, I just have to paste them into the right templates and publish the site.

If you hate the changes, blame Twitter. My old design was from the pre-Twitter era when I needed one column for navigation and Adsense and another for content. Now, as I Tweet more and more, I needed a third column for my most recent Tweets. That's the spark that set this site ablaze.

While I was mucking around, I finally fixed my pagination issue. The pagination within categories now displays 10 at a time and actually adds up. I also killed the ad at the top of the category pages, because I thought it looked awful.

I also got rid of the popular header status message feature, because I don't have time to create a new image every day. Throw in a new favicon and a few other tweaks, and it's all new. Whether it's all good or not, that's yet to be seen.

Please share constructive criticism below. I'd love to see some change requests. Whattyathink?

43 Responses to "'Splainin' to Do"

brad
March 17, 2009 / 15:37

I like the Tweets on the right - one stop shopping.

It's a nice clean layout. I like it.

Alison
March 17, 2009 / 16:11

I love the layout...very clean! The text is quite light on my computer? Maybe darken it up a bit?

Sammi
March 17, 2009 / 16:30

I don't like it.

Jill
March 17, 2009 / 17:44

Looks great! I like the layout. Totally agree with Alison.....your colour scheme gives it a washed out look. Make you blue hue a little brighter and am not fond of the grey shade to the text. A bit of a strain to read for my eyes. How do you coordinate your blog posts with twitter is there a specific application or does it have to be done manually?

james edgar
March 17, 2009 / 18:01

BRING BACK the "popular header status message feature"even if it's not daily. Those are often a highlight .AND they're popular! Jill is right darken the text. On my work laptop with the high resolution I think it would be hard to read.

dale
March 17, 2009 / 18:25

The text has to be darkened quite a lot. You should try to have something unique in your blogs appearance as very similar to many others.

The_Voice
March 17, 2009 / 19:43

So wait a minute, what's gonna happen to "a week in headers"?

Toronto Mike
March 17, 2009 / 21:08

I'm back from kicking ass in volleyball. Good feedback...

I just changed the default font colour to #000 a.k.a black. The best contrast is always black on white, so this should make it easier to read.

Jill, I use twitterfeed which takes my RSS feed and auto-updates twitter. It's not manual at all, because Movable Type auto-updates the RSS feed. Blogger would do the same for you.

The_Voice, A Week In Headers would die. When I was doing that daily, I'd literally edit a PSD file in Photoshop every day, upload it to my web server to put it live on the site and upload it to Flickr so I could do that "Week in Headers" thing every Friday. I just thought it was a bit much.

I think I'll replace The Week of Headers with The Week in Comments, posting the ten most interesting comments every week.

Keep your feedback coming!

Daniel
March 17, 2009 / 21:09

Most of the content text looks fine to me in terms of contrast, but you need to tweak your form CSS. The text that I enter into the comment form is barely visible against the background (name, email and url only, the comment text itself is fine). Also the "preview" and "post" buttons are barely visible.

Toronto Mike
March 17, 2009 / 21:19

Oh and Sammi, I'm not surprised. You're like Argie without the sense of humour.

Toronto Mike
March 17, 2009 / 21:35

Daniel, I just changed the input colour in the CSS. It's black, now.

Buffalo Boy Mike
March 17, 2009 / 21:38

Mike I like it, I need to learn more

elvis
March 17, 2009 / 22:20

My honest feedback - not trying to be a dick - it looks like one of the templates I can choose from Blogger over on my blog...it's boring man.

Roshan
March 17, 2009 / 23:12

I'm with Elvis on this one (there's a sentence I never thought I'd say)! I think the other one was better. Or try to keep both sidebars on one side - left or right, you chose.

Toronto Mike
March 17, 2009 / 23:15

Elvis was a hero to most, but he never meant shit to me...

sammi
March 18, 2009 / 06:32

Do you need a sense of humor to like this washed out new look you have? Looks like you created it on an old IBM typewriter.

Toronto Mike
March 18, 2009 / 09:30

The primary objective with this redesign was to bring Twitter into the fold. I wanted to give Tweets a pronounced place on every page.

The secondary objective with this redesign was to make the content king. Make it easy to read and find what you're looking for.

I don't think I'm done. It might be a little too clean. I'm thinking I need a third accent colour, and maybe a graphical header.

This evolution will be televised.

stephanie Wilkinson
March 18, 2009 / 09:58

Am I the only one on a mac that has everything completely centred? If so, what do I have to do when I'm using this computer to see it the way I'm supposed to? Currently, all tweets are at the very top and then everything else is underneath but every line is centred.

Toronto Mike
March 18, 2009 / 10:05

I've only actually check this out in Firefox and IE in Windows.

Are you using Safari?

Toronto Mike
March 18, 2009 / 10:37

I just checked it in Firefox on Linux and it's fine. Stephanie, can you email me a screen cap of what you see?

Toronto Mike
March 18, 2009 / 11:15

I threw my Mac quandary at Twitter and bflosenrab helped out right away.

"@torontomike I checked it in both Firefox and Safari and it looks normal"

Ray
March 18, 2009 / 11:26

Hey, I'm seeing a large blank space in the middle column. The middle column doesn't start until below the right column. I'm usingn IE6.

Toronto Mike
March 18, 2009 / 11:33

Stupid IE6. I hated that browser. It never did play right with valid CSS.

I could throw some hacks in the CSS and get it to work in IE6, but IE7 has been out for a while, and IE8 is a heartbeat away.

Ray and other IE6 users, embrace tabbed browsing and update your browsers! http://www.microsoft.com/windows/downloads/ie/getitnow.mspx

elvis
March 18, 2009 / 11:55

Wanna email my IT department then?

Sending you a screenshot of what I see now.

Toronto Mike
March 18, 2009 / 12:41

Luckily for me, Mr. Elvis, I know you're an RSS man via Google Reader, so nothing actually changed for you until you decided to swoop in and bless me with your comments.

Ok, I see the issue in IE6. IE6 doesn't like the CSS.

I have three columns: Navigation, Content and Sidebar.

In the CSS, I have the Navigation float: left and the Sidebar float: right.

If there's a quick fix, I'll do it. If it becomes a pain in the ass I'll have to remind myself this is just a hobby and blame IE6 users for not using Firefox and for not updating IE. :-)

Toronto Mike
March 18, 2009 / 12:50

Ok, I just added a clear: right to my #sidebar CSS.

Now I need someone with IE6 to check it out for me... please.

Ray
March 18, 2009 / 13:55

IE6 user here. Still have the problem of the content column not starting until below the sidebar.

Toronto Mike
March 18, 2009 / 14:02

I did some Googling and it seems there's this IE6 float bug that I didn't anticipate. Heck, I may as well drop the DIVs and make it a good old fashioned HTML table.

Or maybe I'll blow it up and try something completely different....

Toronto Mike
March 18, 2009 / 14:39

I decided to drop the pure CSS solution for an HTML table. Say what you will about the table, but every damn browser knows what to do with it.

Let me know if this is still broken for you...

Toronto Mike
March 18, 2009 / 15:38

Ray! Where are ya?

I just need confirmation that this works in IE6.

And for the record, I like this look - everything in its right place. *pats self on back*

Jason | GetYourOJ.com
March 18, 2009 / 19:19

oh

i commented on another entry about this

it's way too busy and hard to focus IMHO

yeah it's one stop shoppping.. but it's overkill

i think i liked two layouts ago the best

elvis
March 19, 2009 / 07:03

This is just another reason for me to not like Twitter.

Jason | GetYourOJ.com
March 19, 2009 / 07:04

hey!

i'm no dummy! my eyes just can't focus with al the distracting trendy twitter hullaballoo on the side!

Jason | GetYourOJ.com
March 19, 2009 / 07:07

You've inspired me to write a parody. It's going to be called "twitter me softly"

~Twitter me softly with his blog.. twitter me softy... with this blogggggggggg... twitter the whole night... ~

Toronto Mike
March 19, 2009 / 09:15

Maybe I'll give the Twitter sidebar a different background to make it easier. You might have a point...

~Twitter me softly with his blog.. twitter me softy... with this blogggggggggg... twitter the whole night... ~

Toronto Mike
March 19, 2009 / 20:22

I think you guys were right - it looks way better with the Twitter sidebar shaded off to differentiate that column from the main content column.

Any more tweaks?

Daniel
March 20, 2009 / 02:07

Try browsershots.org, it helps :)

elvis
March 20, 2009 / 06:46

Site is formatted fine with IE8 btw.

Ray
March 20, 2009 / 08:46

Looks good in IE6 now. Keep up the good work!

Toronto Mike
March 20, 2009 / 09:17

I heard IE8 came out yesterday.

The old Mike used to say "Get Firefox". The new Mike says, "You obviously aren't going to Get Firefox, so update to IE8".

Toronto Mike
March 20, 2009 / 09:18

And a quick note about browsershots.org...

I used to swear by it, but now you get 30 minutes for free and the common browsers never display in under 30 minutes, so it expires.

Daniel, have you tried it lately? I think they're pushing the $22 / month plan, because browsershots.org was absolutely no help to me.

Florance Lindburg
February 8, 2010 / 22:19

What is the best place for background checks that are not on the Internet?

Leave a Reply



« St. Patrick's Magic Phone Booth Maple Leafs 4, Lightning 3 »