Ovalpixels Blog about Web-Building

Flash

Adobe Flash is no doubt a favorite tool for a lot of web front-end developers and designers. It is widely supported on a variety of platforms and browsers and features a rich and cohesive set of tools and instruments. Some people even say it is the next evolutionary step of the Web.

Why not then?

Even though Flash is great, it has its drawbacks ( of course, I wouldn’t be writing this blog post otherwise ). Here I am talking about a completely Flash made website, not just small fragments of it.

• It is extremely SEO unfriendly. Although Google stated back in the middle of 2008 that they have improved readability of Flash sites, this still isn’t enough compared to a well-made HTML website.
• There are no links. If you want to send a link to a friend – no dice. If Google actually learns how to crawl such websites, what links is the crawler going to give? There is only one URL in such a site – the domain name. Best case scenario in Google listings would be a single-page website with a lot of heterogeneous information
• The web is all about content over design not vice versa. Traditional technologies today are so good that what people usually do with Flash ( and can’t with other stuff ) is make something which looks more like an art gallery than a website. This is extremely counter-productive for any business – end-users visit a site not to experience eye-candies but to get some content. Just like a fashion review – you need to pay attention to the clothes, not to the models. The focus should stay on the content and not on the decoration. Period.
• Browsers are not really made for that. Yes, you know what I am talking about – when I go to a site and have to wait 7-10 secs just for the Flash to load and then start-up, this makes me a bit nervous. And as I have previously stated on this blog, loading time is crucial for web visitors. Each second can be costly.
• Background music. Well, OK, it may be just me but I hate background music. Yes, I can stop it but I didn’t want it in the first place! I have 10 tabs running right now and I really don’t want some strange music streaming from somewhere without even notifying me. Yes, this is not just a Flash flaw but it looks like it is easy enough for Flash designers to get tempted by this option.
• “Let’s reinvent the web!” Hmmm… this sounds a bit like Microsoft but it is actually Adobe trying to do it. Correct me, if I am wrong, but isn’t “flashy” a bad term for a website? You get crazy, incoherent navigation, strange things popping out of nowhere, all kinds of elements moving, resizing and changing shapes all over the place. Long live vector animation! But wait, where did the visitor go… ?

I am sure you can think of many more reasons not to prefer Flash but these were my top list. These are also not too technical – we could talk about inter-compatibility with other technologies for too long.

Enough ranting already – I will show you some tricks which can make Flash history. Our goal is to create a website which is both visually compelling and SEO-friendly – a simple 5-pager with some help from PHP.

Back to basics

Good ‘ol Javascript. It needs some polishing from a well-known library, of course – otherwise you risk banging your head against the wall for some time. In short, we will use traditional html + css + javascript technology which will help us get some really nice effects. We will then add some nifty AJAX to maintain a good and flowing experience for the user but still making a SEO-friendly site with active links and most importantly – a graceful degradation. If the visitor is using a stone age computer without JS support ( or is simply using some JS blocking browser extension ), they will still be able to get to the content. They won’t experience all the sweetness but they will get what they wanted after all – the content.

Javascript Libraries

You can find tons of them out there. I have personally used PrototypeJS and jQuery but have had a good look at YUI, MooTools and Rico, too. Good things are told about Dojo, but I haven’t really looked into it. Some time ago jQuery was much lighter than PrototypeJS and that made many people switch. Today the difference is not so great as jQuery can get down to ~18k and PrototypeJS to ~20k ( gzipped and minified ) but let’s not forget that PrototypeJS’ effects’ library Scriptaculous ( scriptaculous and effects only – no builder, slider, sound, controls and drag&drop ) add another 15k. So, jQuery turns out to be twice lighter.

So, I chose

jQuery

Go get the most recent version from here. The version I am going t use is 1.3.2  as it is the most recent right now. And some additional plugins – we will talk more about them later but I can recommend Color, Timers and fxQueue. The first one gives you the ability to smoothly change colors ( including background and border ) of elements via animate(). I am taking a minimalistic approach and some may argue that the Color plugin is not that much needed, but if we want some candies, we’ll have to use it. The Timers plugin is not an overkill either – it is a nice wrapper for setTimeout() and setInterval() and does some good garbage collection so that no memory leaks from the browser. You can, of course, use a variety of great plugins from jQuery’s plugins’ repository.

And because this post is getting too long, I will begin with the actual stuff in my next blog entry – stay tuned!

Tags: Javascript, PHP, jQuery, Ajax, Adobe, favorite tool, web front-end developers, javascript technology

This entry was posted on Friday, February 20th, 2009 at 1:56 pm and is filed under Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.