Let me start by saying that I am a passionate Actionscript Creative (if someday I might grow up, you can call me a Flash developer but not just yet) and I absolute love the web as it exists today. I love HTML and CSS. I even like Javascript (a bit) (it’s not my favorite, but we get along pretty good). So don’t go off thinking I’m taking sides.

What are we talking about today?

Earlier this week, Serge Jespers wrote about Adobe vs the open web, which kinda looked like a Flash vs HTML5 article from a distance (because let’s face it: The Adobe platform on the web is mainly the Flash platform). I had a lot of conversations about that in the past and the one thing I have come to conclude is that you can’t actually compare those to each other.
Not even remotely.

So to what should we compare it then?

People keep referring to the features that the Flash Player offers and which the developer might want to use. And then their statement goes on with ‘You can’t do that with HTML!‘
Of course you can’t! There are thousands of things you can do with Flash, which you just can’t pull of with HTML, CSS or Javascript. But if you really want to compare Flash and HTML, you gotta do it right:

Flash Player vs FireFox ( or IE or Safari or Opera or any other browser)
Timeline and Actionscript vs HTML and Javascript (and CSS if you really want)

(Please, stop throwing those vegetables at me… Thank you.)

Comparing the Comparables

So now you’re looking at me, thinking I am completely nuts… So let me clarify…

The Web Browser

A piece of software that allows you to browse the web and renders HTML and CSS into a beautiful layout (depending on the website that is) for your viewing pleasure.

The Flash Player

A browser plugin that allows you to view .SWF files and render them as described in the bytecode (or wherever) into a vector based movie.

This is a very brief description, and despite that I think you could already conclude their first difference (and what they got in common).
Both the Flash Player and the browser are built to display content, and render that content using a specific set of rules. They are both the same on a different level.

W3C and ‘Web standards’

I really like how ‘Web standards‘ is such an often used term (which sounds so professional and simple at the same time), and yet I am unable to describe exactly what it means (even after reading the Wikipedia explanation, I understand but don’t quite know it…). But I bet you, you already know where I’m heading… Exactly. There are rules being written, just to make sure everybody is writing valid code, and every browser displays it the same. Silly to say: Not everyone is writing valid code and nearly no browser displays exactly the same. I’m not bashing the W3C people here (although this might really look like it). In fact, I admire them for their effort. But in spite of that: The problem is there. Everybody is building browsers; websites look different on each and every one of them – even if the HTML/CSS you wrote is 100% valid.

Adobe and the Flash Player

Adobe is (mainly) the only instance developing, evolving, releasing and publishing the Flash Player (mobile devices and such left out). A lot of people think that this is a bad thing. Only one company in charge of whatever is going to happen with our beloved browser plugin? Hell yea!!
I can see how open-sourcing the Flash Player might help evolving the capabilities (features AND efficiency) but the payoff would be ‘Crossplayer compatibility issues’.
Imagine how you would publish your SWF, upload it to the server, and then test it in different Flash Players. (This is actually where my previous point of ‘Browser vs Player’ should start making sense)

So there’s our second conclusion. Browsers can be built and released by about anybody whereas the Flash Player is developed and maintained only by Adobe. Both do have ground rules to which you better stick when creating content but seen as only 1 company is creating the Flash Player and a lot of people are creating browsers, the browser implementation of those rules differs and results (may) vary. (Flash content which is not perfectly ‘valid’ will just result in a ‘movie not loaded’ message…)

Soooo…

Comparing ‘Flash’ to ‘HTML’ is wrong. The Flash Player is more like a browser, but on a different level (it runs as a plugin inside the browser). Comparing them is just plain senseless.

Okay… Still… SWF kicks HTML’s ass!

That’s a plausible one… but I don’t know any self-respecting webdeveloper that would agree (same goes for the opposite). If you’re on the same page as I am you’ll agree that it’s a situation depended statement.

If you want to build a game, Flash is the right choice.
If you want to create an experience to promote your latest product, Flash might be the right choice.
If you want to build a message board, Flash is undoubtedly the wrong choice.

Back to basics

In it’s early years Flash was meant to be used as ‘animated vector graphic’. For the sake of simplicity let’s just say: ‘the enhanced version of an image’. Of course today the capabilities and the use-cases of Flash have long exceeded this basic idea.

But doesn’t it feel strange to deliver information using a technology that was meant to be used as an ‘entertaining addition’?
Google doesn’t present its search results using an image or a Flash movie, right?
I can hear you go “Yea duh! That’s because Flash isn’t intended to be used for that kind of application“. Exactly…

‘The problem is choice’

It’s not about what you like most… It’s not about what is ‘the best’. It’s about what is ‘better in this case’. Right now, if somebody asks you to put a video on their HTML site, you’ll use a Flash Videoplayer (because right now Flash is the best choice to deliver video on the web: Everybody (about 99%, Adobe?) has a Flash Player installed, no (additional) codecs are needed, and not everyone is able to view HTML5 in their browser yet). That’s a no-brainer. You could go for Windows Media/Quicktime plugins but Flash would be the better choice in this case.

