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.
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.
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.
CatCubed
Unlike the previous website, Colin Fahrion’s HTML 5 powered personal blog feels best in Firefox 3.6 and Google Chrome.
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.
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.
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.
Go On Web
French web design agency Go On Web created its website with HTML 5 and used some lovely little interaction features.
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.
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.
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.
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.
We love 02 SCT
This website belongs to the community of graduate students of Jimei University (China), 2002 Computer Science and Technology.
Ella Design
This site shows a sleek use of HTML 5 and CSS 3, truly an eye-candy.
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.
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.
Flash Sites
Canvas
Canvas is a unique poster shopping website featuring an amazing user interaction process.
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!
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.
Fynn
Another example of uncluttered and usable Flash website design.
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.
Simods Homes
Flash can work well for business and the site of the Australian construction company Simonds Homes proves this.
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.
The Blues Maker
This is a funny Flash application you can use to compose your own blues song.
Converse
Converse online store is Flash-based, still the shopping process and website usability are on a very high level here.
Lego Click
Lego Click website contains information on art and creativity, mostly Lego-inspired.
Andreas Smetana
Website of the well-known photographer Anreas Smetana features an original navigation and full-screen photo galleries for the best visual impact.
Djeco
Website of the toy brand Djeco is a celebration of interactive design. Besides, it shows awesome illustrations and work with sound.
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?
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!
Adhemas Batista
The artworks of Adhemas Batista used to design his personal website are enough to give it a remarkable look.
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.
Here is a nice flash site teaser style: http://www.zahia.com
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!
Thanks for sharing! It’s a pity that it’s short:)
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!
[…] Show Me Whatcha Got! HTML5 vs Flash Showcase […]
Awesome, blog post!!
Cheers Greg :)
[…] More on the battle between HTML 5 and Flash at Design Woop. […]
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.
@Shane
Really? can html5 do this?…
http://www.2advanced.com
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 :)
ps Shane, treat yourself to the cheeky ‘reply’ button, makes it easier then having to put @Shane :)
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”
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!
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
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!
This post is a great display of work, nonetheless. :D
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?
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.
Well said Jamie.
@Shammel lee. Read up on HTML 5’s Canvas tag.
here here jamie :)
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.
[…] Show me whatcha got! HTML 5 vs. Flash Showcase […]
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
[…] Show me whatcha got! HTML 5 vs. Flash Showcase […]
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.