Show me whatcha got! HTML 5 vs. Flash Showcase

Get our posts emailed to you with our monthly newsletter, subscribe here.

“HTML 5 vs. Flash” topic has been actively discussed in the global web dev circles lately. Apple devices don’t support Flash and this adds the fuel to the discussion fire. And while the advocates of the Open Standards are prophesying the near end of Flash, Adobe Flash fans are desperately defending their platform.

We decided to stay dispassionate and take a look at the current achievements of both platforms. In this post you can find a showcase of some well-designed websites that implement HTML 5 and Flash features at their best. This is by no means an attempt to put any of the platforms in a favorable light, but an endeavor to see what advantages each of them is actually able to deliver to the end-user at this stage.
Hopefully, the following collection will highlight the benefits of HTML 5 and Flash to you and give you some visual inspiration for your own projects as well.

Websites built with HTML 5

Eye Styles

Unique eyewear shop Eye Styles from Portland, Oregon shows wonderful rollover effects implemented by means of HTML 5.

Eye Styles

Clearideaz

This is a personal portfolio of French designer Olivier Gorzalka. Very good markup can be observed on this site which is powered by WordPress, by the way.

Clearideaz

Jamie Wright

By viewing the portfolio of the British web designer Jamie Wright in Google Chrome or Safari 4.0 you will be able to enjoy this vivid and colorful website to the fullest. The latest version of Firefox reveals the roughness of typography, while Opera breaks the text positioning altogether.

Jamie Wright

CatCubed

Unlike the previous website, Colin Fahrion’s HTML 5 powered personal blog feels best in Firefox 3.6 and Google Chrome.

CatCubed

Shannen Coslow

The portfolio of Pennsylvania-based designer Shannen Coslow is fully coded in HTML 5 and has an orderly structure and an beautiful, minimalist design.

Shannen Coslow

Nathan Staines

The personal site of Starkers HTML5 theme developer Nathan Staines is simple and elegant. Besides a great implementing of HTML 5 markup it displays a stylish monochrome color-scheme with felicitous color inclusions.

Nathan Staines

Slim Kiwi

The site of the web studio Slim Kiwi has a unique and eye-catching design mostly due to the beautiful graphic elements used in it.

Slim Kiwi

Go On Web

French web design agency Go On Web created its website with HTML 5 and used some lovely little interaction features.

Go On Web

Sheep in Disguise

Website of the web design and development studio Sheep in Disguise shows a neat layout and stylish typography, and of course, HTML 5 well using a number of the new structural elements.

Sheep in Disguise

New Zealand International Art Festival

Even though you can see some Flash components on this website, it still shows a solid implementation of new HTML standards and better browser accessibility might be a reason for the use of flash files here.

New Zealand International Art Festival

Cameron Chamberlain

In spite of being the most anticipated feature in HTML 5, video tag is still rare to see on live websites. Cameron Chamberlain’s personal site contains the new video element implemented using Video for Everybody.

Cameron Chamberlain

Zoe Ann Baker

This website is clean and beautiful, big arrows pointing at post sections when you hover a mouse over menu categories are a nice touch.

Zoe Ann Baker

We love 02 SCT

This website belongs to the community of graduate students of Jimei University (China), 2002 Computer Science and Technology.

We love 02 SCT

Ella Design

This site shows a sleek use of HTML 5 and CSS 3, truly an eye-candy.

Ella Design

Narkoba

On Narkoba website you can find various audio samples, videos, snippets and other DJ music stuff. On a page Happy Love visitors can play with some audio and video elements which are quite fun despite being experimental. Thus, you can trigger audio loops directing the mouse at the white border rectangles and you can also launch video by typing “happy love” on the keyboard.

Narkoba

9elements.com Project

This is a sweet online experiment showing the great possibilities HTML 5 provides for audio & canvas. It loads 100 tweets related to HTML5 and displays them using a javascript-based particle engine. Each particle represents a tweet – click on one of them and it’ll appear on the screen.

9elements.com Project

Flash Sites

Canvas

Canvas is a unique poster shopping website featuring an amazing user interaction process.

Canvas

Burger King

Visitors of the Burger King website can literally customize it on the fly. Using three basic sliders you can control the subject area of the content to display. What a clever navigation solution!

Burger King

PepperWorks

Website of the Polish media agency PepperWorks is done in an elegant, minimalist style. Great use of high-quality photos and fast loading provide a pleasant browsing experience.

