Before and After the Redesign

I’m not finished with the redesign to be honest. But the basis is done. I’ve also polished the logo:

Logo - before and after the redesign

The about-text doesn’t slide up and down anymore, but fades in and out now:

About - Before and After the Redesign

The head and the content are now graphically linked to each other. It’s like a source of light would be behind the logo:

head-content - Before and After the Redesign

 The style for the actual content (font-colors, fonts, etc.) isn’t changed yet. And the footer is still the same. And there are things in the css-files I don’t need anymore, but haven’t deleted it yet. So there’s still a lot to do!

Basic structure

 The Logo and the Eye-catcher (on this site it’s the “comic-me”) are position: absolute; so that they can blast the structure and create a feeling of three-dimensionality by laying over the other parts. Then I added some features which I don’t know from other sites – so I guess, they’re new:

Subscription bar

Instead of creating a big RSS-icon and place it somewhere conspicuously on the site, I collected all feeds in a simple subscription bar and put it on top of the site. I tried to make it as simple and tidy as possible. When you click on “Mail-Feed subscription” for example, you don’t open a new site, but a new area in which all you have to enter is the substantially needed Email-adress. I can imagine to enhance the bar by removing the atom-Feed-link and using feedburner’s Smartfeed-link instead, and adding a twitter-link in return.

About

Sometimes, when I visited blogs for the first time, I didn’t know what the blog stood for and looked for an “About”-link. I wasn’t always able to find one. So I wanted my first-time-visitors to see immediately what this blog is about instead of adding such an about-link to my footer/header/sidebar/whatever. Therefore I created the about-text right next to the Logo.
Yet, visitors who haven’t visited the site for the first time don’t need to read the about-text with every single site-view. That’s why I made the text collapsible. The setting (collapsed / not collapsed) is saved in a cookie, so you don’t have to collapse it again afterwards.

Eye catcher 

The logo is in the center, the about-text is on the right, so what is on the left? I used the space to place an eye-catcher. On me-blogs-it it’s the comic-me, which give’s the site a face and a personal note.

You notice: The actual innovations are all made at the top of the site. And here are some things you may wonder about:

Three-column

I don’t fancy two-column themes. Three-column themes where the sidebars are next to each other look weird. So I decided for three-column where the sidebars are at the sides – next to the content.

Centered

There are still sites where the content is squashed at the left side. I think these times are slowly running out and a centred look will establish. I mean, look at all the big sites – they already have their content centered: Google, YouTube, MySpace, flickr, Gawker, twitter, facebook, Techcrunch, Blogger, Gizmodo, RapidShare, Microsoft, Apple, AOL, eBay… and so on.

Missing White-Space

This is actually made by my modification of the theme. I use the overall-color to signify subjectivity. White-space is neutral, my blog however isn’t – that’s why I don’t wanted to have too much white-space.

No JavaScript required

There are some people out there who don’t have JS enabled. Yet my site does need JS – for example in the subscription bar when the email-adress-input has to fold out. I didn’t want to handicap these non-JS-people and looked for ways to get the information if JS is enabled or not before the site is even built-up in the browser so I could react on it via PHP. But I didn’t find a way to accomplish that. So I solved the problem in another way: When the site is built-up in the browser non-JS-enabled and JS-enabled people see the same things. But as soon as the site is ready, a JS-function makes the parts which need JS (e.g. the subscription bar) visible and hides the parts which are actually only made for the non-JS-visitors. So, only the visitors who have JavaScript enabled also see the parts which require JS.