The Nineties have been calling

For the last three or four years, possibly more there’s been this niggling little noise in my head every time I looked at my own blog.

It’s not that it’s the most important site I look after, and I really only set it up to test ideas and post the occasional rant but it turns out the 1990’s were indeed calling, asking for the website back.

So here we are, in 2014 and I’ve finally embraced HTML5 and CSS3 for my own site two years after the big ‘5’ became a candidate recommendation of the W3C, and in the year it is set to become the recommended standard for websites across the board.

Hang on, what do you mean? Isn’t HTML5 the standard? HTML 5

Amazingly although a large number of websites use HTML5 for their rendering now and it’s been a buzzword for at least five years it’s not actually a recommended standard yet. The W3C plan indicates that will happen this year. 1

This is the reason you hear website developers bemoaning the state of browser ‘X’ and device ‘Y’ rendering their latest creations. Or at least that’s why you heard those noises if you travel in circles frequented by web developers who like new toys.

So, off I went to themeforest and bought me a shiny responsive template, chopped up the source files and slapped it down on top of MODX without too much pain considering how long I put it off.

So far the result has been pleasing although I need to re-code the blog comments bits as they look horrible and there are some nasty kludges going on in the back room to get my old content to work in the new template.

Once I’ve fixed up the last couple of visual elements I suppose I’ll have to fix the validation of the old content as well but who really does that any more?

So here is it, my first post in the new template. It remains to be seen if it injects some enthusiasm so I start posting regularly again. Only time will tell.

  1. W3C 2014 plan

Responsive Design Best Practice

A wee while ago I wanted to create a new single-page landing site for one of my online properties. Just a logo, company name and contact details. Nothing more, nothing less.

Now, because I’m a really cool guy and I’m down with all the latest jargon and web stuff I decided it would be a responsive website.

Not so much responsive in the sense that I’ll ever respond to inquiries from there any more than I did when there was just a logo on the website and no details you understand!

This is responsive in the sense that all the hip crowd using mobile devices to access the site will get a nice experience and not have to scroll or zoom around to see the three lines of text on the site.

Responsive design is not a new idea and I’m certainly not going to claim to know much more than someone who looks up the term on wikipedia about the dark art of CSS3 @media rules.

In fact, I’d like to encourage everyone else to stop claiming they’re experts as well!

I thought about buying a single-page website template and slapping my info on it but because that would involve parting with money for something I can do myself I decided that roll-your-own was a better plan. And it’s just one page, right?

I figured someone would have a good guide on the rules for responsive design so I put ten cents in the Google roulette machine and crafted a search for responsive design best practice.

If you search for ‘best practice responsive design’ Google says there are about 7,440,000 results which took a grand total of 0.33 seconds to dig out of the dusty corners of the web.

Without reading them I’m guessing that there are probably about 1,488,000 unique and differing opinions to be had in those results about what in fact the best practice is.

And I’m being pretty generous there, allowing for one fifth of all the results to actually be something new and interesting.

Another problem I found was a number of what I thought were reputable sites quoting other similar well respected sites that had bugs in their @media statements and simply didn’t work on the small range of devices I had to test on.

So, the quoted best practice was actually pretty poor practice if you used an iPhone 4S, or Samsung Galaxy 3 which didn’t like the overlapping @media specs defined in some CSS which I think originally came from smashing magazine but so many people quote it that I have no idea where it originated!

So; I suppose seeing as I link baited with the title, you’re wondering what my best practice advice is for responsive design? Here goes:

Get off your adjustable office chair and learn how CSS works, understand what the @media max-width, min-width and pixel-ratio actually do and test it on a good sample of devices!

Taking joy from simple news: IE6 and Youtube

Anyone who has anything even remotely to do with web development will be smiling at the news that Youtube is going to discontinue support for IE6.

Not only that, we’ve got a date. 13th of March, 2010.

While this isn’t really the end, it will certainly put that little bit more pressure on the roughly 15-20% of internet users who still cling to the 9 year old version of Internet Explorer for various reasons I fail to fully comprehend.

You can read more about this on mashable.com or techcrunch.com as they do a much better job than me of writing about such things.

There’s even a response from Microsoft if you so wish to expand your mind.

Having worked in a corporate IT environment I fail to see how even the most lethargic of firms could take 5 years to update the web browser in the modern business environment. Unless you’re talking line of business PC’s in a secure network, but then those PC’s shouldn’t be afflicting their attempts at html rendering on the web development community.

I thought when Facebook stopped explicitly supporting the nearly decade old browser in 2008 that we’d seen then end of it. Then Microsoft shattered the hopes of many geeks, confirming support would continue into 2014.

With Youtube being the number 3 site on the web I’m going to take a punt and say that at least some of the 15% will be getting the message loud and clear soon that it’s time to update their PC.