But if people are being asked to build a datadriven application, they’ll have a different idea about what to use. Some keep it simple and stick to basic HTML tables. Some others go nuts using jQuery and other Javascript libraries to enhance the dataviewing experience and useability of those tables. Others push it even further and choose a Flex based solution. All 3 of them will get the job done, that’s for sure, but what is the better choice in this case ? (Personally I’d go with the jQuery enhanced version)

The use of Flash or HTML each come with their own pro’s and con’s. And this is where people start arguing…

Pro’s and Con’s

Google can’t index Flash sites

Bad implementation of 'Alternate Content'

That’s true, although they’re working on it, it’s for from being ready (Google apparently has a special Flash Player that indexes Flash Movies. The only thing I can say about that: I don’t know about any of my previous Flash sites being indexed by Google yet…) . You could make use of the alternate content feature when embedding your Flash movie in the website. That way Google can actually index the content of the website, and bring the user to your website (where he/she can then view the Flash based version). But you have to implement the alternate content. And: No. ‘You need Adobe Flash Player to view this site‘ is no alternate content (read: Bad Alternate Content). And talking about alternate content: I haven’t seen many Flash sites being built to be able to ‘gracefully degrade‘. What if you users just don’t have the requested Flash version (company computer networks often disallow installation of new software). How do you enable them to use your website/webapplication? Right: Progressive enhancement. But building a Flash website, and not providing decent alternate content (read: alternate HTML/JS version of the Flash application) is not it!

People with accessibility issues can’t rely on screenreaders and such on a Flash based website.

As far as I know, today it is possible to help screenreaders understand what Flash is doing, and what the user can do. However: You have to implement this in your website.

You can now manage the browser history in a Flash site

Sure, and by all means: SWFAddress is great! But you have to manage it and that’s where it boils down to: It’s standard browser behaviour! You shouldn’t have to manage that.

Let’s face it: Flash breaks the regular web. So choosing Flash because it’s prettier isn’t the right choice. Choosing Flash should ALWAYS be a result of weighing the pro’s and con’s; not a result of you (or your client) liking Flash sites better than standard HTML sites…

Grand conclusion

(I’ll start this one with a disclaimer. Unlike Serge Jespers, I’m not paid by Adobe so this is really my opinion and not the one of my employee )

For now (and even for the HTML5-era): Flash will always offer a bigger and probably faster featureset than HTML (video, audio, audio analyzing, drawing, shape morphing, complex animations, special effects, levels of interaction perharps, etc…) but as long as you don’t really have to rely on Flash’s special features, stick to plain old HTML and CSS.

Flash and HTML are no opponents. They should be seen as couple that complement each other. Both should be used for what they’re best at. There is no winner, there’s no best. There’s only ‘better in this case‘.

After I downloaded the theme I realized a lot of features were missing: No searchbox, no searchresults page, no archives, no global archives, no blogroll support, no pages support, no 404 pages and a few design flaws…

I actually went on, and built those things myself. Later on I wanted to contact the orginal author (Patrick Behrend) of the theme to send him my updates but by the time I got to send my mail, his site was down and he completely dissappeared from the web. I never received an aswer regarding the theme updates I sent him.

UPDATE: Patrick commented in on this post and I got in touch with him. Patrick seemed pleased I kept the theme alive. I updated the URL in the footer which now links to Patrick’s (new) site. Make sure you go check it out and leave him a comment

By now the original download isn’t even online anymore, and Smashing Magazine disabled the link to the SuperMini theme (as it is a 404). So I recently decided to finish the theme, and translate it back to English and re-publish it. I thought the initial theme was awesome, and I figured it would be cool if other people would be able to actually use the completed theme.

I think Patrick did a great job designing a very clean and simple theme, which doesn’t look like most other WordPress themes.

SuperMini V1.0

Download: Click
Preview: ikDicht.be

Screenshots

It’s a one column theme, showing the latest post. Other posts are shown, but only the title and post date is visible.Pages and blogroll links are also featured in the same column, in almost the same style as the links to the other posts.

The searchbox is initially hidden and replaced by text in order to keep the layout as clean as possible.
Clicking the search links reveals the search box.

The list of other posts, blogroll links, pages, and the searchbox is set up as clean as possible, yet very transparent.

The comments area is as clean as the rest of the theme. No gravaters in order to keep the comments area pretty light.

I hope you guys like it. Feel free to report bugs, or browser errors.

[ Link ]

Om de tut te volgen heb je alleen een text-editor nodig (Notepad is al genoeg. Ik gebruik Dreamweaver ). Een Flashmovie kun je tijdens de tutorial zelf downloaden.

Basis kennis van HTML en ‘weten wat de Canvas in Flash is’ is vereist.

