Sneaking into Future: 25 Ultra Modern Websites Using HTML5

Posted in Inspiration, Web Interfaces • Posted on 31 Comments

HTML5, the next major revision of HTML, the language of the internet, is set to revolutionize the way web developers and designers create websites and the way visitors use them. It’s being edited by Ian Hickson of Google and David Hyatt of Apple, two of the web’s greatest creative minds.
Besides enabling web developers/designers to use cleaner, simpler, more consistent code, HTML5 will help them break free from the confines of 3rd party proprietary plugins like Adobe Flash. For the first time, it will be possible to achieve consistency between video player interfaces and overall website design. Users will be able to rotate, move, resize and even detect motion in a video while its playing, using inbuilt video controls.

Through HTML5’s canvas element, users will be able to render graphics and images on the fly, again without the need for plugins. You can try rotating an HTML5 video here and using the canvas element here. Both feel truly amazing!
Besides demos and other online experiments, there are actually a number of working sites using HTML5 today, although few, if any, make the most of this language’s potential capabilities. We explore 25 of the best below, the vast majority of which belong to web developers and web development agencies keen to show off their HTML5 skills to potential clients. Take a look and explore the code for an insight into the future of the internet. Be warned, however, few display properly in Internet Explorer.

1. Ella Design

Originally from Hong Kong, but now based in the USA, Ella of Ella Design is an award-winning graphic/web designer with over 8 years experience in the industry. Her website is a “playground” in which she engages with HTML5 and CSS 3.

2. Pelletized

Pelletized is the site of Ed Wheeler, Oregon-based graphic/web designer and HTML/CSS developer extraordinaire. He’s played a major hand in the creation of several high-profile sites, including JobInterviewEdge.com and EssayEdge.com.

3. MiniApps

MiniApps is a mobile phone app microsite from Alex Gibson, currently offering two great, free apps for iPhone, Android, Palm Pre and Firefox Mobile: Card Flip, a classic memory game, and Checklist, a to-do and shopping list tool.

4. Donkey Magic

Donkey Magic is Richard Stephenson’s blog. He uses it to keep the world up-to-date with his web development work and life in general. Recent posts include a CSS 3 & jQuery image gallery experiment.

5. Bonsai

Bonsai is a unique web development tool used to build sites that feature lots of images. Bonsai’s own website has been created using HTML5.

6. letscountthedays

letscountthedays is the online portfolio of Shane Howe, web and user interface designer. His client list includes Pinnacle Security and Urban Shadow, for whom he performed all web design, branding and even online copy writing.

7. Sarsini

Learn more about Martin Sarsini, Glasgow-based web developer, on this HTML5-fortified site. This site, which incorporates a blog, is simple, but very stylish.

8. Nimbupani

Nimbupani is home to web designer, Divya Manian. Obsessed with HTML5, you can learn a lot from her blog as well as her Twitter page.

9. Ousmane Ndiaye

Ousmane Ndiaye is a passionate, French web designer. An SEO and W3C standards specialist, his site makes the most of current HTML5 knowledge.

10. Media Research Institute

Experts in all things web based, the Media Research Institute operates from Tokyo, Japan. Besides building websites, the company has produced many popular mobile apps, such as Mixi.

11. Anino

An interesting bunch, Anino are a shadow puppet collective based in the Philippines. Their site offers listings of upcoming shadow-puppet performances as well as several videos highlighting their work.

12. CatCubed

CatCubed is the site of Colin Fahrion, artist, designer, developer and avid cyclist. The site looks great in Firefox and Safari, but Internet Explorer can’t handle the large amount of CSS 3 used.

13. Impactideas

Impactideas is a small graphic design studio based in Belgium with a lovingly designed website. They specialize in the creation of logos, brochures, catalogues and packaging.

14. Moriconi

Moriconi is a highly fashionable Italian hair studio, based in Camaiore, Lucca, Tuscany. HTML5 has brought this straightforward site to the cutting edge of modern web design.

15. LittleCoogie

LittleCoogie, based in Bangkok, Thailand, sells high-end children’s party clothing through its HTML5 e-commerce site, made by Andrew Brundle. Its color-picker tool is a great feature.

