For those of you who haven’t heard of it the CSSOff is a mark up competition run by Unmatched style the essential premise of which is you get a design in the form of a image (a PSD or a PNG as you prefer) and then you take it away and mark it up with HTML and CSS and then submit it, get feedback and scoring on your effort and you’re in with the chance of winning stuff. I’m not certain but I don’t think this is the first time they’ve run the competition but it just so happened that after hearing about it the latest competition it fell during a small gap in work for me and I hadn’t done much front end stuff for a while so I thought what the hell why not give it a try.

You can see my efforts right here at cssoff.kamikazemusic.com.

I didn’t quite manage the first place and win myself a Mac Book Air (damn!) I didn’t even finish in the top 25. But the great thing is that you get some feedback at least and having received my email this morning I was still happy with a finish of 74th place, which out of over 400 entries I would consider a respectable showing. I would have liked to see some specific judge’s feedback but I guess that no bad comments is good news at least! The feedback I did get though showed above average scores in a number of the 11 categories including project size, markup cleanliness, semantics  and responsive implementation. I did lose a few points by scoring nothing in the legacy browser category which surprised me but I checked and I didn’t get round to any legacy implementation or tweaks for IE6 and 7 (browsers I wouldn’t normally support), mainly because I started to pick up some other client work toward the deadline so had to prioritise there!

Comparing my effort to the winning entries there’s certainly a bit more “pop” in the winners, I’d class mine as a solid, dependable, slightly less flashy, implementation next to them.

If  this competition comes around again (and I hope it does) I’d love to give it another try and I would recommend anyone who does front end markup give it a go if they have time. The feedback for your approach is great to read and the design is sure to have some interesting bits in for you to think about. It’s also nice to work on a project approaching it entirely with best practice in mind knowing that any work around or hack must be well thought out and justified.

IMG Source: http://www.flickr.com/photos/kashklick/3406150405/sizes/m/in/photostream/

A little late, this post was supposed to go up on Six Revisions at the start of the year as “Five things that will keep shaping the web in 2012″ however there were a few issues over there so I’ve decided to publish it here anyway. As it was written at the end of December some of the things may already have moved on a little.

So having looked back at last year’s predictions and having survived a sober new years eve (I was driving and had places to be on New year’s day) I’m back to have a look at what 2012 might have in store for us.

The technology and tools we use on the web seem to move at a frantic unstoppable pace sometimes and it’s interesting to sit down and have a think about what the future may be even if the prospect of keeping up can seem daunting at times. So here’s my predictions for what will be shaping the landscape of the web for the next year.

The Cloud

Like many things that appear on these lists I write each year this isn’t something new (if I could guess at something brand new and unexpected I’d probably be out there developing and selling it and not writing articles!). The cloud has been with us for a quite a while and is in it’s most simple form just an extended version of the basic networking facilities you find in offices and schools and even homes around the world, bringing storage, distributed computing and the like across the world wide web. Services offering cloud storage such as Amazon Web Services (AWS) and Dropbox have been around long enough to now be trusted and considered safe.

Direct extensions of these services such as Content Delivery Networks and cloud based servers have been around for a while and gaining an increasing foothold on their way to becoming the normal way to offer faster and more scalable solutions to clients.
But the cloud has become more than a huge off site hard drive and more innovative extensions of these services are where it gets interesting. I’ve touched on the Kindle Fire and it’s Silk browser before and whilst it’s had speed issues it is in it’s early stages and the levering of the AWS for remote processing seems like a very interesting step in the evolution of a next generation of browsers and devices.
If this were isolated you could wonder if it was simply a mad cap experiment from one company but devices such as the Chromebook have launched and are essentially setting a blue print for what may well become of cloud based computing. The advantages of the scaled down requirements for hardware at the user end go beyond cost and allow you to offer a sensible controlled platform for people to use.
The onLive games system that launched over the last two years is another example of scaled down user end hardware utilising the internet and the cloud for it’s processing. It allows the company to keep control of the systems being run as well, they can upgrade their system and service and keep users perpetually up to date and at the top end of processing power.

