Revisiting HTML5 placeholder fixes

I had a detailed look at my analytics for the first time in a while and I noticed I pick up quite a bit of traffic from which was quite interesting. Digging further I had a look and found most of it is to the quick JQuery based HTML5 placeholder fix I posted a while ago.
As pointed out by some Stack Overflow commenters there are elements of the coding that are less than ideal so I thought I’d address them and see what can be done.
Continue reading

The site gets a new look

Kamikaze Music old design
If you’ve made your way to the site since last night you’ll have seen the new look (a picture of the old one is above if you can’t remember it). I’m not sure if it would be classed as a redesign or realign, but it’s the biggest overhaul I’ve done in a while. I had a few new things I wanted to try out and I had some ideas that had sat around for ages, plus the site was seeming a little sluggish so I got stuck into it and decided to get it done at the weekend.
Continue reading

It’s hip to be square

How long have people coveted the joyous features that CSS3 is now bringing to your browser? How long have we spent hacking around trying to create gradients and rounded corners to now have these very things easily at our fingertips. Quite a good damn while and I for one am very grateful for the new found ease and flexibility we have in deploying these features even if there is not full support everywhere.

Not so long ago I put together an article for Smashing Magazine about using CSS3 and I did mention that using CSS3 features would not be suitable for every situation and that they should be used sensibly and not just splashed everywhere and I think a sign of the maturity and true usefulness of CSS3 will come as people realise this and use it where it is truly necessary, using it as a design tool and not include it just for the sake of it (1px white text shadow springs to mind again!).

So I was rather pleased to see Google+, ok Google haven’t been praised for their groundbreaking design in the past but Google+ is a really well put together and visually appealing design and it’s mostly square. There are the odd subtle rounded corners but on the whole there are a lot of straight edges meeting straight edges with no hint of curve and it looks lovely, you don’t look at it thinking “Oh if only they’d rounded the corners of that button”. It’s not like Google are completely blind to CSS3, there’s plenty used around the Google+ site and the other redesigns of the Google network of sites, no they have chosen to leave square edges in without a hint of remorse.

Yes ladies and gentleman just because you know how to use a gradient doesn’t mean you have to, just because you know all of the border-radius web prefixes by heart doesn’t mean you need to use them – it is hip to be square.

(If you’re looking for something to do whilst you’re not using CSS3 how about checking out Paul Boag‘s post on Web Designer Depot – Stop obsessing over HTML5 and CSS3)

Things That Shaped the Web Design Industry in 2010

Some of you may have noticed that I’ve not done any writing for a while, well it’s kind of a new years resolution for me to get back into it. I’ve got lots of half articles strewn around which I’ll look at finishing off but I thought I’d kick off with a look back at last year.

I wrote a looking ahead to 2010 piece for Six Revisions last year so before looking ahead to 2011 I had a quick look back at the piece and 2010 and you can have a read here – Things That Shaped the Web Design Industry in 2010.

I’ll be following it up with a look ahead to 2011 soon!

JQuery HTML5 placeholder fix

I’ve revisited this post here – Revisiting HTML5 placeholder fixes I recommend you check that update out.

One of the nifty new features of HTML5 is the placeholder for forms which is added by putting in a placeholder value.

So I can use this everywhere I’ve just written a quick bit of jQuery to replicate the placeholder functionality in browser that don’t support. It also uses Modernizr to check if the browser already supports the placeholder technique.

Continue reading