After Steve Jobs announced that flash would never be supported on the iPhone and, more importantly, the iPad, he proceeded to write an open letter regarding his thoughts on flash. While I am not too concerned with flash being supported on mobile platforms (which introduces a range of problems regarding battery life, performance and more), this does beg the more interesting question of the future of flash on the web.

The Problems With Flash

Flash is often used to build entire websites that could have easily been built using HTML, CSS, Javascript and other web standards. Of course, if a developer (or designer) is comfortable with Flash as a platform, they may see it as an opportunity to easily create a cross-browser/platform compatible website. The problem with this of course is that Flash is not standards based. What does this mean? Well,

1. It is proprietary - Adobe does not allow it to be free (cost) or libre(open).
2. No web browser supports Flash without a plugin (except recent beta versions of Chrome)
3. There is no guarantee of ActionScript backwards compatibility (i.e. AS3 and AS2 are different methodologies and languages).
4. Flash browser plugins can produce different results (sometimes unstable) depending on the browser and the OS version. Of course, the same can be said for HTML/CSS, but it is worth noting that the problems exist for Flash as well.

HTML5

HTML5 is really cool in that it is mostly standards based and adds on to the well known set of HTML tags. It has a partial framework for video and audio. CSS3 (which is often associated with HTML5) supports 2D and 3D animations and transforms in many of the modern browsers. Other features like drag and drop, geolocation and offline storage/caching add some much needed native elements for front-end web developers. However, I don't think that HTML5/CSS3 will be a total replacement for flash right away.

Working Together

Both Flash and HTML5 have their place in support of web content. HTML5 will do well to fill in the areas where Flash has often been overused, such as:

• Video playback (once a codec is settled on among the various web browsers)
• Web applications (office suites, email)
• Interactive elements and animations

I think it will be a while before we see Flash phased out completely, however. Especially in the areas of:

• Game Engines and
• Anti-aliasing and Font Support

It will be interesting to see how quickly HTML5 is adopted by developers and how they will be able to push its limits in the future.

Below are some basic tips that may already be familiar to seasoned web developers/designers, but are what we consider best practices for designing and building a website.

1. Separate the design from the content.

Back in the pre-CSS days, website layout was accomplished with clever table manipulation. While CSS can cause some frustration due to the inability of certain browsers to properly implement the full specification, it can also be a great tool for controlling layouts and keeping the design of the site separated from the content.

Why does this separation really matter? If the website will never change, it doesn’t. But let’s get real – in that case, the site might as well be in print if it will never be updated. Separating the design and the content makes it possible not only for the original designer/developer to easily make design changes on a site-wide basis, but also allows content creators, developers and designers to easily work together on the same project.

2. Test the site on all of the popular browsers, operating systems and platforms.

Test early and test often. Also, don’t limit the testing only to different browsers on one operating system. See how the website looks at different resolutions, under Linux, Mac OS and Windows on each browser and on various mobile platforms. This is often the most frustrating part of building a website.

Another point of frustration is that there are still a lot of people using old versions of Internet Explorer. Give these tools a try to test the website on all the versions still in use:

• IE 3.0 – 6.0
• IE 7

As a side note, IE 6 and below do not have support for transparent PNGs. If transparency in images that have more than 256 colors (GIFs) is needed (or alpha transparency is required), the best transparent PNG hack we have found is Supersleight.

If every option has been exhausted and the website just won’t work correctly across all browsers, there is always the route that Google took: build a plugin for Internet Explorer to run the Chrome browser in a frame – that’s one way to make a website work in IE.

3. Validate the code. But, don’t rely only on that.

http://validator.w3.org/ can be used to check for any invalid code that may be in the website. Usually this reveals errors like tags that have not been closed or an alt description that has been left off an image. It is good to have W3C valid code – search engines like it and the green “valid” checkmark gives that warm feeling that the site has been coded correctly. However, do not rely on W3C validation alone. Make sure to test the site in all of the major web browsers (IE, Firefox, Chrome, Safari, Opera).

4. Learn the common browser bugs (and fixes).

All web browsers have bugs where the W3C specification for the version of HTML/CSS that is being used was not implemented perfectly. Most of the time these bugs reveal themselves in the positioning of content. Learn the fixes for these bugs so they can be avoided in the future. A good reference site for browser specific bugs can be found here: http://www.positioniseverything.net.

5. Use JavaScript rather than Flash where possible.

Flash is a proprietary technology from Adobe Systems. It is a very powerful platform for building interactive mini-sites, games, video players and more. However, flash is often used for graphic enhancements to a website like menu animations or basic website design.

There are two problems with this. One is that everyone viewing the site must have the Flash plugin installed. While most people browsing the web from a desktop PC will have this plugin, many phones (including the iPhone) do not even have a Flash plugin available at all. Most browsers, on the other hand, include a JavaScript interpreter by default.

The second problem with using flash is search engine indexing. While Google now indexes most of the text from flash sites, other major search engines (Bing and Yahoo!) do not.

Because JavaScript is implemented differently in each browser, it can be even more frustrating to develop in JavaScript than in HTML and CSS. Fortunately there is a solution to this. Learn how to use a JavaScript library like JQuery or Dojo. These libraries offer great cross-browser compatibility and plenty of functions for rapid JavaScript development.

6. Use a content management system.

Now, this may not seem like it is a necessity for a smaller site, but often those smaller sites grow much larger over time. Features like blogs, contact forms and other dynamic content are added and the website design requirements change over time. If a website is built in a CMS like Wordpress or Drupal, it is much easier to manage as it changes and morphs over time.

7. Design the site before building. Not the other way around.

I used to design websites as I built them in code. This works to an extent, but most of the time it ends up limiting the final design. Some useful tools for site design are:

• Adobe Fireworks
• Adobe Photoshop
• Adobe Illustrator
• Inkscape
• GIMP

8. Make use of the knowledge of others.

There are plenty of great websites relating to website design and development. Use the knowledge that others have already discovered. Here are a few sites to get started.

• Smashing Magazine
• Nettuts+
• A List Apart

What do you consider to be best practices when designing a website?