Firstly I decided to do a tablet-optimised (read, less than 800px wide) version of the site. The reasons behind this are:

1. I’m really keen to pour even more effort into CSS Wizardry in 2011, I’ve promised myself that I will make this year better than the last one. As such I thought the time taken to create the tablet version would be well worth it.
2. CSS Wizardry has always had a mobile version, but the inclusion of the <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" /> meta tag caused it to ‘break’ a little on the iPad, to circumvent this I resorted to some browser-sniffing to omit that code from the iPad. This is obviously bad because a) well, how wrong is browser sniffing?! and b) I was building for >800px, not just iPad. Whilst it might look okay on the iPad but I had no idea how bad things were on other devices.

So the sub-800px version is live and active (size your browser down to see it). A few people on Twitter suggested that user-pinch-zooming should be allowed, however I really don’t want it enabled on the iPhone as I feel it provides a more solid feeling experience when the site reads and works like a native app.

The font-size is more than adequate for easy reading without needing to pinch-zoom and the only way I could allow it on one and not the other is to go back to browser sniffing, which I really don’t want to do.

However I hear people loud and clear and I’m still pondering what to do…

Secondly, further to my joining Smashing Magazine’s Experts Panel, I have also just joined the Smashing Network.

Vitaly and the team have played a huge role in the recent success of CSS Wizardry, with regular tweets and mentions of my articles, so a massive thanks to those guys!

Read part two of this article.

First up, I decided to give it a slight redesign (or rather a realign). There are certain things I love about CSS Wizardry which haven’t changed in about two years. The colours, the type, the minimalism and the content. There were also some things I hated.

The logo sitting top left, fixed all the way up there. Looked okay at 1024px, but not any bigger. It just looked so detached. I changed that to be more like my Twitter avatar etc. I also built it in markup as opposed to an image—check it out.

The nav. Before it was just, well, there. It was a lot like the logo, it didn’t seem to belong anywhere. I brought that and the logo in line with one another and gave the entire header a left aligned, fixed feel. I think that brings things a lot tighter and far neater.

Lastly in design news was the sidebar. Jesus that thing was ugly. It was so horrible it ws illegal in 17 countries. That thing is gone, replaced with some text and some links and…

Yep, another announcement is that the guys at BuySellAds.com got in touch and asked if I’d like to be part of their new AdPacks.com network. I said yes!

Lastly, and the most exciting for me, Vitaly (owner of Smashing Magazine) got in touch and asked if id like to join their Experts Panel. Needless to say I said yes.

Anyway, that’s the new CSS Wizardry. If you spot any bugs etc, please do drop me a tweet. Happy 2011!

Update

I heard peoples’ feedback about comment-author info laying over the header (logo and nav) and I listened.

I enlisted the help of friend, colleague and genius Dan Bentley who came up with some nice JS for me. Give him a follow if you’re interested in PHP, or MySQL, or Ruby, or iOS dev, or Javascript dev… Well, just anything programming/scripting/dev related.

Also, follow Suze on Twitter.

As the site was built very quickly, we are adapting it as it grows and fixing any bugs as they happen. Let me know if you find anything astray. Anyway, enough talking, go look for yourselves!