Tag Archives: HTML

Website Design and Smartphones: To Flash or Not to Flash (Part II)

In Part I, we discussed how relying on Flash for websites can lead to problems with smartphones that don’t support Flash. We recommended the solution of detecting whether Flash is installed and, if not, substituting an alternative such as a non-animated graphic image. But that can be rather boring and not in keeping with your site’s up-to-date and sleek philosophy.

In this Part II, we present how, for our clients, we have created Flash-like effects without using Flash at all. Who says that the alternative has to be a boring static image, right?

One word, JavaScript. JavaScript (JScript for Microscoft’s Internet Explorer) is the de facto client-side scripting language embedded in every modern-day browser that, if utilized properly, can be leverage to provide special effects without the need for Flash. All smartphone have to support JavaScript since so many website use it. Note: JavaScript is not the same as Java which, like Flash, needs to be installed in your browser separately and is not available on all device platforms. JavaScript is the only universal browser scripting language.

Let’s explore a few examples of what we can do with JavaScript.

Example 1:  Rotating and Fading Slideshow

Here’s where a spot in a web page is used to show one picture after another. In the old days, a few years ago, abruptly changing from one image to another was an accepted practice. As designers started to use Flash more, they leveraged Flash’s ability to fade one image out and another back in. Well, JavaScript can do that t0o.

Check out Example 1.

Apple eschews Flash technology, and that’s why there is and probably will never be any Flash support on the iPhone and iPad devices. If you go to Apple’s website, you’ll see them using this effect in many places.

Example 2:  Rotating, Fading and Sectioned Slide Show

One disbeliever who is now a happy client said, “so, you can rotate through images, but what about special effects?” We asked him to mention one, and he said “okay, can you have an image swipe across from left to right in three sections?” We worked for a bit and show him something similar to our second example here, and he was convinced.

See Example 2.

What is going on here is that there are actually several images next to one another, three panes as it were. The JavaScript code rotates through the images in tandem, offset by a small delay to get the desired effect. Note the combined effect of simultaneous sectioning and fading.

Example 3: Two-Dimensional Sectioned Slide Show

Just to prove our point without any doubt, we took our second example with horizontal sections and added vertical sections to generate two-dimensional sectioning with two rows and three columns.

See Example 3.

There are other possibilities limited only my our mutual imaginations. Like Flash, JavaScript can create the following effects:

  • image fade in / fade out
  • image scrolling
  • drop-down / slide
  • changing speed
  • changing color
  • rotation
  • zoom in / zoom out
  • sprite (individual image) control
  • overlaying / superpositioning
  • multiple image morphing
  • synchronization of disconnected animations

JavaScript is not as good as Flash in:

  • video playback
  • accurate sound and video synchronization
  • high frame rates for graphics
  • unlimited text font support
  • realtime user interaction

This comparison does not suggest that JavaScript is every bit as good as Flash in its handling of effects. Far from it. Flash is a much better environment for creating animation because it has a complete development platform for developing its code and a specialized environment in which to execute it.

That said, if you would like the maximum amount of interoperability especially with smartphones, that Flash is that much a better environment doesn’t matter. In that case, turn to JavaScript.

Since JavaScript doesn’t have an Adobe behind it pumping out development environments for creating animation, you will need to turn to a development firm that knows JavaScripts in’s and out’s, matches up what you’d like to see, and provides a custom solution for your site. While that might sound expensive, it’s really not as we have created JavaScript replacements for fractions of what the original Flash effort cost.

*     *     *

In our two-part article, we hope we’ve expanded your thinking about how not to use Flash, at least not for every animation. We would enjoy hearing from you if you’d like to see if we can help with your site animations.

Website Design and Smartphones: To Flash or Not to Flash (Part I)

One of our clients noticed that his website wasn’t showing up on smartphones and other mobile devices. The problem was that his website used Adobe’s Flash which doesn’t render properly or at all on some mobile devices. We describe a solution in this first of a two-part series.

The Problem

Adobe Flash (formerly from MacroMedia) is a mature and dominate technology platform for showing animation on and providing high-end user interfaces for websites. Before smartphones, Flash could claim upwards of 99% browser penetration.

Flash’s penetration has been poor with smartphones. Up until recently, no smartphone supported Flash, and even today, only a limited number of smartphones support all the core features of Flash.

With the growing dominance of mobile smartphones, some companies whose websites rely on Flash are realizing that they cannot adequately reach their customer base. Companies that invested tidy sums in making their website into state-of-the-art user experiences are finding that a growing number of their customers are unable to interact with their sites from Flash-incompatible smartphones.

This is a problem that will eventually get corrected. While there seems to be some political posturing between Adobe and Apple with regards to bringing Flash to the iPhone, Adobe and ARM, the processor company behind most smartphones, are wrapping up a technology collaboration announced in November 2008 to bring Flash to most other ARM-powered devices by late 2009 or early 2010, and we are already seeing the results of that collaboration. We think it is clear that Apple will be forced to tag along at the end of the day.

Which smartphones support Flash? Basically, the iPhone browser does not while some of its apps do, the Palm Pre is about to, and all the Android 2.0 devices such as Motorola’s Droid and Google’s Nexus One do and will. Unfortunately, there are more iPhones than anything else, so this presents serious problems for existing websites that utilize Flash.

The Solution

If a website has just one or a few small Flash elements for effect but most of the site including the home page is non-Flash, e.g. HTML, then it would show the occasional blank space where the Flash animation would go. If a website’s home page or other web pages are completely Flash, or if the website relies solely on Flash for site navigation, then it may be mostly unusable.

In either case, the website would benefit from having some non-Flash-based alternatives dropped in and activated when a Flash player is not available. While the alternatives make not be as “flashy” (sorry), this quick solution will make a website more smartphone compatible.

DataPlex engineers know how to install alternatives to Flash into a website. Contact us for more information.

There is another, more clever technical solution which keeps some if not all of the “flashiness.”  You can read about here in Part II (coming February 2010).

DataPlex Implements Web Database for Charitable Organization

DataPlex project managed and implemented a full-scale web database for tracking a charitable organization’s membership and activities. The charity’s executives can securely access the database through standard HTML pages anywhere in the world, and instantly download filtered lists to Microsoft Office products including Word and Excel.The database is implemented using MySQL, the server-based language is PHP, the client-based language is JavaScript, and the HTML pages are sources from templates that are maintained directly by the charity’s staff.