Sencha Inc. | HTML5 Apps

Blog

HTML5 Family: CSS3 Ads Versus Flash Ads

July 20, 2010 | Arne Bech

We’ve been talking a lot about the HTML5 Family lately. Today, we thought we’d have some fun and dive directly into some CSS3 capabilities. In particular, we thought we’d see if you can really duplicate popular Flash ads in HTML5. Well it turns out that you don’t really need HTML5, all you really need are some digital assets and CSS3 animations—which today work in latest revisions of Chrome and Safari. Take a look at three popular Flash ads and compare them to our CSS3 recreations. It’s frankly a little uncanny.

In the rest of the post, we’ll show you how you can go about creating an ad using only CSS3 (and HTML). For simplicity, we will recreate the Flash ad from Hertz that we pulled off the web recently. The ad won’t look exactly the same (e.g. we don’t know the exact fonts and colors that were used) but we’ll be able to make it pretty close.

CSS3 ads vs. Flash AdsClick to view the demo and see if you can tell which ad was done in Flash and which was done in CSS3.

You will get most out of this post if you are familiar with the basic WebKit animation properties. For example, you should be able to understand this:

#objectIdToAnimate {
    -webkit-animation-name: slideAnimation;
    -webkit-animation-duration: 10s;
    -webkit-animation-iteration-count: 1;
}

	

@-webkit-keyframes slideAnimation { 0% { -webkit-transform: translateX(130px); } 100% { -webkit-transform: translateX(0); }
}

The Ad

The Hertz ad consists of the following main components:

  1. Static Elements
  2. Animated Text
  3. Car
  4. Button

Since we are not creating an ad from scratch we will use three images taken from the flash ad (the car, the logos, and the triangle disclosure in the button). The rest will be recreated in HTML and CSS.

Set Up

The ad can be set up several ways. For this ad, we’ll use absolute positioning of all the ad elements. To do this while keeping the page flow, we set the outermost ad container to have a relative positioning. This enables us to use absolute positioning for the ad elements while still placing the ad on the page statically.

We also disable overflow, so elements (such as the car) will not show outside the boundary of the ad.

#adContainer {
    position: relative;
    overflow: hidden;
    ...
}

The ad elements are organized using hierarchical divs with absolute positioning. We assign unique ids to all divs that we want to apply CSS to. Using CSS, we position all elements where they are on the last frame (what you see after the ad has finished running). For anything that is not visible in the last frame, we set the opacity to zero or set the position outside the ad boundary box. This ensures that the ad will display okay in a browser (such as Firefox) that does not support -webkit animations.

HTML structure:

<div id=“AdContainer”>
    <div id=“CarSlider”>
        <div id=“Car”><img … /></div>
    </div>
    <div id=“Text”>
        <div id=“Text1”>Pay for standard.</div>
        …
    </div>

    …

    <div id=“WhiteBox”>
        <div id=“WhiteBoxText”>AAA Mem…</div>
        <div id=“WhiteBoxLogo”><img … /></div>
    </div>
</div>

Organizing animations

There are several ways to organize CSS animations and the timeline. For this ad we’ll keep it simple by starting all animations on page load and keeping their durations the same (excluding the mouse over animations). This enables us to easily compare different animations when we write the code.

However, it is worth pointing out that this approach might not scale well when the number of animations gets high, since animations run simultaneously.

Text Animation

The text doesn’t move, so all we need to do is to animate the opacity of the text to do the fades.

Here is the first of three animations used (one for each piece of text).

@-webkit-keyframes text1 {
    0%   { opacity: 0; }
    6%   { opacity: 0; }
    8%   { opacity: 1; }
    24%  { opacity: 1; }
    28%  { opacity: 0; }
    100% { opacity: 0; }
}

You might wonder why the opacity style is repeated even when the value doesn’t change. This is because we only want it to be animated between 6 – 8 % and between 24 – 28 %; otherwise we want it to be static.

Car Animation

To simplify the animation, we’ll split it into two separate animations by layering the car in an additional div. One animation to do the bouncing and one animation to slide the car.

CSS3 does not provide any direct way to animate a decaying wave, but we can get a satisfying result by using the default ease-in/out timing function and just define keyframes at the “top” and “bottom” of the bounces.

