An experiement to find out what’s the best way to load large amount of content to different browsers: Benchmark - W3C DOM vs. innerHTML
Seems like using innerHTML method is the way to go according to this experiment, but of course each of us will need to find out for ourselves.
How one sees things affects how one does things.
Therefore understanding how we see our role, as creative professionals, is essential.
I used to consider myself as web designer because I see my role as someone who designs web sites.
As we all know, in the early days of web design, web sites were basically just brochures on the screen. We borrowed a lot of conventions from graphic design.
Interactivity was not very important because it was very limited. We could only interact with the sites by clicking on links, images or fill out forms. Web sites were merely a digital “choose-your-own adventure” brochures. An electronic indexing medium (which is why the “home” page was named index.html).
Fast forward to present day. We have 2 big things in the web design world: AJAX and FLEX. Neither one of these are new technology. They’re just new ways of using existing technologies. One uses DHTML and the other uses Flash. Both use XML for data and work in similar fashion underneath the surface.
Why are these important?
Because they allow users to interact with computers in more ways than just clicking links. Interactions have to do with self-expression. The (relatively)new forms on interactions allow users to be more expressive which could potentially be used to create a meaningful inteactions between an entity (i.e. a brand represented by a web site) and its audience.
An important part of designing a web site is to make sure that it shows consistent look and feel. It needs to look and feel just like other manifestations of the brand that it carries.
Now that the form of interactions between user and digital media become more complex, consistent look is not enough to maintain the same feel of the brand.
For example, we have a web site targeted to sophisticated adults (i.e. Bose) that uses interaction models similar to Disney (bubbly, playful, hyperactive). The sophisticated look will feel Bose, but as the users interact with the site, they won’t feel like they’re interacting with Bose.
It’s like going on a date with a very classy lady who act like a 5 years old.
Going back to the first line of this entry, the role of web designers has evolved because web as a medium has evolved.
We do more than just translating brochures from paper to screen. We need to design how the site behave. Experience is the key word here. That’s what we design. Not only the look.
Another dating metaphor: going on a date with a gorgeous woman who curse you every five minutes creates an experience that you don’t want to remember.
A good experience encourages users to experience more (just like a second date). This is how a steady relationship is formed.
That is the key phrase that describes what will happen in the online world (and beyond as the various technologies converges).
In fact, it has begun. Consider the following:
This concept brings us to basic economy. The law of supply and demand. No matter how cool your site is, how pretty it looks or what technology you use, does it supply any demand? If there’s no demand for what your site supplies, it has no value for your “consumers”.
You can replace “site” with anything and this principle will still work.
Preloader is one of the most essential element in flash application that often gets overlooked. I have to admit that I’ve been guilty of this over and over again because I unconsciously consider it as a “nice-to-have” additional element to the application, not as part of the core functionality.
But the truth is, not having a preloader could be costly.
One of the principles of interactivity is that users need to get immediate feedback.
If they don’t get that, 2 things happen in their minds:
So if your user clicks on a button that’s supposed to load an element on your flash application and upon waiting for 2 seconds he sees nothing happening, he would start to get antsy. He might wait for another second or 2, after that he will start the 2 steps above and click on the button again.
Seeing a preloader immediately after clicking on the button confirms the user’s action. That is how the application says: “Yup, I heard you and I’m working on getting this thing to you.”
If you are new to this whole Flash development thing or have been creating preloaders from scratch, check out this MovieClipLoader tutorial from actionscript.org.
I found the following tutorial and property list from kirupa.com to be very helpful as I try to navigate through the nodes in my xml file to use the data in flash.
Here’s the link: Navigation Through Helpful XML Properties
I came across this list of resources for CSS, Photoshop and Flash at k3mist.com while browsing blogs.
Great resource, particularly for the CSS section.
While a lot of people associate AJAX with the cool javascript-based smooth transition effects on the UI, they are not the element that makes a web application an AJAX.
As explained in the article about AJAX that I posted on this blog not too long ago (AJAX 101), the one thing that is responsible for this cool thing is the xmlHTTPrequest object that allows a site to be loaded and updated piece-by-piece.
Here’s a good explanation on XMLHttpRequest object from Apple’s developer network.
One of the most important concepts that UI designers need to understand is the separation between data and presentation.
This is very important because, unlike the old days, there’s no way one person can do it all as the elements used in web applications become more complex.
As we all know, XML has become the most common currency for online transaction between different layers of web application. Needless to say, it is essential for web/UI designers to be able to connect XML to his/her presentation tools like flash.
If you are new to this, here’s a great tutorial and explanation on using XML with Flash from flash-mx.com