Exciting Web Design Trends to look out for: 2011 Edition
Take a look at some of the exciting web trends to look forward to in 2011 including the breakthrough of HTML5, CSS3 and other concepts!
We’re already into the second month of 2011 and the web is becoming more and more advanced each day forth. Sometimes it’s important to reflect on the failures and successes of the past year that way we can get a better understanding of what’s coming. Over the past year we’ve witnessed a breakthrough of HTML5 and CSS3, the iPad and other Hand-held mobile devices that are smashing into the importance of good typography on your website.
HTML5 comes into play
With websites being created everyday the web is constantly evolving HTML5 introduces a broad range of features such as Semantics, Form Control, Multimedia and more. I think it’s fair to say that HTML5 is the future in web standard especially since W3C abandoned XHTML 2.0 and with its great upcoming features there no doubt it will be a very powerful mark-up.
More accurate semantics
Most of the HTML4 pages these days are structured with divs which are given IDs to associate what section is what, common names for these are such as header, footer, section. With the arrival of HTML5 there’s a whole new bunch of more accurate structural elements which give you a more logical mark-up.
HTML5 is a lot more semantic and is pretty close to stable, most of it you can use in your mark-up and in the future no doubt will they become more usable as the web develops and with any luck we’ll be writing semantic clean code with no worries of backwards-compatibility.
The only let down at the moment is if you’re using IE8 or lower it doesn’t currently implement the HTML5 parsing algorithm or the new elements but there are other alternatives to this problem, here are 2 popular methods:
Who’s using HTML5?
There are tons of site’s that are already using some features of HTML5 such as the doctype, here are a few site’s that are using quite a few of the new elements:
More Advanced HTML5 Websites
The element is supported by the current versions of Mozilla Firefox, Google Chrome, Safari, and Opera. Current versions of Internet Explorer including IE 8 cannot natively display canvas content. Google and Mozilla plugins are available and support is under development for Internet Explorer 9.
For more information on HTML5 Canvas visit w3schools.com
The HTML5 Boilerplate is a HTML5 template by Paul Irish and Divya Manian. It was developed for more than two years to give you the best practices in cross-browser nomalization, performance optimizations and more, it’s definitely something to check out if you’re keen on the idea of using HTML5 from now on.
Boilerplate is not a framework, nor does it prescribe any philosophy of development, it’s just got some tricks to get your project off the ground quickly and right-footed.
For more information on the HTML Boilerplate visit html5boilerplate.com. There’s also a 40 minute screencast by Paul Irish to get you to grips with it.
Ever since the iPhone there has been a huge push towards getting your website into small hand-held devices but trying to still giving off the professionalism your brand has used to be a struggle. Now with the help of CSS3, primarily the Media Queries you can create a whole new Stylesheet just for your hand-held visitors. What’s great about this is that it forces Designers and Developers to really push their creativity to give a great impact at such small resolutions.
Forecasters predict that smartphones will outsell personal computers this year. Bulletproof your design to meet this demand.
If you consider yourself as quite a proclaimed business then having a mobile site is highly recommended. Remember mobiles are a huge market and with the some of the latest mobiles to hit the shelves it’s no doubt that mobile browsing is going to sky rocket more than ever and with the help of CSS3 and other technologies you can really push your mobile site to the technical limit.
Don’t have an iPhone?
If you don’t have an iPhone testing your mobile site can be like getting blood from a stone. There are 2 resources online that I know of that do a somewhat good job of rendering your site in an iphone.
They don’t do the best of job’s but you can’t complain since it’s a free service.
Web design has come along way over the years along with screen resolutions. As it’s evolved you can no longer just expect people to be using the typical 1024*768 screen resolution. Screen’s nowadays come in all shapes and sizes some people even use HDTV’s, why not make use of some of that potential extra space you have and adapt your site to sustain larger and smaller resolutions for a better user experience? It is 2011 remember technology is far superior to how it was 5 years ago.
Not only do you have to consider screen resolution but also aspect ratio, take the iPhone or iPad Touch for example, they have the ability to flip your site in an instant. Take our site for example, if your screen resolution is bigger than 1200px wide the sidebar will be double the width otherwise it will fall-back to a suitable size for a 1024px width resolution. Give it a go, change the browser width and see it change.
There are many popular site’s that do this already so there’s no reason why you shouldn’t support multiple resolutions, after all if you have the ability to use more space why not use it?
The power of CSS3
CSS Level 3 has been in development since December 2005, since then it is becoming an extremely powerful markup. It supports things such as border effects, transformations, gradients, backgrounds, animations, transitions, media queries, web fonts and multi-column layouts and more. Most common browsers support CSS3 though as usual anything lower than IE9 doesn’t support it but why should that stop you?
You shouldn’t ‘not’ try to keep your website current just because 1 browser doesn’t meet the standards you need, remember website’s are always improving as well as the mark-up for it, don’t take the safe route and not bother else you may lose out in business to other competition. Remember, first impressions count for a lot.
Still not convinced?
Take a look at some of these sites which use CSS3 to their advantage.
For more details on the support for CSS3 with current browsers click here.
Parallax Scrolling is an oldskool technique commonly used in video games where foreground layers will move faster than background layers to create an illusion of depth, mostly used in 2D Video games such as Sonic or Moon Patrol.
Parallax scrolling is a special scrolling technique in computer graphics, first popularized in the 1982 arcade game Moon Patrol. In this pseudo-3D technique, background images move by the “camera” slower than foreground images, creating an illusion of depth in a 2D video game and adding to the immersion. The technique grew out of the multiplane camera technique used in traditional animation since the 1940s.
Parallax Scrolling Examples
One of the best example’s of Parallax Scrolling I’ve seen around, it really has a great impact.
The current GitHub 404 Page, this is my favourite, it’s simple and well executed.
Equally as impressive, also you can see how it’s been done.
Large Background Images
This isn’t really a new trend, it’s been going on for a while, but with latest technology and a lot more usage of CDN Servers and Caching Tools having Large Background Images is a lot less con-traversal than it used to be. The great thing with Large Image Backgrounds is that it automatically grabs your visitors attention and can have a huge impact if it’s relative to your target audience.
Overall it can give a great user experience if executed well.
Impact of Typography
Typography is an art, if done correctly you can have a pretty amazing visual. Although creative typography isn’t a new concept in web design, though it’s becoming vastly popular to have large typography in Web Design. The great thing about using large typography is the thought of your site being unreadable for some become’s extinct, unless of course you have some wacky font.
Typography is the art and technique of arranging type, type design, and modifying type glyphs. Type glyphs are created and modified using a variety of illustration techniques.
Although typography looks great in Photoshop, getting that same impact on the web used to be a chore. Those days are gone now that there are several font replacement methods available such as Cufon, sIFR and the widely known @font-face technique. There are also third party companies now that host a library of fonts including their licences enabling you to use these in your live projects, this is great as it give’s designers more confidence to use a broader range of fonts as it’s now much easier to render them online.
Also not that long ago Google introduced a library of font’s which are available to anyone commercially, it’s as easy as inserting a few lines of code, not that I expect anything less when Google are involved.
Creative uses of Typography
Perception of Depth
It’s 2011, not 2005, there is an on-growing demand for 3D whether it be 3D Movies, 3D TV’s so why should it stop there? People our now creating dimensions to their Web Sites ranging from shadows to full blown blurred background layers to give off a real perception of depth in their design. Bare in mind that 3D Technology isn’t currently in design but you can still give off a real perception of depth creating a real impact on your target audience. One of the great methods that can be used is Parallax Scrolling which we covered earlier in the post.
Slideshows are becoming increasingly popular these days and can add great functionality to your website. There are a huge variety of plugins available on the internet, some are as easy as inserting a few images into an unordered list whilst others have a range of possible functions to enhance your site.
If used right you give off a great visual impact to your viewers, here are a few site’s that use slideshows to their advantage:
We’re nearly 3 months into 2011, there’s still massive potential concepts to come our way in Web Design and we look forward to it as much as I’m sure you do. If you feel there are any other trends that would be relevant to this article or if you disagree with anything do let us know in the comment’s, we always look forward to hearing from you!