PepperWorks

Fynn

Another example of uncluttered and usable Flash website design.

Fynn

magneticNorth

A creative navigation mechanism can be observed on magneticNorth website – a user can access the content drawing various shapes with the help of a mouse.

magneticNorth

Simods Homes

Flash can work well for business and the site of the Australian construction company Simonds Homes proves this.

Simods Homes

We Are All Fans

Flash can also be a good tool to render streaming content. This is well illustrated on the We Are All Fans website. Here portraits of selected Grammy-nominated artists are created in real time from social media content generated by fans across the web.

We Are All Fans

The Blues Maker

This is a funny Flash application you can use to compose your own blues song.

The Blues Maker

Converse

Converse online store is Flash-based, still the shopping process and website usability are on a very high level here.

Converse

Lego Click

Lego Click website contains information on art and creativity, mostly Lego-inspired.

Lego Click

Andreas Smetana

Website of the well-known photographer Anreas Smetana features an original navigation and full-screen photo galleries for the best visual impact.

Andreas Smetana

Djeco

Website of the toy brand Djeco is a celebration of interactive design. Besides, it shows awesome illustrations and work with sound.

Djeco

Plate Interactive

A good bunch of elegance and beauty in this one. After all, what else can be expected from a globally renowned interactive agency Plate?

Plate Interactive

F.One – Bandit 3 Most Wanted

Promo website of the kiteboarding brand F.One has a spectacular 3D designs and brings an excellent interaction experience to users. By the way, be sure to watch the video in the category Cinema – it’s a masterpiece indeed!

F.One – Bandit 3 Most Wanted

Adhemas Batista

The artworks of Adhemas Batista used to design his personal website are enough to give it a remarkable look.

Adhemas Batista

As you might see, HTML 5 has a lot of wonderful features to offer and it’s surely worth anticipating. However, people declaring HTML 5 will kill Flash are grossly exaggerating. Why don’t we just try think more positively and assume that both Flash and HTML 5 will exist in harmony to the glory of the Web. After all, none of the platforms can be a solution to everything. Each of them is just a tool with a certain amount of capabilities and it’s up to you, dear designers and developers, to decide which tool will help to achieve the best results in your job.

Written exclusively for Design Woop by FlashMint, the top-class provider of flash templates and flash components.

Posted by Jason Bayless

