A conversation I had with a designer friend today where he asked me what I thought about Flash web sites got me thinking.
Flash content might be "flash", but it is not necessarily useful, functional or usable. I'm not a great fan of Flash, but I can see it's value to the web. It provides attractive, fluent and dynamic sites and designs that have a level of interaction that is difficult to duplicate in a conventional web-site - even when using techniques such as JavaScript and, increasingly, AJAX.
Users who visit a Flash site may experience a number of effects of the Flash content that can disrupt a positive web experience, which often reduces the benefits of using Flash in the first place. When visiting a Flash site with a system or browser that does not have Flash installed, a pop-up, yellow bar or a simple failed portion of the page will be displayed. This can be frustrating, because before I can enjoy the quick-satisfaction I love about the web, I have to wait for a number of minutes while I download and install the Flash applet. This is, of course, only done once so it's annoying once per browser. I remember I recently had to help someone who was having problems with using a web site that used Flash. His browser was experiencing a HAL-9000 style internal conflict. It wanted to install the applet, but his security suite which had integrated itself into his system didn't like it so much, so caused extra confirmation windows which, quite simple, can be quite scary if you're not sure what you're doing.
Once the Flash applet has been downloaded and installed, we then have to wait for the Flash content to load. Well designed Flash content is, of course, loaded asynchronously often with attractive progress bars. Others, just make you wait. But why should I wait? I often have to go to sites and have to watch a progress bar making it's away across the site, and these are big sites - one key site is Sony Ericsson's product catalogue at http://www.sonyericsson.com/cws/products/mobilephones?cc=gb&lc=en. It even comes up with "There's a lot to load, but it's worth the wait". Well actually, it isn't. I struggle to wait for them to bring out decent and reliable phones - I don't want to add waiting for the most important page on their site to load too. If you haven't got Flash, maybe they think you're not worth the effort? Luckily my Nokia has got Flash, but I won't be browsing their site with it.
When the Flash applet has loaded, we're often presented with a beautifully designed and thought through experience. Immediate feedback is provided on mouse interaction with screen elements. Animation is smooth and can be beautifully subtle. A well designed Flash web site is a joy to use - if you're able to fully utilise and benefit from a web experience. Users who require accessibility features such as alternatives to mouse control, larger text, different colour schemes or spoken content all too often lose their experience at this point. No matter how many times they change their browser settings to affect the stylesheet, the text size or control method, the Flash applet will often sit and ignore their wishes. A real shame, because the effort that goes into a Flash applet is not insignificant and requires a paradigm shift in terms of programming. Additionally, even "able" users can struggle to shift their method of interaction to a Flash applet. For instance, I was at a corporate partner's web-site today and I was navigating their site struggling to find some content. I went on a page that was not relevant and instinctively went for the "Back" button - possibly the biggest button on most browser toolbars. I ended back at my Google search, quite frustrating as I then had to navigate back to where I was (after I had waited for the "web site" to load again).
The support of Flash is subject to a large extent to Adobe's opinion and support of a particular platform. The PC and Mac will enjoy Flash players for the forseeable future - but what about the increasing number of alternative browsers? Television browsing is growing fast - often via a games console connected to the internet. Also growing fast is mobile browsing. I am lucky that my new Nokia N95 phone supports Flash, but other phones may not. Other phones would need more memory, a better CPU and this can have a big impact on battery life. If Adobe does not believe a particular platform will "work" (which may even be down to licensing or political reasons, luckily, not something Adobe seems prone to yet), no matter the technical qualities of the device, they can choose not to implement a Flash player. Would you like to put your web-site into their hands and have them choose who can and cannot access your site?
Finally, there are the inevitable security concerns and the obligations that come with them that are passed on to you, the user. We're now at Flash 9. More features are being added each time and this will only provide greater opportunity for bugs and potential security vulnerabilities. We struggle to make sure that our operating system and browser is "patched up" already, now we have to worry about various applets inside the browser. Granted, this is usually an automatic process, but it is using my time to download and install, my bandwidth allocation which may be capped and places the responsibility on me to make sure it is up to date.
Then there are the servers. I always say Google is the most stupid, deaf, dumb and blind user that will use your site - but you want it to use it regularly. Search engines such as Google cannot use a Flash applet. Even when the "Googleplex" achieves sentient status, it will struggle to effectively index and understand a Flash applet and the content it contains in a structured and useful way suitable for indexing. When a search engine goes to your Flash site, it often sees very little. For heaven's sake, make sure that you at least include a decent <TITLE> tag and effective <META> data.
So how can you use Flash effectively?
I'm not interested in being negative for negativity's sake regarding Flash content. Flash content has it's place, and it can often create a very positive user experience, if implemented with consideration to users and search engines. I have come up with the following guidelines I like to keep in mind when people ask me about Flash.
What is Flash good at?
Recently, we've been playing with streaming high-quality video streams using as little bandwidth as possible for as cheap as possible. There are few products that can truly achieve this and have such a wide user-base as Flash. Windows Media Player is on virtually all PCs thanks to it's integration with Windows (except in Europe, of course!) but this often draws resentment from users, particularly Mac users who often need special software to view the same content. By the same token, Quicktime is available on Macs (although they realistically represent no risk to the true business user market) but PC users may resent (and I do) the repeated attempts by Apple to install iTunes and now Safari along with it. Having a "Go Pro" message everytime you close the application is also frustrating. Finally, there is Real Player, a wild thing that has little respect for your wider use of your PC. It aggressively tries to take control of all your media, constantly wants you to "register" for content and support (read "spam"), places tray icons that have no benefit to users and has effectively turned into bloat-ware. Flash, on the other hand, can handle very efficiently compressed video that can be secured and made available to users no matter what platform they may be using. It is no accident that YouTube use Flash for their video player. While no content on the web is truly secure, I was interested to learn that you can adopt some cute practices to seal up Flash video content - at least to the amateur.
Flash is good at marketing. Marketing channels such as banners were often animated GIF's which were slow to load, animated jerkily and were unattractive due to their 256-colour palette. Now, Flash is used regularly and - if well implemented - can provide a positive user experience. The silly and pointless Flash adverts that you find on sites like Facebook aside, a Flash applet can entice users in by presenting simple games, video's (the IBM ones are very popular, good ol' Gill) and elegantly designed animations. If I see a Flash video ad, I usually play it.
Flash is also great for games. So many hours have been spent playing silly, pointless but highly addictive games built in Flash. These games are great as a viral marketing tool, too. Kids love them, they're safe and they're highly interactive thanks to their ability to utilise the multimedia features of a PC.
Never wrap content up only within a Flash applet
You wouldn't keep your key web site content behind a username/password protected page, preventing your users and customers from accessing it so you shouldn't put such content only within a Flash applet. Users who cannot use Flash must be able to access the same information or functionality. Sure, it may not be as snazzy or beautiful, but some people don't have time, security-privileges to install Flash or just aren't that superficial. I'm a meat and guts person, myself. Flashy graphics has no effect on me, if I can't get at what I want, I'm off.
In providing this alternative content, you can choose to do it in two ways. You can check for Flash on the browser in some JavaScript and fail-over to static HTML if Flash isn't available, or you can present either content and ask the user to choose. But don't do a "Flash or HTML?"-style page, this has no benefit to search engines and requires an extra click for the user to access their content. A perfect solution, for me, is to try and load the Flash version and then load a small portion of the Flash content along with an option to choose the static version. This maintains a quick and attractive user experience, even if the user opts for the static version as they've not been made to wait for the full applet to load.
Flash works really well when it complements your content
Consider my hosting company's site: www.hostinguk.net. The Flash applet along the top is being used for what it is good at: creating an attractive and vibrant promotion mechanism that is central to the user's eye-line. I visit their site regularly, and this applet is used to convey latest marketing and products that are being implemented and gets my attention every time. But after a few seconds absorbing the simple content conveyed through the promotion channel, my eyes fall to the text - I want detail and there's nothing like text for providing it.
So in this case, the Flash content is complementing the site content. It is being used as a vibrant, attractive and sleek channel for conveying a marketing message but if you can't see it, you don't miss out. Additionally, it is small, so it loads fast. Search engines will ignore the Flash and attack the text on the same page, which will drive users to the page and who will see the attractive Flash applet and from that, their initial momentary impression of their browsing experience will decide whether they're likely to stick around and maybe make a purchase.
A client has recently told me that I had lost out on the development of a charity's web site to a Flash web site developer. This infuriates me, as, at the end of the day, they will end up with an attractive site but which would be difficult to find - and certainly next to impossible to find and jump straight in to the context which I want. Flash developers might not have realised it yet, but when you search in search engines, they tend to take you to the content you're after - not the first page and have you find your way through the navigation to the content - which is what a Flash site forces you to do.
In conclusion, we must also visit Silverlight, Microsoft's competitor product. Silverlight offers much the same as Flash does now, or will do in a production capacity when v2 is eventually released. Silverlight offers the developer a lot more features than it offers the user, in all honesty. It's another component that has to be installed in increasingly bloated browsers. From a user's point of view, I struggle to see any benefits. The benefits are entirely for developers, particularly those with a .NET background. The Silverlight platform has one key difference, however. It uses Javascript for it's control mechanism, and holds it's data behind web services and XML files as XAML. While not entirely useful for a search engine, at least it is something. Again, I would never advise implementing a site or part of a site entirely within Silverlight, particularly when it is such a fledgling product. It has a long way to go and while Microsoft may have a link on every page of their site, it's going to take more than that to encourage users to install it - particularly as it's use has actually slowed down key Microsoft sites such as their Download Site.
So today I have been working on my first production Silverlight application, if that is what you would call it. It will be used as a simple promotional device on the Isle of Man TT site, promoting the TT Live! service for 2008. You can see the page in action at:
http://www.iomtt.com/TT-Live.aspx
(Note: this page will only be active until 6th June 2008, which is the end of the TT period.)
For the benefit of Googlers, I've prepared some lessons learnt and observations made.
Images
Images within the Silverlight control can only be JPEG or PNG format, otherwise you get a AG_E_NOT_FOUND error. Found this out only within the Silverlight Forums. Could have pointed that out on the videos, guys!
Timing within KeyFrames
When working with KeyFrames, the KeyTime is relative to the parent Animation. For example:
<DoubleAnimationUsingKeyFrames BeginTime="00:00:15" Storyboard.TargetName="Frame4WebCams" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1"/>
<SplineDoubleKeyFrame KeyTime="00:00:05" Value="1"/>
<SplineDoubleKeyFrame KeyTime="00:00:05.2000000" Value="0"/>
</DoubleAnimationUsingKeyFrames>
JavaScript integration is ace!
I normally despise JavaScript, partly because there are so many pages out there on the web with JavaScript errors it is disheartening to want to inflict more bugs and unreliable scripts onto users.
I do like the way that functionality has been split out into the JavaScript element. This is in contrast to Flash, which uses a single file for both presentation and functionality. This split of functionality means that the host web page and server can interact with the control in a more logical fashion - particularly if you're a .NET developer. It also helps me improve my JavaScript!
One way I used JavaScript was to create a Replay button at the end of my little presentation.
I have a canvas for my Replay button:
<Canvas x:Name="BuyButton" Canvas.Top="145" Canvas.Left="259" Canvas.ZIndex="50"
MouseLeftButtonDown="onMouseClick">
Which calls my event handler in BLOCKED SCRIPT
function Replay_onMouseClick(sender, mouseEventArgs)
{
this.storyBoard=sender.findName("Frame1Storyboard");
this.storyBoard.begin();
}
But what I found super sexy is that I can find the storyboard that is in charge of my animation from the sender object, and just tell it to start. I found this thanks to the new JavaScript debugging in Visual Studio 2008, by the way. Not through the inspection tools, but by banging in random command lines in the Immediate window. I got lucky.
Development Experience
There is a lot of work Microsoft need to do to make the development experience more intuitive and cohesive. For instance, I have Visual Studio 2005, 2008 and Expression Studio February 2008 Beta. My VS 2005 supports Silverlight - to a point. My VS 2008 for some reason doesn't. My Expression February 2008 Beta works much better than previous versions. Overall, I end up being quite confused about what should be done where.
I'm also trying to learn the Expression product suite and bringing what I know from Flash I think I am getting to grips with it. I cannot see any of our designers using their tools, though, as I think Microsoft would wish. From what I can tell from their marketing, they are hoping for designers to generate the UI or visual components in Expression/XAML and pass the solution/projects on to the developers. These files can then be sent back and forth between departments as needed. I am not convinced this will work, however. Quite apart from anything, don't designers live in the Mac camp, beyond the ocean? ("There be dragons there")
Also, whilst the XAML produced by hand and by the tools is clean enough and well-structured, it is obviously structured according to the requirements of the presentation, rather than semantically. For example, I would have liked to highlight which TextBlocks related to headings, either by a Heading1TextBlock (being equivalent to an H1 tag) or by attribute, eg. <TextBlock HeadingLevel="1" />. This more open manner of managing content encapsulated within a Silverlight control or component does allow search engines access for indexing (unlike Flash), but doesn't give them the full semantic experience that is so important in effective indexing of content.
I must say the QuickStart videos at www.silverlight.net were essential and very useful in getting this far. If only my shouting at the presenters would have given me the answers I needed.
Don't think you can modify your XAML in Expression Blend and F5 to refresh your browser output. Doesn't work, resulting in repeated Ctrl+Refreshes to clear caches, etc. Took me a while to figure that out, too. (Visual Studio 'locks' the file, even when in "pause" mode). You do have to recompile each time.
I have found the optimal experience is having the following open and switching between the three:
- Microsoft Expression Blend - for the visual development of the XAML elements
- Microsoft Visual Studio 2008 (editing using the XAML editor, though I don't get a preview) - for the down and dirty XML tweaking and JavaScript hacking
- Adobe PhotoShop - for the graphics
One more thing; why does Expression Blend open Microsoft Word for an HTML editor by default? When will Microsoft dump their insistence that people want to develop web pages in Word, and generating the crap output that it generates? I would think any developer worth his salt would jump around in frustration if a designer modified something in the HTML editor in MS Word, wrecking their beautiful XHTML mark-up! (Okay, maybe not that beautiful).