Great Web Design Ideas for 2012

Transparency makes for a very powerful feature in websites and can make a design really come alive. The first thing you can do is set a nice background for your site and have it show through the secondary background elements. For example on a website, if you have say an area for the body copy and then subsequent sections for enquiry forms or other related content, no doubt you'll have bordered boxes to separate those elements. Why not be creative and start to show those elements with varying levels of transparency. Or have your header banner set to a certain transparency so it shows the background through it. Some simple transparency can be quite effective.

If you're doing your mock-ups in Photoshop you can test the transparency elements and what level suits it best by using the opacity slider. Once you're happy, slice and dice as you would normally but instead turn off the background layers and save your slices as PNG's. Then in say Dreamweaver put them back together again and hey presto, you have a nice layered transparency

Using transparency in websites also means that when changes come along you don't necessarily have to re-crop or slide up the site again. How frustrating is it when a client requests an image change to a site and you have to redo everything because that image sits on top of another where the JPEG contains that background.

Thankfully, this is now a thing of the past with transparent PNG files. You can now simply overlay your image on-top of anything and let the delete space show through the background. If the client then wants a change then all you have to do is replace that top image again. No more cropping and no more slicing. What took one hour in JPEG files, takes just minutes with PNGs. Now you really see why JPEGs are a thing of the past when it comes to graphics.

AJAX allows you to create interactive elements such as forms or searches and display those results on the fly. In terms of forms it will allow you to post data without the need of a refresh. Why is this good?

Well Refreshes of a page are not user friendly when it comes to posting a form. When you submit data, the page will blank and their previous placement may be lost (unless you anchor back to the position). With AJAX forms you can post data and then using some snazzy jQuery functions: animate the final content. This gives the overall feel of thought has gone into the site and a feeling of flow has been a priority.

AJAX submissions also have a another major benefit. How many times have you developed a website only to find that the user is bombarded with spam. Then you have to go adding anti spam questions or code verification. This isn't a user friendly thing to do and can sometimes steer people away from submitting the data in the first place. At this current moment in time, spam in 99% of cases can't submit AJAX content. If you're clever about the way you create your form then you can defeat the spam bots.

In AJAX forms most of the time you will stop the standard submission of the form. Spam bots do not understand this and will submit the form the normal way into your action URL. Therefore a neat trick is to put an invisible element in the form for spam bots to send. Then in AJAX omit this invisible element on your POST data. You can then use the invisible element to determine how the form was submitted. So in essence anything that was sent via AJAX is considered normal and to submit the data, anything sent in non AJAX (a spam bot's method) is considered spam. It works very well meaning you do not have to have silly anti spam questions or data capture checks. Obviously this is only valid for the current time. It would be my prediction that spam bots will have to adapt as more sites use AJAX forms.

HTML5 is going to be big and there's no doubt about it. While we are still some way off before we get some fancy HTML5 features, it's a good idea to start using HTML5 DOC type's in your site and even start using the elements which make HTML5 so great.

In HTML5, each element now has a Header, Section and Footer, you can then nest each element with sub elements of the same. It makes for clean and easy to read HTML code. While this will never really benefit the user, it makes good practice and makes it easier to come back and make changes later.

Using HTML5 today means you can then add more fancy elements later down the line when they come a reality. By the end of this year you're going to see some nice HTML5 animations, games and 3rd party developments to use on your site.