26 Comments

  1. Another Site 2011-03-10 at 14:47

    Here is a nice flash site teaser style: http://www.zahia.com

  2. Been looking at doing some SEO and improving the design on my site for a while, so this website has been really useful. Easy read as well, so thanks!

  3. Thanks for sharing! It’s a pity that it’s short:)

  4. Wow! Just trying to find some lost bookmarks of websites and I stumbled on this…with my site up top. Cool! And, thanks for the shout-out!

  5. Awesome, blog post!!

  6. […] More on the battle between HTML 5 and Flash at Design Woop. […]

  7. I just want to take a hit at this convo and say that although the -o- tags were missed out by Jamie, a work colleague / mate of mine, he still should be praised for at least taking a shot at HTML5 / CSS3 and that he has done in great style!

    What wasn’t obvious was that when the site went live, these -o- tags weren’t supported in the then released version of Opera and since been made aware of them he has updated his website to include them. I think constructive criticism is great but I agree with Jamie in the fact a simple email or DM would have been a nicer solution.

    Anyways none of this really matters because his site is still great and he’s clearly put a lot of work getting all this CSS3 / HTML5 right.

  8. @Shane

    Really? can html5 do this?…

    http://www.2advanced.com

    1. No but there are added benefits or using HTML over Flash, in terms of Google rankings and from a usability point of view, not everyone has flash, or will hang around to wait for sluggish flash pages to load. Accessibility is also a problem as they wont tend to have much alt text for screen readers, that kind of thing!

      Don’t get me wrong I’m not anti flash, there are some amazing sites, but the kinda stuff were going to start seeing with HTML5 CSS3 is pretty cool :)

    2. ps Shane, treat yourself to the cheeky ‘reply’ button, makes it easier then having to put @Shane :)

    3. http://www.warmforestflash.com/blog/2010/01/11-myths-about-flash-that-wont-die/

      In response to:
      “in terms of Google rankings and from a usability point of view, not everyone has flash”

    4. Some interesting points on that article thanks for the link!

      I’d still use HTML5 over flash any day, especially the fact no Flash will be hitting the iPhone anytime soon!

    5. Oh dear…

      Welcome to 2Advanced Studios.
      We have detected that you don’t have the Flash 8 player installed.

      …which then leads me to a blank web site. From hero to zero

    6. Updating software to stay up to date with the latest technology is a given. You can’t view 2advanced.com with flash 8; BIG DEAL, update your Flash version; PROBLEM SOLVED in a matter of seconds. On the other hand there’s NOTHING you can do to make internet explorer support HTML5.

      And for all of you who think HTML5 is the greatest new thing, look up some material on Douglas Crockford: The single voice on JavaScript. Douglas states “HTML5 doesn’t make anything better.” HTML is great and is the backbone of the sites I build; I constantly use it with PHP/MySQL to build my less experience-rich sites. However, there is no way it can be compared to the power of the Flash platform, even if it was combined with JavaScript.

      Now on to the unicorn that is SEO being hindered by Flash… it simply isn’t true and is believed by those who have no knowledge of SEO. If Flash had a negative effect on SEO, I’m not too sure Nike (THE WORLD’S LARGEST ATHLETIC BRAND) would’ve chosen to do its website entirely in Flash…

      THINK ABOUT IT… KNOW ABOUT IT!

    7. This post is a great display of work, nonetheless. :D

    8. What about media devices that don’t support Flash, like the iPhone and iPad? I was trying to view 2advanced.com AND your website, and neither offer alternatives to Flash and subsequently the user cannot view your site.

      I as the end user you are trying to attract, had to use my computer to view your site. What message does that send?

    9. Well Simon, the answer is quite simple really; Mobile device users, such as yourself, aren’t the target audience for 2advanced and myself. Though I do agree an html version or at least an alternative page should be implemented, which is laziness on my part.

  9. Well said Jamie.

    @Shammel lee. Read up on HTML 5’s Canvas tag.

    The canvas element is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images.

  10. here here jamie :)

  11. I don’t understand why people are comparing html to flash. html is static and flash is dynamic. THERE IS NO WAY flash can be replaced by simple markup.

  12. Can’t say I’ve ever seen any debate or comment about my site being a good example of how opera sucks from these “many people”.

    …but yeah, thanks for you constructive criticism,
    it’s nice to know there are people out there with enough time to enjoy the opportunity to “take a shot” at a stranger in a public arena because he has mistakenly forgotten to support opera, …but apparently not enough time to simply email the guy (an ‘obvious’ evil opera hater) just to say something simple and nice like:

    “hi Jamie,
    did you know you’ve missed your -o- versions of your css?
    bit of a school boy error, i’d probably fix that if i was you…
    kind regards,
    your friendly neighbourhood spiderman”

    and i would have fixed that error, which wasn’t intentional, it’s a personal project i was on, things happen… nevermind the opera teams’ sporadic use of their -o- prefix…

    again, thanks
    Jamie

  13. I’ve been wanting to take a shot at Jamie’s website because many people have used it as an example of how “Opera sucks” or whatnot. Jamie Wright’s website doesn’t render properly in Opera for a very good reason. On pretty much finalized CSS properties his CSS code only includes -webkit and -moz properties. Opera naturally doesn’t support -webkit and -moz properties because it’s neither Webkit nor Mozilla. He doesn’t use the actual CSS properties, only the proprietary browser-specific ones, so -webkit-border-radius would just be border-radius and so forth. So the border radii and box shadows just won’t show up in Opera unless the properties are there for it to read. These should have been included in the code to begin with as it future proofs your website; it’s a rather elementary thing to do.

    CSS Transitions and transformations aren’t even remotely finalized, so Opera 10.5 uses its -o- prefix. The text rotation could be accomplished in Opera by using -o-transform: rotate(-10deg), but it’s not in the site’s code either. So… the text isn’t rotated.

    Now Opera 10.1 has some font-face bugs causing text positioning problems. Ten-five is devoid of most of them; one I know of remains which has nothing to do with what Jamie’s using them for here, though. Opera 10.5 should view the website just fine provided it has the necessary CSS properties needed to view it properly.

    Great examples of proper use of CSS3. Sure hope people don’t start using CSS3, SVG, etc. the way Flash is used today. That’d be most unfortunate.

Comments are closed.