NF WEB DESIGN STUDIO: blog of concepts: Feb 14, 2008

Thursday, February 14, 2008

Choosing between Flash & CSS

By Nick Fassolas

When Macromedia acquired Future Splash Animator from FutureWave Software back in 1996 and renamed it to Macromedia Flash their focus shifted from marketing it as a graphics and media tool to promoting it as a Web application platform, adding scripting and data access capabilities to the player while attempting to retain its small footprint. Flash originally was made to animate graphics and to be used in movie or cartoon production.
Web designers adopted the Flash technology mainly for 3 reasons: Freedom, Interactivity and no cross browser conflicts, of course by doing so they neglected other aspects that involve web development, such as: Accessibility, Usability and Search engine friendliness.

Now let us get down to the facts. Which is good and for what purpose.

Flash pros:

Freedom:

It provides designers an easy and creative way to create and manipulate graphics in any way they want, that power is unmatched. The ability to design without limitations that has been placed on designers by browsers or programming languages is a huge advantage. The handling of fonts is also something designers favour when choosing flash. It gives them the ability to embed any font they wish and have it display in any client browser regardless of whether they have the font installed on their machine.

Interactivity:

By empowering designers to use their imagination and creativity, flash driven sites can become more interactive in ways that other technologies only dream of. Innovative navigation menus, extreme multimedia capabilities and optical effects, video and audio integration, are some of the ways to provide a far more interactive environment for users.

Greater Control:

By implementing the use of vector graphics, flash gives designers the ability to create new - non rasterized - graphics that can be moved, morphed, bounce, slide and transform into anything, depending on the designers skill. Another thing to include in the greater control of flash is the ability to create a good looking web site faster than normal.

Improved Integration:

Flash allows you to integrate any multimedia file format into your site. For example, bitmap image formats (such as, GIF, JPEG, PNG, PCT, TIF), vector image formats (including FreeHand files, EPS, Illustrator files), and of course sound formats (WAV, AIF, MP3) can all be imported into a Flash movie.

Flash cons:

Usability:

Users prefer not to “re-invent the wheel” when it comes to navigating a site. They prefer simple user interfaces that will smoothly and accurately lead them to what their looking for. Unfortunately designers that use flash most of the time neglect that parameter and create user interfaces that sometimes confuse even themselves. Other problems are: No back button support, No downloading of images, no control over the text size and no right click functions. There is also another problem that designers should consider; printing and selecting text in Flash movies is often not as simple (or familiar) to users as that on HTML sites.

Search engine friendliness:

Search engines use software robots (crawlers) to scan through a page and then index it on their database and although large search engines like Google now have some Flash indexing capabilities, these are still very limited which means that it will be nearly impossible to achieve high rankings with a Flash site. There are ways to show crawlers what the content of the page is but most of them are considered bad and in most cases they can get your site to be banned. (read more)

Accessibility:

Flash was designed for animation and other multimedia purposes, therefore it’s just not good for the blind and otherwise impaired. Ask yourself: Would you ban those people from entering your shop, institution or building? So why would you want to do it with your web site where it’s even easier to make your service available for everyone.

Bandwidth and Load Time Constrains:

The Creation of a flash site ends up - in most cases – being large in size and this leads into slower download times. As an example imagine a website that has a lot of images. All these images embed into the final flash movie and the truth is that users can interact with them, only by viewing them!

Plug-In Required:

Flash movies still require a separate plug-in installation in order to run in most browsers. Many companies do not allow their employees to install applications on their computers, which automatically denies some Flash site owners access to a portion of their potential user base.

Powerful Hardware:

Needless to say, that you need a powerful machine to be awarded by the animation capabilities of flash. This means, strong graphic card and powerful CPU running on your system. In a lot of cases people that use notebooks have a hard time using flash sites. Another problem is that flash can’t be viewed by mobile phones.

What are the good uses of flash then?

Flash is great when it’s used wisely in web sites. Flash is also great when you need to show a presentation, for example a demo of your product or to develop interactive games, like those found on sites for kids like Sesame Street, Nickelodeon, or Yahoo! Games. A typical good use of flash in a web site would be to dress it up using a small animation movie, or by limiting Flash to on-page accents and rich media. Finally flash is good for experimental web design, UI and artistic endeavours as well as rich multimedia content sites like you tube.

What are the bad uses of flash then?

The most common bad use of flash is the “splash or intro” screen. The flash intro screen in most cases discourages potential visitors from entering your site. Flash is not good for creating text–rich sites, e-shops or sites that showcase a large amount of products and need to use a lot of images to do so. Another bad use of flash would be the presentation of tubular data such as catalogues and schedule lists.

