Important Notice: Anyone who tried to download the Notification Bubbles PSD yesterday will have noticed it was empty. It's been fixed now!
The Finished Box

Digital Resource Magazine

Subscribe
Options
About tfbox
Share

Exciting Web Design Trends to look out for: 2011 Edition

Loading...
4
16515
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!

Love it? 37

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

html5logo
The W3C HTML5 Logo

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 catch

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:

So if you consider your site to be JavaScript dependant then there’s no reason for you not to start using these new elements now. As for the doctype that will work in any browser, check Google even they are using it.

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:

freszki.pl

ts3.trefl.com

abduzeedo.com

arno.hoog.ma

vision18.co.in

andrewshanley.co.uk

More Advanced HTML5 Websites

One of the main hypes about HTML5 being introduced is the highly advanced Canvas element. The Canvas element allows you to use JavaScript to draw graphics onto a web page, the impact this will have on the web design world I’m sure will be massive once it sets into play.

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.

Sketchpad using Canvas

Video using Canvas

Trail Experiment using Canvas

Colorful Tracking and Circles

Sinuous

Cloth Experiment

For more information on HTML5 Canvas visit w3schools.com

HTML5 Boilerplate

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.


Mobile Ready

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.

Example mobile sites

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.


Liquid Layouts

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.

Liquid Layout

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

The new W3C CSS3 icon

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.

Chirp.twitter.com

forabeautifulweb.com

media.24ways.org

designintellection.com

fortherecord.simonfosterdesign.com

lesintegristes.net/

Browser Support

For more details on the support for CSS3 with current browsers click here.


Parallax Scrolling

parallax scrolling

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.

So, Parallax Scrolling in Web Design? I wouldn’t say it’s that popular at the moment but I think it’s something that’s going to grow, it really depends on the site itself, a lot of clean minimal site’s may have no need for it whereas a site with heavy textures can really amplify their impact. There are both CSS and JavaScript Methods to achieve the parallax scrolling effect, though it may not be that simple to execute it’s definitely something you should check out.

Parallax Scrolling Examples

rowtothepole.com

One of the best example’s of Parallax Scrolling I’ve seen around, it really has a great impact.

github.com/404

The current GitHub 404 Page, this is my favourite, it’s simple and well executed.

ajaxian.com/archives/3dcss

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.

august.com.au

creativespaces.net.au

carfreaks.net

cpeople.ru

thomasbrun.no

nespresso.com/variations


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.

Font Replacement

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

hdlive09.co.uk

ryankeiser.net

stackoverflow.carsonified.com

theskylinemusic.com

francescomugnai.com

weshootbottles.com

takeshape.it

hugeinc.com


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.

floridaflourish.com

awpexpress.com

gayadesign.com

positivehype.com

plantate.net

viget.com/inspire


Slideshows

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:

demo.duotive.com/duotive-two

apple.com

puppetbrain.com

launchmind.com

agnarson.com

boerdam.nl

marcsdesign.com

estebanmunoz.com

foxtie.com


Overall

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!

Connect to the author

I am the founder of The Finished Box, a Digital Resource Magazine. Founded in October 2010 and launched in February 2011 my focus is to bring you articles, inspiration, freebies and more focusing on quality more than quantity.

  • http://www.synergyistanbul.com/en/web-design-trends-2011/ Web Design Trends 2011 | Synergy İstanbul

    [...] Thefinishedbox.com [...]

  • http://www.synergyistanbul.com/tr/web-tasarim-trendler-2011/ Web Tasarım Trendleri 2011 | Synergy İstanbul

    [...] Thefinishedbox.com [...]

  • http://maticne-celice.weebly.com/ Popkovicna kri

    Great article. Just sad that HTML5 isn’t supported by all browser -> IE especially :)

    Thumbs Up!

  • http://www.tryrental.com/ Ayesha

    Great resources here. I see a lot of 2011 trends used in the above mentioned websites. The most used trend is a single large image background trend.

    Ayesha
    http://www.creativewebdesign.ae/web-design

blog comments powered by Disqus

Warning: file_get_contents(https://api.twitter.com/1/users/show.json?screen_name=tfbox&include_entities=true): failed to open stream: HTTP request failed! HTTP/1.0 410 Gone in /home/tfbox/public_html/wp-content/themes/beta/footer.php on line 12