16. OK Cool

German fashion blog, OK Cool, incorporates HTML5 into its search functionality and comment forms.

17. Dn’D

French web development agency and Magento e-commerce expert, Dn’D, has created a really stylish site for itself, even if it is a little too reminiscent of the standard OS X Leopard background. Since its formation in 2004, Dn’D has worked with BP, Warner Bros and many other high-profile clients.

18. Sprachkonstrukt

Sprachkonstrukt is a blog covering all things related to design, photography and digital lifestyles. It’s managed by Ruben Deyhle, a web developer who also runs a photo blog on the site.

19. Stompfrog

Stompfrog, website of web designer/developer Chris Bewick, is a wonder to navigate around. Users can scroll through the website using their mouse wheel- a highly original touch.

20. Shape Shed

Shape Shed, website of freelance, London-based developer George Ornbo, was built using Jekyll, a simple static site generator, as well as CSS 3, jQuery and HTML5. Firefox or Safari is needed to see the site as George intended.

21. Smile Sleepy

Jamie Calabro is a web designer/developer with a great knowledge of everything from HTML to CSS, JavaScript, SEO, brand development and even print and packaging design. He can count Coca-Cola amongst his past clients. Smile Sleepy is Jamie’s place to showcase his work to the world.

22. sw’as

The rather unusually named sw’as is the home of 26-year-old web developer Simon Elvery. Alongside engaging articles on everything and anything internet related, you’ll find musings on politics, books, movies, music and more.

23. Frojd

Frojd is a beautifully designed blog from Swedish digital agency of the same name. Thanks to plenty of white space and a grassy header image, this site feels as fresh and airy as a Swedish fjord.

24. Tim Benniks

Tim Benniks is a Dutch web professional who specializes in the development of simple, intuitive interfaces. Use his site to get in touch with Tim himself or to view his past projects, which include a new CMS called Zotonic.

25. DS3

From Sao Paolo, Brazil, DS3 is a web agency with a fantastic eye for visual communication and style. It recently masterminded a new branding initiative for the largest maker of forklift trucks in Latin America, Paletrans.

5 Written ArticlesWebsite

Tom Walker is a writer and designer who is based in the UK and works for a supplier of HP laser toner cartridges as well as inks, paper and other printing accessories. For more of his writing about art, design and technology, check out CreativeCloud.