Now let’s check out HTML/CSS technology.

What’s HTML? :

HTML, an initialism of Hyper Text Markup Language, is the predominant markup language for web pages. It provides a means to describe the structure of text-based information in a document — by denoting certain text as links, headings, paragraphs, lists, and so on — and to supplement that text with interactive forms, embedded images, and other objects. (Read more)

What’s CSS? :

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML. (Read more)

HTML/CSS pros:

Separating design from content:

HTML, as we know, was never meant to be a tool for page design, this is where stylesheets kick in.
Cascading Styles sheets define HOW HTML elements are to be displayed! Allows you to create the look and format of a Website without affecting your content. This benefits both the developer as well as the user in many ways.

Usability:

This technology gives users exactly what they came looking for. Fast loading times, text-resizing flexibility, printer friendliness, easy link access, right click interactivity (ex: saving images), easy and smooth navigation, browser back button usage and good looks!

Accessibility:

By designing a web site using (X)HTML/CSS you can create an environment where all the information provided on it will be accessible to people with or without disabilities like low vision, colour blindness, other visual impairments etc. To ensure the accessibility of a website, use headings, links, bold text and bullet points and make sure they contain descriptive text. By giving the user the ability to change the colour of the web page you design, in his/her local machine, or changing the text size, you’re actually not only helping them but you re also getting your clients site more visitors. An example of accessibility in the world, other than the World Wide Web, is your television screen! Ever wondered why you have the option to change the colour, brightness and contrast of your screen? Imagine that… ten times better!

Search engine friendliness:

CSS has the ability to serve up content in its purest form, which makes it the best-suited technology for delivering pure content to search engines and legible text to text-only readers. Crawlers only read text! And text in a web page, except from delivering the information needed by users, also delivers the keywords that search engines need to find each web site.

Easy maintenance & Flexibility:

As Greg Rewis describes in Adobe Developer Center,

"every web designer and developer has experienced that moment of panic when, after meticulously laying out a page—complete with numerous nested tables—the client requests a "small" change. This could be something as simple as "can you move that image a little to the left," or as dramatic as "I'm not happy with those headers, can you make their font larger—and while you're at it, how about changing their colour too?" If you're dealing with a limited number of pages, you can take a deep breath and spend the better part of an hour making those irritating changes. But when you are dealing with the larger sites, which have become the norm, a simple change is suddenly anything but simple."

By implementing CSS in your HTML page, changing font colours, background colours or images is much easier than before. Also by keeping the original markup of the page as clean as possible and semantically meaningful you can create multiple styles and even different layouts for a web site, as well as other devices such as mobile phones faster than ever. In the old days having to maintain a large web site was a developer’s nightmare. Developers can make modifications across an entire site by changing just a single file.

HTML/CSS cons:

Inconsistent browser support:

This is the only main problem when designing using CSS.
Different browsers will render CSS layout differently as a result of browser bugs or lack of support for CSS features. For example Microsoft Internet Explorer, whose older versions, as IE 6.0, lacked many CSS 2.0 properties, misinterpreted a significant number of important properties, such as width, height, and float. Numerous so-called CSS "hacks" must be implemented to achieve consistent layout among the most popular or commonly used user agents (browsers). Pixel precise layouts can sometimes be impossible to achieve across browsers. But things are looking better since the arrival of Modern browsers such as Firefox 2, IE7 and Opera.

Lack of multiple backgrounds per element:

Highly graphical designs require several background images for every element, and CSS can support only one. Therefore, developers have to choose between adding redundant wrappers around document elements, or dropping the visual effect. This is partially addressed in the working draft of the CSS3 backgrounds module, which is already supported in Safari and Konqueror.

Programming language knowledge:

Everybody can design using CSS, but in order to do this he/she must first learn the basic programming languages needed to write in (X)HTML and CSS.

When should a designer use CSS?

You can choose to use style sheets in any occasion when designing a web site.

When should a designer not use CSS?

When you want to show a presentation or rich multimedia format content, it is recommended to use Flash.

HTML/CSS vs. FLASH: The bottom line.

The bottom line is that there is no real debate to whether you choose the one technology over the other. As I said above, using both technologies at some level can do wonders. Since its arrival Flash has matured a lot. Its Action Script has evolved and who knows maybe in the future it will be Search engine friendly. Flash still remains the best choice to create multimedia interactivity, presentations, e-learning activities and web games. As for entire web sites created solely with Flash I would recommend otherwise. HTML in combination with CSS has brought web design and development back to what it was supposed to do in the first place. And that is to create flexible, easy to use and understand beautiful web sites that everybody and I mean EVERYBODY! can use.

Labels: web design