One of main enabling factors behind all of these advances is the increase of speed and availability of internet connections. Without a reliable fast connection these services often fall down and certainly having an off line alternative to all your cloud data is useful. And these technological leaps aren’t without their disadvantages, concerns over privacy and data security and safety abound as well as worries over the life span of services – if someone goes bust you stand to lose everything you’ve got with them.

In all the cloud is becoming a normal way for us to serve up our content and speed up and enhance our end users experience and the more innovative and main stream these approaches become the more you will need to look at utilising them for yourself.

Mobile

We’re all getting quite used to browsing on our mobiles, smart phones are well established and increasing in market share and we’re all set for another major leap forward. As 4G starts to roll out the increased speed and bandwidth will offer a better experience for users and encourage more browsing whilst on the move. Whilst we’re still a long way from mobile browsing becoming the norm the last two years have seen an increase and the start of a decline compared to desktop browsing.
Even with the increased speed on offer though optimising for mobile will still be necessary, 4G won’t become widespread for some time. As such responsive design and techniques will most likely see an increase in the development of tools and approaches that will make it the way to design and build websites.
As the number of devices we use to access websites increases (see the next point) so do the variables of screen size, resolution, bandwidth and interface and those are just the start. It makes sense to work on a platform that will allow as much flexibility as possible when these variables change and when new devices are released that will challenge and break assumptions we’ve already made, so far responsive design provides the best solution to that. It makes more sense than commissioning multiple versions of a site for each new device that arrives at a different resolution.

As with many things that make this list there are issues, a lot of them revolving around multimedia content and increasingly these are being resolved. Resizing of images and video within a fluid grid can pose problems, as can ad space. This is where I expect there to be innovation over the coming year as people start to focus on and address these issues, whether they be solutions involving JavaScript, server side technologies or even coming directly from browser makers, gradually solution to these problems will develop giving us new methods and processes to work with.

TV

I know some of you are thinking “but you said this last year” and in my review I touched upon various points related to the internet and TV. TV on the internet certainly saw a lot of progress last year where as this year I think there may well be more change regarding the internet on your TV.
The big buzz word is of course Apple, with Steve Jobs, shortly before his death, apparently raving about the innovations an Apple TV was going to bring to the living room. A summer 2012 release date for the apparently name iTV seems likely and whilst many people are guessing there isn’t too much of an idea what it will bring. Close integration with other Apple devices, especially the iPad and iCloud, is likely to be high on the list. Beyond that most people are expecting another revolutionary triumph to change the way we view the TV to add to the list of Apple’s previous revolutions with the iPod, iTunes, iPhone and iPad.
Exactly how this will effect those of us building websites we can’t really be sure and that’s not surprising, after all nobody could really have predicted the impact the iPad was going to have on the way we work and how users digest the work we produce. However I would imagine if browsing the internet on your TV becomes common place then most people will simply take approaches that treat it as a huge monitor to start off with. Beyond that people will begin to see the possibilities and start to create some very interesting work.

Social Media

For many people social media is the web, so often people do everything from the confines of Facebook and won’t ever set an eyeball on your web page. As Paul Boag says in his post “It’s time for you site to play nicely with social media” your social media strategy should no longer consist of simply linking to your facebook profile – your site and your social media will become intrinsically linked.
Social media widgets have been a long standing start of this and one of the first steps to this closer relationship was released recently with the embedding of tweets. Rather than the old basic linking of tweets with a URL you can now interact with a tweet from the page it’s embedded in, retweet it, follow the tweeter, favourite the tweet. The internet we browse is becoming an ever complex web, not just of site to site links, but of linking content within those sites, and social media is key to this integration.
Comments on blogs for example are increasingly managed by apps such as Disqus, or even Facebook comments directly on your page, sites also offer login to their site through an increasing variety of services and in many cases no longer manage users themselves. The end result is increasing integration and use of existing social media profiles for users, providing them one place to share all of their activity.

Obviously Facebook is leading the way in implementation due to it’s huge user base and is closely followed by Twitter in terms of influence. I expect that Google+ will have an increasing amount to say over the coming year as Google push the service as a major alternative to Facebook and which they are very determined not to be seen to fail over.