31 Comments Best Comments First
  • Ross

    Monday, March 15th, 2010 01:20

    12

    I’m failing to see what makes these sites so special. From a design perspective they are good but not great, and whilst they use html5, I’m not really ‘getting’ what’s being achieved here. Semantic markup? Does anyone care?

    +1
  • Angel Grablev

    Monday, March 15th, 2010 22:48

    15

    Get started yourself using the 52framework! HTML5, CSS3, and it works cross-browser (yeah that includes ie6).

    0
  • Natalia Ventre

    Saturday, March 13th, 2010 15:03

    1

    Can you point out which HTML5 features are these sites using? The transparency in rgba color mode and the CSS3 transitions are pretty easy to spot, but they’re CSS3 features, not HTML5.

    0
  • Shay Howe

    Monday, March 15th, 2010 16:24

    13

    Tom thanks for the recognition here, I really appreciate it.

    HTML5 is quickly growing in popularity and getting your hands on it now will quickly pay off.

    0
  • Helen

    Sunday, March 14th, 2010 23:18

    9

    Ella Design is a good example about what might happen, when HTML5 will have become a standard: Ella is HTML5, but it is not semantic. Having a deeper look into the markup, I would say, it is unsemantic in a remarkable way. It is a hell of layout divs.

    0
    • Radu

      Sunday, March 14th, 2010 23:23

      10

      Hi Helen,

      I took a better look at Ella Design too and, honestly, I can’t figure out what you’re referring to. It’s about as semantic as you can get with HTML5; the has the actual header, the holds the menu, she uses to reference content and apart from a few divs here and there it’s mostly clean.
      Sure, it’s not a lot of markup in her pages, but still, I think it’s a long way from suffering of divitis, at least that’s how I see it.

      0
  • Pim Derks

    Saturday, March 13th, 2010 16:32

    3

    Some very nice examples. The combination of HTML5 + CSS3 + a bit of Javascript/jQuery is amazingly powerful. Shame we can’t use it’s full potential yet because of IE8 still not supporting any CSS3 modules – though apparently IE9 will! :)

    0
  • BBL

    Saturday, March 13th, 2010 16:17

    2

    Great collection

    thanks for sharing

    0
  • Pim Derks

    Saturday, March 13th, 2010 16:44

    5

    @natalia – most of the sites use the new HTML5 elements like , , . Some of them also use other features like the placeholder-attribute in an input-field.

    0
    • Jim Saunders

      Monday, March 15th, 2010 01:29

      11

      The fact that this list does not mention Bruce Lawson is a bit of a joke, considering he’s been one of the few pushing this since the very beginning. I’d be willing to bet that most of the people on this list hadn’t even heard of html5 when he was converting his code over during one of his many experiments.

      Intact, come to think on it, I don’t see any of the html5doctors websites up there?

      0
  • Omer Greenwald

    Sunday, March 14th, 2010 00:09

    6

    catcubed and ousmane-ndiaye are awesome! thanks for sharing

    0
  • Radu

    Sunday, March 14th, 2010 19:53

    8

    Great roundup, Andy; though one should point to the HTML5 Gallery at http://html5gallery.com/ where you can see a bunch more.

    From the “shameless self promotion” archives, you guys might want to check out my blog, Sickdesigner.com . It’s created using HTML5 and CSS3 plus a bit of a crazy idea I head about tags being super semantic.
    I’ve written a post about it too, you can read it here: http://sickdesigner.com/index.php/2010/html-css/truly-semantic-tags-and-html5/

    0
    • Rich Clark

      Saturday, March 20th, 2010 00:43

      20

      @Radu Thanks for the mention of http://html5gallery.com I wondered if anyone else would spot the fact that all of these sites have been featured on there recently.

      To the post author, a link would be much appreciated to note where you found these sites. At least you’ve looked at all the sites and written your own notes about them unless some other blogs I don’t care to mention ;)

      Ta

      Rich

      0
  • Duane

    Sunday, March 14th, 2010 00:54

    7

    Great stuff. Thanks very much for this.

    0
  • Justin Carroll

    Tuesday, March 16th, 2010 07:37

    16

    Not very revolutionary; however, we’re just scratching the surface of HTML5 and it’s good to see designers pushing forward on the front lines.

    0
  • deepak

    Thursday, January 19th, 2012 10:13

    27

    wow.. great collection , HTML5 is quickly growing in popularity thanks for the collection

    0
  • Datu

    Tuesday, March 16th, 2010 18:17

    17

    This is a nice surprise. Thank you for mentioning Anino. Although I must agree with some who commented before me… we’ve barely scratched the surface of HTML5. We have a lot of learning to do.

    But, still, thank you for the recognition and the extra traffic. ;-)

    Keep it up.

    0
  • Zad

    Friday, February 24th, 2012 11:52

    28

    I agree that HTML5 is too far than flash and also flash is very powerful than HTML5. Below are the few points which I have noticed
    1) Video compatibility, youtube html5 player need different format of video for different browsers, which directly impact on storage and bandwidth)
    2) Styling (need separate CSS for different browsers)
    3) Multiple audio support at one time and simulations
    4) Code is not secure
    And many more…

    But as per my analysis and Adobe Flash acceptance for HTML 5. Seems that after few years HTML 5 will be closer competitor.

    0
  • Julien DIDIER

    Tuesday, March 20th, 2012 21:14

    29

    Hi !
    We have just launched the new version of our website (once more and html5).
    Feel free to come take a look!

    0
  • k

    Wednesday, April 11th, 2012 15:27

    31

    The HTML sites all look the same. they are boxes, boxes, boxes!!! I hate them. Flash websites are interesting and different. All of you coders wanted to keep HTML because that is all that you know. So your sites all look like layered boxes with the same wide screen layouts of boxed images and text.

    I looked through some of the above sites. Some sites use wall paper, which was fought against for year because they are unnecessary and ugly. The pages jump when buffering, along with light flashes. The pages are unstable, shaky and flicker. The navigation buttons are found in the typical areas, above or at the sides in boxes. And the pages are a mess.
    One page has a scroll bar
    Another page has interactive contents.
    I would not spend any time in a messy site like the ones that I navigated through.

    Flash sites are smoother, organized, stable and engaging. Every activity in a Flash website is smooth, easy to navigate and does not need all of the extra effort to try to make them look cool. It is easy to say something looks cool when it really does not. Adding a cool graphic does not make to site look good, especially when it looks like a magazine cover, or a poster, or a cd cover.

    I understand that some programmers are good with HTML but flash allowed those of us who are not programmers to create interactive websites that are good and work fine. Many people who do not know how to program a Flash website wish to do away with Flash, rather than let both HTML5 and Flash exist together. If you can program in HTML5, why must you destroy the ability of Flash site developer from using the tool that they love. I no longer like Steve Jobs. When he learned that 12 year old children in China was working 60 Hr days, his callous remark about his long working hours did not include his own children working at all!! He merely wished to control all methods used within the web, hence, his assault against Adobe Flash. If any Flash developer wish to begin a movement to help Google acquire Flash from Adobe, I will be supportive of the movement and will do what ever it take to keep Flash live and viable.

    0
  • k

    Wednesday, April 11th, 2012 14:11

    30

    The HTML sites all look the same. they are boxes, boxes, boxes!!! I hate them. Flash websites are interesting and different. All of you coders wanted to keep HTML because that is all that you know. So you sites all look like coders made them. Boring.

    0
  • Christian

    Friday, November 4th, 2011 12:47

    26

    Check out iteam.se – Swedish tech agency with ultra-wide html5 site

    0
  • Dan O'Neill

    Tuesday, March 16th, 2010 22:05

    18

    Some very nice websites there, some with some excellent features that pop out at you. I wonder though, with some notable exceptions(Dn’D’s typography, Tim Benniks’ layout) are these the best?

    That said, I couldn’t come with a better list! :) Keep up the good work!

    0
  • Peter

    Tuesday, September 6th, 2011 21:26

    24

    Howdy! I just want to give a huge thumbs up for the nice data you could have right here on this post. I might be coming again to your weblog for more soon.

    0
  • Evan Byrne

    Wednesday, March 17th, 2010 15:11

    19

    Nice to see I’m not the only one using HTML5!

    0
  • John Disaso

    Thursday, March 31st, 2011 21:19

    23

    I like the Impactideas site. I think they have used the all new HTML 5 features to leverage the system. Looks fantastic to me.

    0
    • Ronald Dan

      Wednesday, September 14th, 2011 19:15

      25

      We both share the same taste John. To me i believe the HTML5 has been extensively used too. Such a nice site should get any award.

      0
  • Alberto Dieago

    Monday, March 7th, 2011 07:49

    22

    I love the rounded corner support in HTML5 also the video capabilities. But i couldn’t see any of them are using rounded corners. What is the special features these sites where using apart from old HTML format?

    0
  • DesignTutr

    Saturday, March 13th, 2010 16:41

    4

    Great list here, I’m really liking what will soon be possible with HTML5 and CSS3, we just have to wait for certain browsers to catch up before we will start seeing more and more HTML5 an CSS3 love.

    -1
  • k

    Wednesday, April 11th, 2012 15:27

    31

    The HTML sites all look the same. they are boxes, boxes, boxes!!! I hate them. Flash websites are interesting and different. All of you coders wanted to keep HTML because that is all that you know. So your sites all look like layered boxes with the same wide screen layouts of boxed images and text.

    I looked through some of the above sites. Some sites use wall paper, which was fought against for year because they are unnecessary and ugly. The pages jump when buffering, along with light flashes. The pages are unstable, shaky and flicker. The navigation buttons are found in the typical areas, above or at the sides in boxes. And the pages are a mess.
    One page has a scroll bar
    Another page has interactive contents.
    I would not spend any time in a messy site like the ones that I navigated through.

    Flash sites are smoother, organized, stable and engaging. Every activity in a Flash website is smooth, easy to navigate and does not need all of the extra effort to try to make them look cool. It is easy to say something looks cool when it really does not. Adding a cool graphic does not make to site look good, especially when it looks like a magazine cover, or a poster, or a cd cover.

    I understand that some programmers are good with HTML but flash allowed those of us who are not programmers to create interactive websites that are good and work fine. Many people who do not know how to program a Flash website wish to do away with Flash, rather than let both HTML5 and Flash exist together. If you can program in HTML5, why must you destroy the ability of Flash site developer from using the tool that they love. I no longer like Steve Jobs. When he learned that 12 year old children in China was working 60 Hr days, his callous remark about his long working hours did not include his own children working at all!! He merely wished to control all methods used within the web, hence, his assault against Adobe Flash. If any Flash developer wish to begin a movement to help Google acquire Flash from Adobe, I will be supportive of the movement and will do what ever it take to keep Flash live and viable.

    0
  • k

    Wednesday, April 11th, 2012 14:11

    30

    The HTML sites all look the same. they are boxes, boxes, boxes!!! I hate them. Flash websites are interesting and different. All of you coders wanted to keep HTML because that is all that you know. So you sites all look like coders made them. Boring.

    0
  • Julien DIDIER

    Tuesday, March 20th, 2012 21:14

    29

    Hi !
    We have just launched the new version of our website (once more and html5).
    Feel free to come take a look!

    0
  • Zad

    Friday, February 24th, 2012 11:52

    28

    I agree that HTML5 is too far than flash and also flash is very powerful than HTML5. Below are the few points which I have noticed
    1) Video compatibility, youtube html5 player need different format of video for different browsers, which directly impact on storage and bandwidth)
    2) Styling (need separate CSS for different browsers)
    3) Multiple audio support at one time and simulations
    4) Code is not secure
    And many more…

    But as per my analysis and Adobe Flash acceptance for HTML 5. Seems that after few years HTML 5 will be closer competitor.

    0
  • deepak

    Thursday, January 19th, 2012 10:13

    27

    wow.. great collection , HTML5 is quickly growing in popularity thanks for the collection

    0
  • Christian

    Friday, November 4th, 2011 12:47

    26

    Check out iteam.se – Swedish tech agency with ultra-wide html5 site

    0
  • Peter

    Tuesday, September 6th, 2011 21:26

    24

    Howdy! I just want to give a huge thumbs up for the nice data you could have right here on this post. I might be coming again to your weblog for more soon.

    0
  • John Disaso

    Thursday, March 31st, 2011 21:19

    23

    I like the Impactideas site. I think they have used the all new HTML 5 features to leverage the system. Looks fantastic to me.

    0
    • Ronald Dan

      Wednesday, September 14th, 2011 19:15

      25

      We both share the same taste John. To me i believe the HTML5 has been extensively used too. Such a nice site should get any award.

      0
  • Alberto Dieago

    Monday, March 7th, 2011 07:49

    22

    I love the rounded corner support in HTML5 also the video capabilities. But i couldn’t see any of them are using rounded corners. What is the special features these sites where using apart from old HTML format?

    0
  • Evan Byrne

    Wednesday, March 17th, 2010 15:11

    19

    Nice to see I’m not the only one using HTML5!

    0
  • Dan O'Neill

    Tuesday, March 16th, 2010 22:05

    18

    Some very nice websites there, some with some excellent features that pop out at you. I wonder though, with some notable exceptions(Dn’D’s typography, Tim Benniks’ layout) are these the best?

    That said, I couldn’t come with a better list! :) Keep up the good work!

    0
  • Datu

    Tuesday, March 16th, 2010 18:17

    17

    This is a nice surprise. Thank you for mentioning Anino. Although I must agree with some who commented before me… we’ve barely scratched the surface of HTML5. We have a lot of learning to do.

    But, still, thank you for the recognition and the extra traffic. ;-)

    Keep it up.

    0
  • Justin Carroll

    Tuesday, March 16th, 2010 07:37

    16

    Not very revolutionary; however, we’re just scratching the surface of HTML5 and it’s good to see designers pushing forward on the front lines.

    0
  • Angel Grablev

    Monday, March 15th, 2010 22:48

    15

    Get started yourself using the 52framework! HTML5, CSS3, and it works cross-browser (yeah that includes ie6).

    0
  • Shay Howe

    Monday, March 15th, 2010 16:24

    13

    Tom thanks for the recognition here, I really appreciate it.

    HTML5 is quickly growing in popularity and getting your hands on it now will quickly pay off.

    0
  • Ross

    Monday, March 15th, 2010 01:20

    12

    I’m failing to see what makes these sites so special. From a design perspective they are good but not great, and whilst they use html5, I’m not really ‘getting’ what’s being achieved here. Semantic markup? Does anyone care?

    +1
  • Helen

    Sunday, March 14th, 2010 23:18

    9

    Ella Design is a good example about what might happen, when HTML5 will have become a standard: Ella is HTML5, but it is not semantic. Having a deeper look into the markup, I would say, it is unsemantic in a remarkable way. It is a hell of layout divs.

    0
    • Radu

      Sunday, March 14th, 2010 23:23

      10

      Hi Helen,

      I took a better look at Ella Design too and, honestly, I can’t figure out what you’re referring to. It’s about as semantic as you can get with HTML5; the has the actual header, the holds the menu, she uses to reference content and apart from a few divs here and there it’s mostly clean.
      Sure, it’s not a lot of markup in her pages, but still, I think it’s a long way from suffering of divitis, at least that’s how I see it.

      0
  • Radu

    Sunday, March 14th, 2010 19:53

    8

    Great roundup, Andy; though one should point to the HTML5 Gallery at http://html5gallery.com/ where you can see a bunch more.

    From the “shameless self promotion” archives, you guys might want to check out my blog, Sickdesigner.com . It’s created using HTML5 and CSS3 plus a bit of a crazy idea I head about tags being super semantic.
    I’ve written a post about it too, you can read it here: http://sickdesigner.com/index.php/2010/html-css/truly-semantic-tags-and-html5/

    0
    • Rich Clark

      Saturday, March 20th, 2010 00:43

      20

      @Radu Thanks for the mention of http://html5gallery.com I wondered if anyone else would spot the fact that all of these sites have been featured on there recently.

      To the post author, a link would be much appreciated to note where you found these sites. At least you’ve looked at all the sites and written your own notes about them unless some other blogs I don’t care to mention ;)

      Ta

      Rich

      0
  • Duane

    Sunday, March 14th, 2010 00:54

    7

    Great stuff. Thanks very much for this.

    0
  • Omer Greenwald

    Sunday, March 14th, 2010 00:09

    6

    catcubed and ousmane-ndiaye are awesome! thanks for sharing

    0
  • Pim Derks

    Saturday, March 13th, 2010 16:44

    5

    @natalia – most of the sites use the new HTML5 elements like , , . Some of them also use other features like the placeholder-attribute in an input-field.

    0
    • Jim Saunders

      Monday, March 15th, 2010 01:29

      11

      The fact that this list does not mention Bruce Lawson is a bit of a joke, considering he’s been one of the few pushing this since the very beginning. I’d be willing to bet that most of the people on this list hadn’t even heard of html5 when he was converting his code over during one of his many experiments.

      Intact, come to think on it, I don’t see any of the html5doctors websites up there?

      0
  • DesignTutr

    Saturday, March 13th, 2010 16:41

    4

    Great list here, I’m really liking what will soon be possible with HTML5 and CSS3, we just have to wait for certain browsers to catch up before we will start seeing more and more HTML5 an CSS3 love.

    -1
  • Pim Derks

    Saturday, March 13th, 2010 16:32

    3

    Some very nice examples. The combination of HTML5 + CSS3 + a bit of Javascript/jQuery is amazingly powerful. Shame we can’t use it’s full potential yet because of IE8 still not supporting any CSS3 modules – though apparently IE9 will! :)

    0
  • BBL

    Saturday, March 13th, 2010 16:17

    2

    Great collection

    thanks for sharing

    0
  • Natalia Ventre

    Saturday, March 13th, 2010 15:03

    1

    Can you point out which HTML5 features are these sites using? The transparency in rgba color mode and the CSS3 transitions are pretty easy to spot, but they’re CSS3 features, not HTML5.

    0

Comments are closed.

54.90.243.204 - unknown - unknown - US