The Artifacts of Design

In my last post, I introduced the single-page application, a more sophisticated alternative to developing complex Web applications. Now I would like to go through and talk a bit about what it takes to design such an application.

First, an important point of clarification: “design” is not just about the visuals. Design is about developing the complete experience; decisions on system architecture, database structure, and integration points between systems all are as much about design as the look and feel. In addition, how the site or application looks is also only a small part of the design; as important are the decisions that go into the interactions between the person using the application and the application.

The Single Page Application

The Web, as you undoubtedly are aware, was brought into being as a means of linking information. Fundamentally, the vision consisted of connecting individual “pages” of content, with the relationships between pages structured through the use of the hyperlink to allow navigation between pages of related content. Later, we introduced forms into the mix along with the idea of creating online applications. These applications continued to use the concept of pages, since that was how the Web worked. In an online application, the customer performs an action by clicking on a button or a link, a message is sent to the hosting server, and in response a new “page” is sent back and shown to the customer, updated to reflect the action taken.

Creating the Customer Experience

After a long period of inactivity on this blog, it’s time to resurrect things here. With 15 years+ of experience creating various online applications with IBM Interactive Experience, I’ve amassed a few tidbits of knowledge that I think will be useful to others interested in Web development and architecture, so I’m planning a series of posts that dive into many issues faced by those who create online interactive experiences. Each week or so, I will go over one topic that I think will be of interest, diving into such topics as developing a browser application as part of a team; prototyping, structuring JavaScript classes, and re-factoring will all be covered. These articles are intended to be technical, going into detail with code and examples. To start things off though, lets look at customer experience at a higher level, before descending into the details in subsequent articles.

Addressing Android Fragmentation

A link from the folks who make the OpenSignalMaps app for Android has been making the rounds in the last couple of days. In the article, they reveal that they have been analyzing the Android devices that have been using their app and have counted 3,997 different Android variants of model, brand, Android version, and screen size. You can imagine the headache that causes for application testers and for mobile Web developers.

Android Fragmentation Infographic

I see a number of reasons for this plethora of Android variants:

Josh Clark: Nielsen Wrong on Mobile

I just read a great article by Josh Clark critiquing Jacob Nielsen’s stance on mobile Web sites. The idea is that a large number of people use their phone as their primary way of accessing the Web. By dumbing down the mobile site, removing content, and making it hard to find that content on the full site, we are making their lives harder, not easier. He also made a strong point about how the same content viewed on different devices should have the same URL, and I think I’m coming over to agree with that point of view.

Eric Raymond – Don’t Tread on Me

I love this letter from Eric Raymond to Chris Dodd, CEO of the Motion Picture Association of America. It sums up nicely the way I feel about how lobbyists and legislators are attempting to trample on citizens’ rights through dubious claims and ill-advised legislation. Between draconian punishments for copyright infringers, the attempt to enforce DRM through “trusted computing”, and the attempt to snoop on citizens’ communications without warrants, the ideals upon which not just the Internet but our IT industry as a whole were created are being trampled. Please don’t let them win.

Google’s Swiffy Helps Convert 10 Year Old Flash Content to HTML5

Google recently made available Swiffy, a tool for converting Flash content to run in a browser without the Flash Player plug-in. The goal is to make Flash content available on modern browsers without a plug-in. Adobe has a very similar tool called Wallaby.

Does that sound good? Well, in theory yes, but pretty much all the chatter I’ve heard so far about this tool omits some critical details:

Story of a Pitched Battle With a Massive IE/Flash Memory Leak

This is a short(ish) story of an epic battle between a team of web application developers and IE 7. We were developing a pretty large IE-only application that used a few Flex-based components to provide data visualization capabilities. We were making good progress until well into the testing cycle, when one of the testers came back with a report of IE crashing on a regular basis while using the Flex components. Uh-oh.

I took a closer look at the issue and initially was not able to replicate the issue. The tester sent me some screenshots showing more details of the crash, including a screenshot showing memory usage. System memory was high, but not outrageous. Still, I suspected a memory leak.

The XHTML2 vs HTML5 war is finally over

It appears that the long time battle between XHTML2 and HTML5 has come to a conclusion, and HTML5 has won. Actually, HTML5 has been ahead for some time, but the w3c finally officially announced the ending of XHTML2 standards development. For a good introduction to the issue, take a look at Wired’s overview of the announcement.

Adobe previews Thermo for creating RIAs

Adobe today introduced a new tool called Thermo. I recommend that you take a look at their demo.

From what I see, Thermo is a tool that helps to integrate the visual design process in more tightly with creating Flash/Flex-based Rich Internet Applications. If you take a look at the demo, you will see how it can import artwork and use that as a template for creating a Flex-based application. From what I see of this application, this is really what the visual design feature of Flex Builder really should have been, and this also looks to be very suitable for quick semi-functional prototypes. The workflow looks like it will work well as well: Visual designers can use Thermo to start off the application, then Web developers can work with the same project in Flex Builder to add in the structure, additional functionality, and server integration.