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.

Having made my predictions on what will effect the web for a couple of years running on the Six Revisions website I’ve had a look back at last years predictions before jumping in again.

Head over to Six Revisions to read A Review of a Web Designer’s 2011 Predictions.

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.

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)

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!

But as I read over the various improvements in the interface, the new support for up and coming standards and the use of hardware acceleration amongst many other advances, one thought stuck in the back of my mind – how good will IE9 have to be to offer a chance of growing it’s market share again? The answer obviously is pretty damn good.

IE will no doubt maintain the majority share of the browser market for a long time given the large number of users who neither know or care which browser they use, or are quite happy to stick with IE out of comfort. The growth of Google Chrome has shown that users are not unwilling to switch their browser if a better alternative is available. But even if IE produced the best browser by a country mile I’m not sure how much it would effect it’s standing as a browser. Could you see web designers and developers recommending it to their clients? Sure there are plenty of fair minded sensible people out there who would hold their hands up and say yes it is a great browser, but it’s become cool to hate Microsoft and IE and to bemoan their problems. There are many for whom IE would have to show something really really special before they would consider doing anything other than picking at it’s faults.

Still we don’t live in a one browser world and it’s nice to see that Microsoft are finally taking up the baton and producing a more modern browser that supports the standards and innovations that designers and developers like me want to see.