Tutorial:

We willen een Flashobject in een HTML pagina laten weergeven, en de onderliggende HTML gebruiken, om het achtergrond kleur te bepalen van het geheel.

Maak een nieuw html document aan en sla het op als ‘index.htm’ .

We willen nu kunnen bepalen waar we onze Flash willen laten weergeven. Hiervoor maken we een DIV object aan in HTML waar we later onze Flashmovie inladen.

Voeg dit toe aan de BODY in je HTML:

[html4strict]<div id=”flashDIV” style=”width:500px; height:400px; margin-left:-250px; margin-top:-200px;position:absolute;top:50%;left:50%; background-color:#FF0066;”>
Download de Adobe Flash Player om de FlashMovie te zien!
</div>[/html4strict]

In bovenstaande regel zie je meteen ook wat CSS staan. Dat is mijn manier van werken als ik iets wil centreren in het browservenster. Meteen ook een achtergrondkleur ingesteld oor deze DIV. #FF0066 for a better world
Om verder te gaan willen we nu (op een verantwoorde wijze) Flash in deze DIV gaan laden.
Mensen die Microsoft Internet Explorer 6 of Windows Internet Explorer 7 gebruiken zijn ongetwijfeld al op websites gestoten waar men eerst op een Flashobject moest klikken om het te activeren. Dit is een kwestie waar men veel naar verwijst als ‘Het Eolas Patent‘. Het gebeuren rond Microsoft en Eolas had als gevolg dat alle ‘ActiveX objecten‘ in de Microsoft browsers eerst moesten geactiveerd worden. Dit valt op te lossen door SWFObject of andere JavaScript oplossingen te gebruiken. Het fijne hieraan is dat we meteen ook verantwoorde markup in onze broncode hebben.

Download SWFObject.js en zet het in dezelfde map als je index.htm bestand.

Als de HTML pagina geladen wordt moet de browser weten dat we het SWFObject.js bestand willen gaan gebruiken. Dit doen we door de volgende tag in de HEAD-tag van ons HTML document te steken.

De volgende regel moet in de HEAD van je HTML document.

[html4strict]<script type=”text/javascript” src=”swfobject.js”></script>[/html4strict]

Nu hebben we nog een Flashobject nodig dat we in onze DIV willen laden.

Download deze Flashmovie en unzip deze ter hoogte van je index.htm. Je .SWF bestand staat dan in dezelfde map als je index.htm bestand.
Nota: Deze Flashmovie is niet door mij ontworpen of gemaakt. Ik eis geen rechten op.

Nu brengen we onze Flash en de DIV samen, door gebruik van SWFObject.

De volgende code komt onder de DIV in onze HTML.

[html4strict]<script type=”text/javascript”>
var so = new SWFObject(“dodgesquad.swf”, “flashmovie”, “500″, “400″, “8″, “#000000″,”true”);
so.write(“flashDIV”);
</script>[/html4strict]

Als we dit resultaat nu in een browser bekijken zien we een FlashMovie, met 3 actieve mannetjes, maar de achtergrond is nog altijd zwart (het achtergrondkleur ingesteld in Flash). Hiervoor gaan we een extra parameter meegeven aan het SWFObject.

Maak van:

[html4strict]<script type=”text/javascript”>
var so = new SWFObject(“dodgesquad.swf”, “flashmovie”, “500″, “400″, “8″, “#000000″,”true”);
so.write(“flashDIV”);
</script>[/html4strict]

het volgende:

[html4strict]<script type=”text/javascript”>
var so = new SWFObject(“dodgesquad.swf”, “flashmovie”, “500″, “400″, “8″, “#000000″,”true”);
so.addParam(“wmode”,”transparent”);
so.write(“flashDIV”);
</script>[/html4strict]

Als we nu naar het resultaat kijken zien we weer de 3 actieve mannetjes, maar deze keer is de achtergrond pink! Het achtergrond kleur is nu #FF0066, wat we ingesteld hebben in onze DIV.style

Dit is de volledige source code die je nu zou moeten hebben.

[html4strict]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Tutorial: Transparante Flash</title>
<script type=”text/javascript” src=”swfobject.js”></script>
</head>

<body>
<div id=”flashDIV” style=”width:500px; height:400px; margin-left:-250px; margin-top:-200px;position:absolute;top:50%;left:50%; background-color:#FF0066;”>
Download de Adobe Flash Player om de FlashMovie te zien!
</div>
<script type=”text/javascript”>
var so = new SWFObject(“dodgesquad.swf”, “flashmovie”, “500″, “400″, “8″, “#000000″,”true”);
so.addParam(“wmode”,”transparent”);
so.write(“flashDIV”);
</script>
</body>
</html>[/html4strict]

Het resultaat kun je hier downloaden of hier bekijken.

Ik hoop hiermee een aantal mensen mee verder te kunnen helpen. Veel succes en vooral veel plezier!