Orange Project – The Technical View
After I talked about my latest project in the last article, I would like to describe now some technical parts of the project.
At the beginning of the project, I had a clearly defined target for myself from the technical point of view: Deal with the usability problems that most Flashsites have. Check out how those problems could be fixed, find possible workarounds and show new features that can improve the usability of a site with the usage of Flash.
The following topics are very important for me:
Back-Button Support:
In my eyes, the best solution until now comes from Kevin Newmann. Based on Javascript, HTML anchors track the single navigation steps. Unfortunately this solution doesn’t work in all browsers but it is a start and rather easy to implement. If I’m informed correctly, there is supposed to be a solution by Adobe with Flex2 in the futre. That would be nice.
Deep Linking:
I also used the JS scripts by Kevin here, that allowed me to manipulate the URL in the adress inputfield of most browsers. Unfortunately the updating works only as long as you don’t edit an anchor manually.To minimize this problem, you can get the direct link to the current status of the site through the button “Link to this page” or via the context menu.
ContextMenus:
Everybody knows them from desktop-programs and so my claim was to also use them with this site. A nice example is, that you can copy all contact information to your clipboard via the context menu.
Keyboard-Support:
The whole site can be navigated throgh the keyboard. All main navigation points can be accessed through their first letter. The gallery can also be controlled through the cursors and the spacebar. Unfortunately there is a problem with the keyboard support when using Firefox. Through the implementation of the back-button support and the changing of the URL in the address field, the flashmovie loses the focus here and then. The navigation via the keyboard has to be activated with a click on the flashmovie then. The reason is bug in the focushandlich of Firefox – the problem doesn’t exist in the Internet Explorer. If someone knows a solution, please let me know.
Flash Embedded in HTML:
For the HTML implementation I’m using the FlashObject by Geoff Stearn. With this you can easly embed SWF files W3C conform. In the most recent version the express installtion by adobe is also supported now, wich enables easy updating of the Flash player from version 6.0.65 onwards.
Furthermore are a variety of smaller featues that I only want to mention briefly here:
- Download of the photos via the FileReference Class
- Support of the mousewheel (the focushandling bug of Firefox is also here problematic)
- Depending on the size of the stage, the view of the photos adjusts itself.
- Error highlighting at the contact form.
- Slideshow
As a conclusion I can say that it was not easy to realize every feature. But the gained experience shows me, that many known usability issues can be minimized and in the future maybe also removed completely. As one could discuss this topic endlessly, I’m looking forward to an active exchange, via email (contact[at]jensfranke.com) or here in the comments.
Thanks Kai for the translation.
11. February 2006
17 Comments Add your own
1. Stephan | February 12th, 2006 at 12:52 pm
well done! we should send Kevin Newmann some sweets for enabling historykeeper on macintosh browsers…
2. Battin | February 12th, 2006 at 2:49 pm
Amazing project man.. i really love the user-friendlyness in it.. back button, deep linking, image save… great man!
3. pfuy | February 12th, 2006 at 6:08 pm
wow. respäkt!
4. Nikita | February 12th, 2006 at 7:43 pm
I’m very inspired by your work!
Thank you for sharing experience with the community.
5. Tink | February 12th, 2006 at 8:47 pm
Hi Jens great site
I have a quick question about the indexing of the site. Are you checking if the user has Flash and if so forwarding them to another page with the Flash.
If this is the case doesn’t it stand a high chance of getting banned by bots like Peter’s Ripple framework (http://www.osflash.org/ripple) or have youcompensated for this?
Any info appreciated.
6. Administrator | February 12th, 2006 at 8:57 pm
First of all, thanks for the feedback. I love to talk about this topic.
@Tink:
I use the FlashObject and so the search engines indexing the text between the flashcontent tag, which will replace if the flash plugin exist on the client system.
Take a look at Google.
Any further questions?
7. Felix | February 12th, 2006 at 11:06 pm
cool project. the only thing i’m missing is being able to navigate the site by my mind…- shouldn’t be too difficult to implement
8. peter | February 13th, 2006 at 10:46 am
It feels really nice… well done…
I found lots of websites, recently, where some of the features you are using and presenting are well implemented there too, just an example:
http://www.redbulltrackattack.co.uk
9. nils | February 13th, 2006 at 10:51 am
nice work - just a quick bug report - the link to bypass the flash detection under the ?no flash installed? message is broken.
- nils.
10. Administrator | February 13th, 2006 at 11:10 am
@peter: Good example! I love to see more sites, which use such features. I can’t look deep inside the Red Bull Track Attack, but I missed a message if i scale the browser-window under x pixel. Did you build this site? Great!
@nils: thanks. i fixed it.
11. Gareth | February 13th, 2006 at 1:59 pm
bravo! that is 100% awsome..
you ROCK!
12. Gareth | February 13th, 2006 at 2:02 pm
it would be amazing if you could create a quick example fla.. the flash community would be very grateful, no more bashing by the css/standards folks.
13. peter | February 13th, 2006 at 10:00 pm
@ jens: No I haven’t made that site. (redbull track attack),no ide who has done it.
14. pete | February 14th, 2006 at 4:36 pm
shortcuts don not work on os x.
sweeeeeet…
15. Administrator | February 14th, 2006 at 4:40 pm
@pete: i think you’re using firefox, right? please read the note under help. this is a bug in the focushandling of firefox.
16. Joel Fiser | February 14th, 2006 at 4:53 pm
Nice work! Thanks for the STK - (Sharing The Knowledge)
Usability is the mountain (maybe it’s just a hill) Flash must now climb to move to the next level - being the dominant solution for creating websites from small personal sites to enterprise applications.
One question, if I may: how did you get javascript to talk with Flash? I know it’s happening here:
getSWF(?loader?).pushDeeplink (id);You’re calling a user-defined Flash function called ?pushDeeplink()? and passing it the id you want to load. Is there something in one of your included javascript utilities that facilitates this?
17. Administrator | February 14th, 2006 at 5:08 pm
@joel fiser:
In this case, I use Flash 8 Online Help
If you want to support Opera-Browser you should look at the Flash/Javascript Integration Kit: http://weblogs.macromedia.com/flashjavascript/. In the moment I found no solution to use FlashObject + Flash/Javascript Kit + HistoryKeeper togehter.
I have so many ideas to improve the usability of flash-sites, but sometimes it’s really hard to combine all the techniques…
Leave a Comment
Some HTML allowed:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
Trackback this post | Subscribe to the comments via RSS Feed