Here are the CSS keyframes used for the bounces:

@-webkit-keyframes bounceAnimation {
    0%    { -webkit-transform: scale(0.2);  }
    3%    { -webkit-transform: scale(0.57); }
    4.5%  { -webkit-transform: scale(0.42); }
    5.5%  { -webkit-transform: scale(0.50); }
    6%    { -webkit-transform: scale(0.48); }

    25%   { -webkit-transform: scale(0.48); }
    28%   { -webkit-transform: scale(1.2);  }
    29.5% { -webkit-transform: scale(0.9);  }
    30.5% { -webkit-transform: scale(1.05); }
    31.0% { -webkit-transform: scale(1);    }

    100%  { -webkit-transform: scale(1);    }
}

As it stands, this scales the car starting from the center of the image, so we need to add additional styles to the car in order to move the transform origin to the bottom of the car as well as placing the car relative to the bottom side of the ad rather than the top.

-webkit-transform-origin: center bottom;
bottom: 0;

The sliding of the car is simple:

@-webkit-keyframes slideAnimation {
    0%   { -webkit-transform: translateX(-130px); }
    55%  { -webkit-transform: translateX(-130px); }
    66%  { -webkit-transform: translateX(0); }
    100% { -webkit-transform: translateX(0); }
}

Button Animation

We slide the button into the ad in a similar way to how we slide the car in.

Hovering over the button changes a few of its properties. To animate these changes we use the -webkit-transform property. This animates the color change.

To take it a step further, we also want to recreate the moving “shine” effect that the background of the button has. This can in fact also be done using just CSS. First we create a gradient background for the button, and then we move the background.

Just like this:

#button:hover {
    background: -webkit-gradient(
                    linear,
                    left top,
                    right 50,
                    color-stop(0.45, #1D5365),
                    color-stop(0.5,  #338DAD),
                    color-stop(0.55, #1D5365)
                );
    background-position: left top;

    -webkit-background-size: 300px 22px;
    -webkit-animation-name: backgroundShine;
    -webkit-animation-duration: 0.3s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
}

	

@-webkit-keyframes backgroundShine { 0% { background-position: right top; } 100% { background-position: left top; }
}

This working draft of the ad works in newer WebKit browsers (Safari 4, Chrome 5, Mobile Safari). It mostly works in Android although some animations do not behave correctly. It also degrades gracefully in Firefox and IE7+, displaying just the last frame of the animation. It could also degrade gracefully in IE6 by changing the images from PNG to GIF.

I didn’t cover every line of the CSS used to create the animation, just the most important parts. You can click here to view the full CSS file for the Hertz CSS3 Ad (about 300 lines).

There are 65 responses. Add yours.

Keith Parent

4 years ago

While I have been doing similar tests with my developer friends and co-workers, I could tell the difference before even viewing the live comparisons due to Flash’s unparalleled and quite exquisite font rendering.

Ben

4 years ago

The Hertz ad appears, to me, to be the most inaccurate of the bunch. On Chrome 5, the hot area for the “Book now” button stretches horizontally across the entire ad area; I assume, though, that this is easy to fix. A subtle effect of the car bouncing when the ad is hovered over is omitted, and from looking at how it works I suspect this is also possible with some more CSS.

It’s very cool that such things can be done without Flash, but I’m a little skeptical considering how under Flash you don’t have to worry about differences in Firefox vs. IE vs. Chrome/Safari.

Justin Haygood

4 years ago

You can easily tell which one is which. The Flash one looks better, the text is rendered better (and looks identical across both Windows and Mac), and performs much smoother on lower end machines.

jason

4 years ago

I’m all for phasing out Flash and moving to HTML5’s canvas for simple animations. But honestly, it’ll be another 5 or 6 years before we can rely on HTML5. But that’s closer then being able to rely on web-kit, which is only supported by a portion of the browsers that already support HTML5.

It is a cool example of what web-kit can do though, and in situations where it isn’t essential to the site, and it degrades gracefully, then go for it, like rounded corners. But there are going to be a lot more situations in which rounded corners aren’t essential, then there are going to be situations in which animation isn’t essential. Might as well use an animated gif.

Damn, I sound a lot more negative then I wanted to sound, but I’m sure there’s a good use for it. Target iPad and iPhone maybe?

DB

4 years ago

Uhm.. no contest. Flash wins this one… (I use FF) .
Now, how about pitting Flash against Raphael - I would love to see that comparison.

leef

4 years ago

Looks like it’d be much easier to build that simple ad using Flash, and still you’d have more browser compatibility, right?

Øyvind Nordhagen

4 years ago

In Safari on Core 2 Duo, all the CSS animations have higher frame rates than Flash. Don’t know how that will look on slightly older machines, but it also depends on the frame rate specified by the Flash ads of course.

Nonetheless, Flash wins hands down on font embedding/rendering and compatibility. Do I enjoy making Flash banners? No! Would I enjoy making banner ads more if I had to script all animation, work out browser compatibility issues and handle several levels of fallback? Hell no!

Ricardo

4 years ago

They look almost exactly the same to me (Chrome/Mac), except for the font rendering.

Jason Crowe

4 years ago

I don’t know, but the HTML5 ads look pretty good on my iPhone… smile

Ed Moore

4 years ago

I think flash should still be used for ads cause you can still use plugins to block flash ads. If ads move to HTML/CSS there will be no way of blocking them without hiding all images and/or css on screen.

Galen

4 years ago

I was really impressed with this demonstration. I emailed it to several friends. When the web can fully support CSS3 and HTML5, it will be a better place.

Frank

4 years ago

Indeed?many people block flash plugings, avoiding Ads.

Henry P

4 years ago

Amazing on android evo 4g—flash renders incorrectly.  The css ads are beautiful.  They scale when zoomed, I think the readers above are confusing the flash ad with the css ad. Simply amazing work guys.

Alan

4 years ago

This experiment, while fun, is ultimately moot.

There are 3 main reasons for banners being done in Flash:

1. Granular tracking of user interaction and control over proprietary tracking code . Unless you’ve made banners, you probably have no idea just how much info is collected when your interact with a banner.

2. They work across every browser and every os that has installed Flash within the last 5 years. This is important b/c venders don’t have to worry about breaking a site when a banner in dropped in.

3. They are portable.  With Flash, all that has to be delivered is just the swf; otherwise, you’d have to deliver all kinds of javascript, HTML and CSS code and hope it doesn’t clash with any of a site’s existing code.

It’s just not gonna happen.

Animal

4 years ago

@Alan

1. You could add tracking code. But that’s yet another reason to block all swf, and never go near any adverts.

2. CSS3 and HTML5 *aimed at the general browser using public* will render portability issues moot sooner rather than later. We’re not talking about corporate intranets where the webgeeks refuse to leave IE6.

3. Writing any kind of web-delivered DOM application, and you are going to be delivering support code. It’s going to be there anyway.

And about the “pixel perfect font rendering” etc. 99.99999% of the browser using population are not such aesthetes. Just look at any random set of comments on a youtube video to assure yourself of this.

Cliff

4 years ago

Maybe it’s just chrome, but the rendering of the fonts and text was MUCH clearer with flash than with CSS3. Not that it makes that big of a difference with that type of ad. But what about something more dynamic? There wasn’t much animation on that type of an ad..a car bouncing up and down (which didn’t show up with CSS3 BTW but not like you would have missed much anyways) or a >> moving? I want to see some of those iAds vs a flash ad of the same caliber..

Nevertheless, interesting article!

ocube

4 years ago

I am not a big fan of flash websites but there is no contest here, flash beats HTML5/CSS3 hands down, at least when it comes to animation and font rendering. What irks me is this religious fervour to convert the world and pretending as if it rivals flash right now. I think HTML5 & CSS3 is the futre, but that future is not now and definitely not replacing animation flash is capable of.

grigio

4 years ago

On android 2.2 the animations are faster but simplified

Mads Hartmann Jensen

4 years ago

@ocube
Using Safari under OS X the animations and fonts are smoother in the HTML5/CSS3 demo than the flash version.

schoschie

4 years ago

Yes, honestly but unfortunately, at the moment it is still more efficient (i.e. faster) to do the ads in Flash, and they will even look very slightly better because of font rendering (which is basically a non-issue on Macs though; I’d have to look *really* hard to find a difference), and be much more compatible across all browsers in use.

BUT—as a proof of concept, to show that it *can* be done, I applaud this!
Also, thanks for the built-in tutorial on CSS animations. Nice.

Richard Leggett

4 years ago

I noticed a lot of subtle differences that will probably limit what can be done which may seem unimportant, but these are very basic banners…

The use of text and lack of vectors in the HSBC example makes for an ugly out-of-line “>>”, and the text “The World’s local bank” is not anti-aliased in Chrome which is visually jarring.

In the Buick example the logo doesn’t have the animated sheen. These are little touches that take seconds in Flash, but require a lot of CSS3 and markup, or are not actually possible. I’m not sure if there’s a way around this, perhaps designers will continue prefer the full control, ease and and speed of Flash (programmers don’t make banner ads), and if there is a GUI tool released at some point, will we be OK with limiting the output to what the tech can achieve once we’ve had full creative reign?

Sean

4 years ago

I won’t comment on quality, and I already know the Flash is technologically easier to build. But once CSS3 reaches parity with Flash, does that make it as “evil” as Flash too?

Imagine the possibility to display ads, popovers, and splash, without the web-viewer being able to block it!?

Funny! Saint HTML5 and Saint CSS3, now just as usable for “evil” as Flash!

Niels

4 years ago

Interesting read!

Of course we all would like to replace the proprietary Flash with open standards. It just won’t happen in the near future.

First of all the browsers need to implement the HTML5 family—and more importantly we need proper development tools. Developing these (simple) banners using an ascii editor and a error-edit-reload cycle, seems stone age compared to the Adobe Flash IDE. I bet that it took quite a while and quite a number of page reloads to get all the CSS3 animation parameters just right? wink

Robin

4 years ago

Commenter Alan makes very good points, which highlight an issue which doesn’t seem to be getting much consideration in all the various HTML Vs. Flash debates going on. There is still, and will continue to be for some time, strong commercial demand for Flash advertising. And when you consider that most Ad Platforms insist on Flash content being published in Flash v9, 8, or in some cases 7, to ensure maximum penetration, how long do you realistically think it will be until the likes of DoubleClick.com decide it’s safe to ignore IE6,7 and 8??

Ian Storm Taylor

4 years ago

@Alan,

2. Mobile…

David Burrows

4 years ago

Along with all the points above, you’ve picked the simplest ads possible to replicate, they’re hardly motion graphics masterpieces. To be honest your just replicating 1998 level flash ads - try browsing around http://www.bannerblog.com.au/ and see how far you get replicating some of those masterpieces.

Michael Mullany

4 years ago

@David. We went to a few major news sites and pulled off whatever was running that day, and we got these ads. There are definitely flash ads on the site you reference that can’t be done using pure CSS3, you’d have to go SVG to get there. And for the “HTML5” iAds that Apple has been showcasing, you’ll need the full complement of Javascript, CSS3 & HTML5 (and probably a little SVG as well.)

JavaDeveloper

4 years ago

It is very easy to differentiate. And yeah, Flash wins, not only from UX perspective but also from a developer perspective. The sample ads shown in the article needs a ton of code in HTML/CSS but can be achieved by a novice Flash developer with just a couple of lines of actionscript (or lesser).

Couto

4 years ago

On Safari 5 for macOSX the CSS3 ads beat the flash ones in every single aspect. Smoother animations, and better font rendering!

Jose Daniel

4 years ago

Flash is not to make banners! Flash is for RIA’s development

Tonina

4 years ago

The flash version looks waaaaaaaay better.  More smooth transition, better text rendering and extra animation when you over it.  Is a loooong way for ccs3 to come close to flash.

Robbie

4 years ago

@David. most of the advanced flash ads are just video anyways. since instead of either css or flash, you can simply just put a video there. Unlike desktops, videos on mobile devices don’t play within the browser, they open up the dedicated video player. For now flash would be the solution on android devices.

As far as the css test, they are identical on my machine. Running Chrome 5 on a mac.

Also it is still a lot easier to simply create the ad in flash versus css.

ross

4 years ago

FYI.  Contrary to other people’s experience, on my machine the fonts are definitely sharper in the css version.

Jeremy Carlson

4 years ago

Considering I have to open up Chrome (cause FF is my main browser) to see the difference, Flash wins. Obviously fonts are better in the Flash, too. Main reason though? Creation time. Boss says I need an ad, how long will it take?

Response to boss: “Well, if I do it the HTML5/CSS3 route, with continual testing, like 2 hours, maybe more. And it won’t work on any version of IE, or FF at the moment. Or, I can do it in Flash, in about 20 minutes, and the only thing it won’t work on is the iPhone.”

Flash = win, right now.

Jeremy

4 years ago

I use FF so they didn’t animate at all. As much as I hate to say it, what good is putting the work into getting this to animate when the majority (using non-webkit browsers) can’t even see the animation? It has to be done with Flash for now. That will change eventually, but for now it’s simply not worth the effort to do ads in CSS3.

Practical criticism aside though, they look pretty dang close in Chrome. Good work.

Deborah Wood

4 years ago

I could tell the difference in each one, only because of the fonts used (Safari/Firefox/MAC). The demos were very cool, it will be interesting to see if we can function in a Flash-free world and if so, how Adobe will respond. The differences between the two were barely noticeable and given where the world is going as far as mobile usage, I think this is a very viable solution.

Greg McAusland

4 years ago

Easy to tell apart, not because of the font rendering but the way it loaded and the framerate on transitions.

CSS3 kicks flash in the head for the most part, despite people weird love for flash font rendering, which I personally have never liked. What would I prefer to use? css3 ofc.. what is supported? flash..

its a moot argument at the moment, and even if css3 was widely supported the issue lies in encapsulation. How do you deliver an ad cross network when you need the markup, the css and sometimes potentially some javascript to make the thing work.

thats a requirement of 3 files or some nasty looking inline code.. dont know. I’m passionate about css3, I have disliked flash since waaay before it was ‘cool’ to dislike it.. but I cant see this implementation becoming terribly mainstream on desktop computing.

Furthermore, why should ads animate? I’m kind of the opinion that loud obtrusive advertising has long since been proven to be less effective than something simple elegant and tasteful. Nothing makes me leave a page faster or look the other way, than some obnoxious flash advert. (not that the example is one, its quite tasteful) but just for arguments sake.

On a leaving note, maybe its worth the extra work simply to boast your page doesnt have any flash on it. stability, speed and security for the win. If it were supported that argument would win me over in a heartbeat, and it should anyone else you cares more about their users than the ease of which they implement stuff

Andres Galindo

4 years ago

The ads are quite different to tell apart, flash’s font rendering is superior.

Right now it’s also a question of compatibility and availability, a good number more of people have Flash installed than a browser that supports CSS3

Also, animation in ads is just an attention grabber for your average consumer it isn’t annoying at all; unless it’s loud and obnoxious of course. The provided examples are sleek and good examples of a well done flash ad.

Animal

4 years ago

Greg makes a good point. Bouncy, flashy ads are VERY annoying.

But then I find all ads annoying and have never EVER clicked on one.

Víctor Garcia

4 years ago

The winner wad the CSS versión, since the flash ad wad not available on my IPod touch.
Maybe the iPod, iPad browsers client, are not a big share, but trust me is growning

Helen Dangote

4 years ago

This is a good example for what one can achieve with the new CSS3 and HTML5. I started playing with HTML5 a week ago with the help of some books; and will try my hands on a one of the ads you demonstrated here.

Nice work.

Slated

4 years ago

“Flash’s unparalleled and quite exquisite font rendering”

How typical of the IE6-generation relics, weaned on finger-painting toys like Flash, to think so two dimensionally.

Here’ what your “exquisite” Flash garbage looks like on an Android smartphone, compared to the HTML5 equivalent:

http://picasaweb.google.co.uk/102946757503830834230/Android

“Under Flash you don’t have to worry about differences in Firefox vs. IE vs. Chrome/Safari”

No, you just have to worry that it’ll be completely illegible on everything else, or in many cases (e.g. iPhone / iPad) simply not visible at all.

Time for the Luddites to wake up and smell the 21st century.

YopSolo

4 years ago

in the last Ads ( the one with the car) there is a problem of timing ( The last block appears too fast )

With flash it’s faster and easier to create that kind of ads. Is css really a good tool to for that kind of stuff ?

Arne Bech

4 years ago

YopSolo:
1.  You’re right,  the timing is a little off on the last block. Can’t believe I didn’t catch that earlier! I think you have to think of CSS as the technology enabling animations and as far as I know there is no decent authoring tool for that yet other than writing the code directly. (Also, I haven’t seen flash on iOS yet).

2. I think all the tree ads could be further improved with some additional work. To recreate the “shiny” effect on the Buick LaCrosse logo this might work: use a similar text effect on the text in the logo as is used for the two first lines (i.e. move a gradient background clipped to the text) and for the logo itself you might be able to overlay a second (lighter) logo that you can fade in and out.

Timothy

4 years ago

As a user (not developer). The most immediate difference (on chrome which seems to be implemented the best) is that I can copy and paste the text.

When using chrome (mostly) the only thing I’m noticing is that when I mouse over the flash ad I get a finger to be able to click (follow the link) where I’m not getting a link on the HTML5/CSS3. Everything else, the ads “looks” the same.

When using Firefox 3.6.6 There’s a huge difference between the ads the HTML5/ CSS3 just isn’t working. It’s only showing the final animation. The Hertz ad isn’t wrapped correctly, The Buick ad isn’t being animated on a mouse over, the HSBC, the >>‘s aren’t moving.

There’s similar issues on IE. While the text for the text on Hertz ads are wrapped, all the same issues as FF are evidant

Petr

4 years ago

No brainer on iPad smile

knocker

4 years ago

I’d like to see a side by side comparison of a swf that has been crafted along a timeline with some custom easing; As far as I can tell the example flash files look like they are coded anyway( the horrible bouncing Hertz car being an obvious indication).
And yes, as an animator I do feel a bit threatened by these developments. How come nobody is coming up with some alternate timeline software?

PJF

4 years ago

I noticed right away since my ad blocker blocked all the flash ads but left the HTML5/CSS3 untouched :(

tomb

4 years ago

I was totally fooled. I thought the text was cleaner and easier to read, but I thought those ones were flash. They weren’t. I’m on chrome and other than a couple of little things (like the red arrows in the hsbc ad) I found the css3 text to be much more legible. The anti-aliasing on the flash almost makes the text too fuzzy.

Neil

4 years ago

Do you think Adobe or someone else will produce an application that will let you design an ad with a GUI that then lets you save it in CCS code ?
Our web department that designs our Flash ads are a bit worried that they will have to learn CSS3 and HTML5 which is not really what they want to do for a living.

Rush

4 years ago

It comes close but not close enough. I can see the difference almost immediately from the bad typography in the ad on the left (the CSS3 version)

SciK

4 years ago

On my computer, I have native antialiasing which is far better than Flash’s.
As a result, the text in the CSS3 ads is way more readable than in the Flash ones.

Compare: http://img85.imageshack.us/img85/2604/css3.png
With: http://img580.imageshack.us/img580/2262/swf.png

Gabriel Valladolid

4 years ago

@paboqed Really people don’t see any issue with both, flash vs HTML5. They were created for different reasons and give new posibilities to gadgets not supporting flash. No one is thinking in replace bunches of css, js, html for a whole flash site, ads look posible, but for an specific target, ie apple gadgets.

New kid in town, html5, is wellcome for IT people all over the world, but differences are clear. Such thing like versus, personally don’t see it. Both are different with strengths and weaknesses, and cool for IT teams to give web users new experiencies on the web with every gadget they may have.

JT

4 years ago

All you have to do is read through the comments to get a sense of the drasticly different experience that people get when viewing the html/css versions.  This is the main point to keep in mind when thinking about flash vs html.

Having said that, and I am a flash developer so it pains me to admit this, but I’m sure in time user experience will improve with these html/css executions.  However, that time is not here yet and wont be here for some time.

In the long run the best case scenario we Flash people can hope for is one where Flash and html5 live side by side and are used in cases where their respctive strengths shine. Those of us who focus on Flash would be wise to add html5/CSS3/Javascript to our toolbelts. Embracing both will not only make you more marketable but also more profitable.

One thing I do wonder about is file size.  I’ve been developing banners for some time and I know publishers keep very tight control on the file size of the banners that appear on their sites.  How much k do these html/css banners add to a page versus flash banners?  Can mechanisms to control the loading of these banners be easily implemented?  What might happen to browser performance and page load times once your have 3, 4, 5 or even 6 of these banners animating on a page?

Dee

4 years ago

Flash is dying ... hard. Can’t wait to bury it along with IE6.

Leonid Kogan

4 years ago

i have found one big difference between flash and css adds

adBlock can filter only the flash ads, not the css3 one….. wink

Tomas

4 years ago

These ads are so boring and simple, no effects at all. Still it’s problem with font rendering and antialias. So a Flash ad with motion blur, 3D scaling etc etc it’s light years ahead?

Laptopleon

4 years ago

Advertisement agencies want the best experience and — for example — Flash banners can get them a much further than anything else. Custom fonts are just one feature you can only get via Flash. Advertisers won’t switch to HTML5 and CSS just for iOS users. Apple don’t want them too either, they’d rather use their own ad systems, that’s the whole point.

Greg Lafrance

4 years ago

I get the impression that while HTML5/CSS3 will be better implemented by the major browsers over the years to come, Flash will always have an edge. Flash is not standing still, it is getting better all the time. I think HTML5 / CSS3 will possibly have its place in some circumstances, but I still have great confidence in Flash (and even more so in Flex).

Hmm

3 years ago

I’m still with flash. I wonder how easy it would be to BLOCK eye-soring HTML5 ads….specially now its really hard-coded in there.

HTML5 has a long ways to catchup to flash in ways of vector animations, and Rich Internet Applications.

Flash all the way for RIAs.

Hmm

3 years ago

The major downside of flash is that you have to update it. But when you do the performance (in my opinion) is tied with HTML5 and…maybe it’ll surpass it soon.

Beau

3 years ago

The biggest challenge I saw when trying to build a flash-ish html5 ad was filesize. Unless you’re using a default font, you’ll have to include the font file. That’s bumping it up to 100K right there if it’s a decorative font. Trying to explain that to a client—that won’t fly.

The big challenge here isn’t the appearance to the end user. The challenge, as the designer, is going to be trying to make the client happy enough to approve the thing before it goes live. So - trying to tell the suit that people won’t notice the oddities in text, or that it would look a lot better if they’d switch to a better browser - those are the arguments flash designers had to make 10 years ago - telling folks they had to download the player.

Just saying.

dr gorilla

3 years ago

To those who say that it looks better in Flash, you only say that because you’re looking for a comparison. In a real life situation you wont have a then Flash version of the same advert sitting next to a HTML version, so there won’t be a comparison. The only people you have to convince are the clients. Just my two cents.

diseño web

3 years ago

As a user (not developer). The most immediate difference (on chrome which seems to be implemented the best) is that I can copy and paste the text.

When using chrome (mostly) the only thing I’m noticing is that when I mouse over the flash ad I get a finger to be able to click (follow the link) where I’m not getting a link on the HTML5/CSS3. Everything else, the ads “looks” the same.

When using Firefox 3.6.6 There’s a huge difference between the ads the HTML5/ CSS3 just isn’t working. It’s only showing the final animation. The Hertz ad isn’t wrapped correctly, The Buick ad isn’t being animated on a mouse over, the HSBC, the >>‘s aren’t moving.

There’s similar issues on IE. While the text for the text on Hertz ads are wrapped, all the same issues as FF are evidant

Cliff

3 years ago

Wow, maybe this is why the big corporations are trying to push HTML5. I won’t be adopting it anytime soon. This just forces ads down our throats, Although I am sure someone will come up with a great way to flush the net of these new nuisances..

Comments are Gravatar enabled. Your email address will not be shown.

Commenting is not available in this channel entry.