It isn’t all straight forward though as many people don’t trust companies such as Facebook and won’t use the service often meaning they will be unable to take advantage of some offerings. Website owners will be faced with cutting off a certain percentage of their audience or taking time to provide an alternative to the popular social networks. Treading careful with social media is certainly wise as it is such a contentious area for some users and taking the wrong steps can cause uproar as Spotify found earlier this year when they started offering Facebook as their only sign up method.

Politics

Piracy and censorship are big issues on the web and the US stands on the verge of some historic changes regarding big issues. Over the last year there have been many discussions of the censorship of the web, from the closing down of sites by dictatorships during the Arab Spring to the suggestions of censorship during the London riots. This is all in addition to the ever present censorship by nations such as China.
The main thrust of the debate in the US though is now raging around the Stop Online Piracy Act (SOPA) and the possible abuses of powers that can penalise websites and website owners through no fault of their own. (A quick look at the possible issues here – http://thenextweb.com/insider/2011/11/16/sopa-is-an-easy-no-these-idiots-are-coming-for-your-internet/) Just about any website on or online company could be at risk with bloggers threatening that it could spell the end of blogging. Many leading figures in the industry are rallying to oppose the bill and there is every chance that the bill wouldn’t even be effective in it’s primary aim of curbing online piracy, there is already a Firefox plugin to work around the basic DNS restrictions that would be imposed.
Built on top of the Protect IP act (PIPA) some see it to be a heavy handed and potentially easily abused law that is being heavily pushed and supported by large entertainment corporations. Whilst most people (if not all!) agree that copyright legislation needs to be maintained to protect creative industries most of those opposed do not agree that this is the way to do it. It very much has a feel of being drafted by people who don’t quite fully appreciate some of the intricacies of the internet and seems like law makers are trying to fight on a battle on somebody else turf.
Whilst this is primarily a US issue in terms of actual legislation they are seen as leaders on the internet and will no doubt set down rules that will be possible guidelines for other nations shaping their own policies. In the UK the law already fell foul of twitter this year when a super injunction was violated on Twitter by a user naming parties involved with a super injunction and discussions of whether Twitter should be responsible for it’s user’s content ensued. In Spain there has also been an act passed restricting access to file sharing websites at ISP level.

Leading politicians in the US are lining up on both sides with Republican contender Ron Paul speaking out against SOPA and the fall out of the debate in US politics has already been felt by companies such as GoDaddy. Other companies are being asked to make their stances known, many games companies have removed their name from supporting the bill in the wake of the GoDaddy back lash but have yet to officially speak our against the act  and a number of technology companies appear to have leant support by proxy through other organisations.

Regardless of the outcome of the SOPA bill the repercussions and debate will be felt right across the internet and there is no doubt that the companies who are supporting and pushing this bill will give up even if it doesn’t make it through to law.

[Addition]

Since writing this SOPA and PIPA have hit huge headlines, sparked in the main by Wikipedia’s “publicity stunt” of blacking the entire english version of the website out in protest. That and high profile protests from companies such as Google have helped shelve the SOPA bill, however I would be surprised if that means these issues go away. The companies behind the bill will still seek to find a way to protect themselves against piracy and that is embodied in the current high profile case targeting Mega Upload and their founder Mr Dotcom.

Sure some things are more difficult to use but for all the complaints about DVD players I remember people having sufficient complaints about VCR’s.

Here’s the list of 50 with the notes on what I still do, maybe I’m not so advanced.

(Taken from The Telegraph article 50 things killed by technology)

1. Ring the cinema to find out times
2. Going into the travel agents to research a holiday
3. Record things using VHS
4. Dial directory enquiries – I have on occasions 118′d
5. Use public telephones
6. Book tickets for events over the phone
7. Print photos – still get this done occasionally, and so do others given all the photo book sites around.
8. Put a classified ad in the shop window
9. Ring the speaking clock
10. Carry portable CD players
11. Write handwritten letters
12. Buy disposable cameras
13. Take plenty of change for pay phones – surely this is the same thing as using a pay phone?
14. Make mix tapes – I disagree, people still make playlists and compilation CD’s, just changing the medium
15. Pay bills at the post office
16. Use an address book – we still have an address book at home
17. Check a map before or during car journey – maybe not a physical one, but I don’t have a sat nav and often check google maps before heading to places
18. Reverse charges in payphones
19. Go into the bank or building society to conduct your business
20. Buy TV listings
21. Own an encyclopaedia
22. Queue to get car tax in Post Office – I’ve done this in last minute desperation
23. Develop and send off for photographs – still get photos printed
24. Read a hard copy of the Yellow Pages – we have one, I’ve never looked at it
25. Look up something in dictionary
26. Remember phone numbers/ Have a phone book
27. Watch videos - again this is a semantic change of medium, doesn’t count in my opinion
28. Have pen friends
29. Use a telephone directory – why is the yellow pages and this separate?
30. Use pagers
31. Fax things – yep, but only for work and work for a large company who are of course stuck in 1980 in some respects.
32. Buy CD’s/ Have a CD collection - I still like to own a CD
33. Pay by cheque – for sending money by post
34. Make photo albums – photo books!
35. Watch programmes at the time they are shown – of course we do this still
36. Dial 1471 when you get home
37. Warm milk or other hot drinks on stove
38. Try on lots of pairs of shoes on high street
39. Hand wash clothes – occasionally
40. Advertise in trading papers
41. Send love letters
42. Hand-write essays / school work – probably because I’ve left school
43. Buy flowers from a florist – still do this
44. Work out how to spell something yourself - tweeted about this yesterday
45. Keep a personal diary
46. Send post cards
47. Buy newspapers - I buy one everyday!
48. Hang washing out in winter
49. Keep printed bills or bank statements - only from those companies who still send them
50. Visit car boot sales

So what about everyone else? What do you still do?

Redesign

It’s not a huge departure from the old design and layout, but then most blogs are pretty much a standard layout the world over. The initial ideas came from a CV I’d done a few months ago (you can see a screen shot on dribbble) which I was really pleased with. It made use of Franklin Gothic and when Typekit announced that Franklin Gothic was going to be offered by their service I decided to start working on a site design along the lines of the CV design.
The major changes include the obvious draining of colour, but I don’t think the site looks too dull for it, the removal of the splash homepage and the blog page in it’s place. Also the custom portfolio pages are gone in favour of a standard design – I found they were giving me an easy excuse to not bother adding anything to the portfolio.
There’s a change in fonts from Museo Slab and FF Meta Web pro to Franklin Gothic and Liberation Sans with a bigger base size of 16px.

New install

Given that the site was feeling a little slow and my WordPress install was littered with god knows what I decided to set up a fresh install of the latest version of WordPress and reassessing all the plugins I used. I also for the first time, made use of WordPress custom post types – notably for the portfolio. Given the rave reviews that were given to it on Boagworld I decided to use the Toolbox theme as a base for the new design. It’s a nicely coded semantic HTML5 starting point.
I also for the first time in a while developed locally on my machine inviting xampp to the redesign party.

Responsive

Having read Ethan Marcotte’s great book Responsive Web Design I was keen to explore the responsive techniques a bit more, I have used it before but I really wanted to have a good go at working with it in mind from the very start of the build.

LESS + GS

I was also keen to try out one the fancy new CSS compilers and having read about The Semantic Grid System on Smashing Magazine I decided to use LESS with The Semantic Grid System, a decision that was made even better after my attention was brought to the LESS app for Mac.
By using the LESS app and a local development environment I noticed pretty much no difference from coding in a normal stylesheet in terms of work flow. The LESS app does offer the great facility to minify your css, be aware though this removes comments which you may need for you theme files, well to show the details at least anyway.

Media Queries

The site is built on the mobile up (or 320 and up) principle, that everything is set up for a mobile site and additional layout rules added as the screen gets wider. Having used a fluid grid, with a max-width set, I currently have only one media query at 800px that controls all the changes needed.

Patent Images

The site initially was a lot more minimal and I had toyed with ideas of adding a texture or some kind of motif when I was reminded of an idea we explored a long time ago with a client at Armitage Online for using images from patents. I’m a big fan of the kind of technical drawing you get in patents, and once published patents are free from copyright and with a bit of research this applies to the images, unless it is explicitly stated that there is a copyright for the images.
I like some of the images but I may remove a few in future if I find it interferes too much with the content, the idea is that they are mostly in the background as a texture to add interest rather than an obvious attention grabbing image.
If you’re after patents Google has a great searchable patents archive with all sorts of crazy stuff in, such as the Readily portable burrito, just keep refreshing the home page and see what pops up.

Still a few bits to tie up

There are still a few loose ends to tie up on the site, I need to have a look at some of the media queries and link colours, as well as proper cross browser testing check – I’ve only done some cursory checks so far (sorry IE users). I’m also considering a new domain name, but I’ve used this for such a long time I’m not sure, even though it is a bit nonsensical.

More posting

I have added a message to any posts over a year old, to make sure people notice and don’t read it like it is cutting edge advice, after all some things in the web world move quickly and some advice techniques stick around for years.
Which means that to make sure everything on the blog isn’t slapped with “this is old” messages I’ll have to add more posts, which I fully intend to do. Having maintained a weekly blog on Love Rugby League I want to try and do that on here – we’ll see how that goes!.

In the meantime though enjoy the site and please offer your feedback, good or bad, in the comments.

The old setup

To start with my old work setup was well, pretty dated. A desktop PC that is so old I’m not even sure when I got it, I think I got after I finished Uni but I can’t be sure so that would put it at around 7 years. As with any PC it had it’s fair share of hardware upgrades and was working happily, if a little nosily, plodding along with windows XP. One of my big issues was the fact that even buffered it was really struggling to play a youtube video without jumping – not great. Add to that the fact that I spend a lot of time away from home with my job I had a laptop – a Lenovo Thinkpad – that I got and had kept from my first job out of uni, so that was probably about 6 years old, and still an XP machine.  The real push over the edge came when the laptop screen ripped, given that it was so old there wasn’t much doing on the house insurance so I was in the market for something new.

To switch or not to switch

Obviously I had a look around and working between different places I wanted something that wasn’t just going to be a makeshift machine for when I was away but something that I could work on all the time. Being in the web industry you’re never far from voices recommending a switch to Mac and whilst I wasn’t a complete newbie, I’d used them on various modules at uni, I was a little apprehensive, after all I wasn’t unhappy with my PC setup so why switch? And there weren’t any immediately obvious benefits that I wouldn’t have from simply switching to a newer more powerful Windows setup.

So what swayed it?

So why have I switched then? Well as I said I had a good look round and initially I was rather keen on the MacBook Air but I decided that it was going to be a bit out of my price range and decided that if I was going to switch it was going to be a MacBook Pro, so I set about looking at what I could get as an alternative. The main factors that swung it were actually battery life and build quality, two things that aren’t major considerations for most in amongst processors and RAM and hard drive space. I just couldn’t find anything PC wise that would match up to the MBP in both of those areas. The long battery life means that I can happily sit working away in hotel receptions and airports without having to unplug the cleaning ladies hoover and build quality? Come on we all know Apple makes sexy computers.

Leasing

As a freelancer I’m a registered sole trader so I decided to lease as a business, this made a lot of sense in terms of affordability and also means I have the option to keep extending the lease and updating the machine every 2 years – that MacBook Air might be on the way in the future! Given the way this gave me the possibility of spreading the cost of getting an Apple device I decided to make the switch. Had I had to pay for it outright I would most certainly have stuck with PC and lost out on the battery life and build for a machine much more affordable outright but at a similar spec to the MBP.

So what have I got?

I haven’t actually mentioned what I ended up with, I’ve got a rather low end 13″ MBP, I don’t need much more, I toyed with the idea of the 15″ but I like the slightly better portability I get for carrying this around. I think people often get carried away and over estimate the spec they need, I was always going to be safe in the knowledge that it was going to be better than my current laptop regardless.

I’ve also got windows 7 on bootcamp but I rarely open it up, only for a rostering program that I can’t get for the Mac and that’s it.

Am I happy with it?

Yes I am, but I certainly don’t think there’s too much that I wouldn’t have gotten from a upgraded windows machine. I’ve not been bowled over by Mac OS as I thought it would, or as every Mac evangelist would have you believe. There are still things I’ve had gripes with, keyboard shortcuts for pop up boxes for example, but amongst it all I’ve gotten used to it pretty quickly. I’ve found equivalents for all the little programs I had on windows that I liked and I’m starting to pick up the shortcuts, for example I found myself thinking “how the hell do I take a screen shot?”, then rather confused when it stuck it on the desktop and not onto the clipboard.

I also decided to stick the right zoom utility on as I much prefer a full screen view, given that it isn’t a massive screen this makes sense, maybe on a much larger monitor the native mac zoom works better. I’ve also found it a little strange at times where you can see all the things open behind, especially with using things like Fireworks where everything is floating on top of other programs. It’s something I’m getting used to though.

The one thing that I’ve been really taken with is the multi touch track pad, I used to always plug a mouse into my laptop and I’ve done it maybe once or twice since I got the MBP when I’ve needed to do something a little more intricate design wise. The track pad is great and really useful once you start to get au fait with it.

Would I go back to Windows?

I think when it comes to upgrading again I’ll be sticking with Apple, assuming I can afford it, however I wouldn’t be put off by the thought of moving back to Windows.

Final thoughts

If anyone skipped to the end looking for a quick summary well here’s my thoughts. If I were stuck within tighter budgetary constraints I would have stuck with Windows, there is no doubt about that. I still think a lot of the complaints about Windows from Mac users are dated and baseless, although it isn’t without it’s faults, and a lot of promotion of the Mac OS you get from people is over the top, whilst it is good. (Queue the Apple fans in the comments!) Given my old setup to begin with there’s a lot of improvements I would have seen simply from getting newer equipment.

The fact that I have my work machine with me all the time is great as well, much better than keeping everything together across two machines and getting somewhere to realise you’ve accidentally only saved a file to your desktop machine.

The MBP though is a great bit of kit, the mentioned plus points of the battery life and build certainly show and I’ve settled in as a Mac user nicely. Although now sporting this and an iPhone I’ve had for a while I wouldn’t quite consider myself a full Apple convert yet, I’m not quite sure if I ever would, I’ve such a legacy of use of windows machines and there’ll always be friends and family with that thing to look at to keep me in the loop, and I’ve still retained my beast of a desktop machine in the corner for the odd, this site looks funny on Windows XP and IE complaint.

For those who haven’t been to Smashing Magazine recently they published another of my articles a couple of days ago.This time a look at CSS3 and some practical aspects of using it, it’s aimed at those new to using CSS3 and wanting to find out some basic ideas, but I’m sure it’ll help out more experienced people as well.

Check it out at http://www.smashingmagazine.com/2011/05/03/using-css3-older-browsers-and-common-considerations/

Here’s a few examples I’ve come across recently but I’m sure there’s plenty of you with more to share.

Using forms as links


<form action="link" method="post">
<input type="submit" value="link text">
</form>


This is a weird one I’ve encounted where a form is used as a link to another page, it’s not passing any post variables or anything it is just has the page set as the target and a submit button. All the function of a link, in a form! I can only assume the developer wanted to have browser styled buttons instead of text links?

Using the class “header”

This one really bugs me but I’ve often seen <p class=”mainHeader”></p>, this is what a heading tags are for!

In line styling

Ok more of a legacy thing, it used to be acceptable until people realised that it was much better to code semantically and keep your content and styling seperate. But it gets me nearly every time when I’m debugging trying to work out why a style won’t change something, after lots of messing round I eventually notice the style= in the element.

Not using lists

This I guess is just a personal bug bear but if you have a list of things, stick them in a bloody list! You don’t have to do it for everything, for instance menu items as lists I guess are more of a personal preference (although it could be argued otherwise!)

Tables

Again this is a legacy thing but I’m amazed that people are still turning out design in tables there is quite simply no excuse for it!

JavaScript as navigation

I’ve seen some strange things done with JavaScipt but this is a gem, http://www.kingstriangle.com/ tweeted by @rachelandew, all seems normal when you visit the site, but just view source on those top menu items. You will get the quite mind boggling coding of this.

<div id="nNews" onclick="document.location.href='news.php'">News</div>

It looks like a link and it works like a link but it is the strangest implementation ever, surely as a developer somebody would be familiar with an <a> tag?

If I encounter more I will add to the list but please feel free to contribute in the comments.

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!