This post is to say thanks to all of you for following, reading, sharing, commenting, improving and shaping the articles and projects I’ve worked on over the last 24 months.

Twitter has been monumental in my online success and—as a result—my career as a whole. That account would have been useless without people reading it, so thank you all for giving it a purpose.

Also, a thank you in particular to my friends at Smashing Magazine who have been Tweeting and sharing my articles etcetera for a large chunk of those two years—it is these Tweets in particular that have led to mass exposure and no doubt brought a lot of you who’re reading this to CSS Wizardry in the first place!

So, here’s to the next two years!

Harry

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.

The code for this very subtle addition is simply:

<p><a href="http://twitter.com/?status=<?php the_title(); ?>%20by%20@csswizardry%20<?php the_permalink() ?>">Please Tweet this article</a>, it’d be surely appreciated.</p>

Above: Note the use of the Wordpress template tags.

There we have it, just a simple textual link with a personal-sounding message. This is so trivial that I didn’t actually bother putting any metrics into place to track its effectiveness. However, one thing I have noticed is that that subtle, textual link with a polite message (I didn’t want a garish ‘Tweet me now!’ kind of button as that wouldn’t have sat properly with the way I’ve done the rest of CSS Wizardry) has had quite a noticeable impact on articles’ tweet rates. It seems to be very very effective!

So yeah, basically if you’re wondering how effective something such as that might be, I’d say very—although I don’t have numbers to prove it….

The timing is handy. CSS Wizardry has just broken the 50,000 visitors-in-30-days milestone and its associated Twitter account has just exceeded 2,500 followers. These followers include some of the industry’s most esteemed individuals.

You may be familiar with this recent article about CSS Wizardry’s content and getting things for free. Well it’s true, I put a lot of effort into writing articles here and, if recent traffic and follower counts are anything to go by, you guys seem to enjoy them. I love this, this is what keeps me writing, I just love doing it. However, whilst I don’t mind the time cost, there is the financial cost of maintaining CSS Wizardry. Next month I get the £xxx.xx bill for a year’s hosting and although I’m more than happy to pay it, it will be coming out of my salaried pay-packet.

So I’ve decided that it’s time to attempt to monetise CSS Wizardry. Ads will not be expensive, as they don’t need to be. They will not be spammy, because I don’t want them to be. There will not be multitudes of them, because I’m sure you don’t want there to be.

An ad appears throughout the CSS Wizardry blog and associated pages for one calendar month, it is the same ad, and it’s yours and yours only; no other ads appear alongside yours at all.

If you, or someone you know, are interested then see the advertising page and drop me an email. This is all very informal, I hope the price is okay but feel free to enquire about special/bulk-buying offers.

This month’s advertiser is Dealpond, a site I’ve used myself on a number of occasions when looking for the best prices on books, electronics and gadgets.

Fingers crossed that this new strategy takes off and I hope it won’t alienate readers not used to ads. I’ve tried to do this in the most classy way possible!

N.B. This article is not aimed directly at the person who sent the tweet, rather an open letter to everyone…

CSS Wizardry is my own personal branding. It started off as my portfolio back in 2007 when I was 17. Since then it has transformed as I released more and more tutorial and resource content, and started writing in-depth articles. I also joined Twitter to help spread my personal brand to reach a wider audience. Twitter, along with some very high brow followers I am both pleased and humbled to have acquired, has been a massive force in CSS Wizardry’s expansion.

Since its inception, CSS Wizardry has remained free to use, and free of ads. I currently do not monetise CSS Wizardry whatsoever. Cheeky wee ad in the sidebar. I have provided hours and hours and hours of decent, insightful content at no cost to my followers/readers and have not directly collected a penny for myself from doing so. CSS Wizardry costs me massively in both time writing content, and money in hosting etc. I give a lot away for nothing, and actually at cost to myself.

I was conscious some time ago that I had a few personal articles on CSS Wizardry which I thought were perhaps out of place, so I created my even-more-personal site at harryroberts.co.uk to house all that stuff.

People like to follow people, otherwise they’d just read RSS feeds…

If you really don’t want any personal stuff appearing via Twitter then simply don’t follow me. If you just want web development content then subscribe to the feed, but please please please…

Play fair, CSS Wizardry is a time and cash investment on my part to provide good quality content for you for free. Don’t bitch about it, ey? That’s just ungrateful…

From my point of view, creating the widget could not have been simpler—simply writing some basic form HTML which posts to the blog will yield results, and it then just requires dropping into an XML document and placing on a live server, and linking to via the Netvibes developer centre.

You can view the ‘master’ XML document here: http://csswizardry.com/netvibes/index.xml

Naturally I designed the cards in Illustrator but my initial thoughts were to flatten these vector files and send them off to a print company to be done by them. However, after remembering Moo, I decided to give them a shot and get a limited run of just fifty cards made—this was because I wasn’t sure on just how good the quality might be…

The main reason for my concerns about quality was the fact that I was to print the cards from a .jpg image, rather than a lossless vector format. However, when they arrived I was amazed to find they were perfectly legible, totally flawless and perfectly finished. Nothing was even slightly questionable about the cards or their quality, I was pretty impressed!

As well as the quality of the cards themselves I was delighted to find they were presented in a gorgeous heavy card case along with some sorting tags for ‘Mine’ and ‘Theirs’ business cards. A beautiful way to present some top quality cards.

Moo MiniCards

As well as getting myself some business cards from Moo I decided to surprise Suze with some MiniCards with a few photos from her Flickr stream. The cards were, again, top quality, presented in a lovely shallow box. She was really pleased with them! Although she is wondering what exactly to do with them, so please post any suggestions!

A firm recommendation…

After the speed with which the cards were printed and delivered, their outstanding quality, the beautiful presentation and the sheer pleasure of using Moo (not to mention the extremely attractive prices) I will, without a shadow of a doubt, be using Moo again, and definitely recommending them to anyone who requires professional business cards or something novelty like their MiniCards. Five star service.

Harry — twitter.com/csswizardry

After two nights work I managed to port most of the styles over and get the bulk of the site functioning perfectly, moving copy across bit by bit. Despite a couple of minor flaws I am, on the whole, very impressed with Wordpress.

Now hopefully I’ll be a little more inclined to update the site—something I’ve been pretty slack with of late…