Posterous
Chris is using Posterous to post everything online. Shouldn't you?
Avatar2_thumb
Chris Korhonen
owns this site
4
subscribers
 

SourceBottle

Exploring the web of user experience design and web technologies

Flash, HTML5 & iPads

The iPad's release, and specifically the omission of support for Adobe Flash, has sparked a massive response from both the Flash and web standards communities.

Adobe and its development community are understandably miffed that Flash support has been omitted, pointing out the masses of sites around the web which rely on Flash to deliver a 'superior user experience'. 

Apple and the web standardista's are making the argument that Flash on a mobile device is a CPU hog, draining battery life and causing instability. HTML5 is being pushed as the solution - offering similar functionality in terms of delivering online video and vector animation.

Obviously its a topic which a lot of people feel strongly about and there is a lot of bias and misinformation floating about.

As a web developer who has spent considerable time working with both HTML and Flash, I can see both sides, but feel that in the end Flash is not going away anytime soon, and as others are proclaiming its snubbing by Apple is not going to be the final nail in the coffin.

There is certainly a stigma associated with Flash itself, for many reasons.

  • Especially around 2001-2006 there have been gross misuses of Flash as a technology. From website intro screens to superfluous visual effects, many people have came to despise Flash content.
  • Various (now patched) security vulnerabilities have led many software architects, primarily in the enterprise, to distrust the technology in general. 
  • The Flash Player is often seen as a CPU-hog, which consumes too many resources and is prone to crashing. This is perhaps more of a problem on Mac OS than Windows, where it is claimed that the most common cause of Safari crashing is the Flash plug-in.
  • Up until very recently Flash has been a closed source application, controlled by a single vendor, Adobe.

If we peel back the layers, most of the criticisms aimed at Flash are either unfair, or no longer valid. 

Over the past decade, developers have matured and we are seeing Flash frameworks emerge which use common architecture design patterns. Designers are also using Flash more as a tool to enhance the user experience rather than to provide superfluous  visual effects. Granted, you still have the odd developer/designer out there who throws user experience out of the window for the sake of some animated, flashing text but you get that with every interface technology.

Adobe is also committed to the security and stability of the Flash player, releasing regular updates and working with operating system and hardware vendors in order to optimize performance. Obviously this has to be a two-way street, and companies such as Apple need to be willing to work with Adobe if we are to see real improvements in stability and performance. From what I gather this is not the case. Adobe has also made an aggressive push to open-source various components of the Flash Platform, meaning developers are no longer locked into to a specific set of developer tools.

So what is Flash good for? Whilst it is used for many things, three stand out in particular:

  • Advertising. Someone had to say it. Whilst Flash adverts are often the bane of the web, from a design agency perspective it is the perfect medium. Designers can create advertisements for products incorporating animation and visual shine which are not possible with static images, compiled into a single SWF file which is guaranteed to look the same regardless of the browser or website where that advert is displayed. 
  • Video. Today flash is the most widely used player of h.264 video files in the world. Its ubiquity is what has led to the success of YouTube and sites like it. Not only does it play video, its actually quite good at it - offering functionality for streaming and interaction with a video feed. 
  • Applications. With mature frameworks like PureMVC and Flex, the Flash Platform offers a great environment for building rich web applications. You only need to take a look at the likes of Buzzword and Picnik to get a feel for what is possible. Much richer interaction than HTML web apps, with the added benefits of cross-browser consistency and a more integrated set of development tools.

With HTML5, I only see one item disappearing from this list. Let me explain.

So, HTML5 brings a number of great features into the mix for developers:

  • The video element, allowing video to be displayed within the browser without the need for plugins.
  • The canvas element, allowing for dynamic, scriptable rendering of bitmap images.
  • API's for drag and drop, cross document messaging, offline storage, browser history management and more.

As you may have gathered, a lot of these enhancements are geared towards those developing web apps, and this is where I can see HTML5 stealing market share from Adobe. 

If we consider online advertising, many people seem to think that the canvas tag, and to some extent CSS3, is going to replace Flash as a medium for delivering animated web content. 

 In reality, to replicate a simple animated Flash banner, you need a good chunk of CSS, JavaScript and separate image assets. On top of this you need additional JavaScript to make the canvas tag compatible with older versions of Internet Explorer and multiple implementations of certain visual/animation functions to ensure full cross-browser compatibility. And, you need to spend time sandboxing your code to ensure that it doesn't conflict with other CSS and JavaScript on the site where it is published. Even then, your HTML5 banner is likely not going to look right in a good deal of browsers. 

Compare it to the Flash workflow - you create your banner in within your favorite IDE, and its packaged up into a single file which you can distribute, upload to ad networks and more. Plus it will look the same across different platforms and browsers.

Creative agencies are simply not going to put the time into creating HTML5 content when the Flash player is so ubiquitous and where Flash is the creative format of choice for the hundreds of advertising networks and exchanges out there.

So Flash adverts, unfortunately, are here to stay.

The video tag is a lot more interesting - can it provide an alternative to Flash video? In an ideal world, yes, in reality, not for a while.

For a start, browser vendors can't seem to agree on which formats the video tag supports. For developers that means having to provide the same video in two formats - Ogg Theora for Firefox and MP4 for Chrome and Safari. Not ideal, especially when you factor in the additional costs of hosting additional copies of a video.

Secondly, whilst you can jury-rig much of HTML5's functionality into Internet Explorer, the video tag isn't on that list. This means that, if IE6 is any indication, developers will be forced to support Internet Explorer 7 & 8 for the next 8-10 years with an alternate means for displaying video. What is this alternate display technology? Flash of course!

Finally, working for a company which has invested a good chunk of time and resources into a customized Flash video player, rewriting it using HTML, CSS and JavaScript certainly isn't a top priority. Many video destination websites use additional functionality of the Flash player to provide other functionality which would be lost. Also, its worth considering how a HTML5 based video player can easily be embedded on other websites (newsflash: with difficulty!). Here we run into the same issues which also mean that Flash will remain the dominant format for advertising for the time being.

So whilst HTML5 video is a good idea, numerous reasons tend to make me think that Flash is still going to be the dominant formant for online video for many years to come.

As a developer, the challenges of ensuring compatibility and porting functionality just don't make it a viable prospect at the moment. Until these are addressed, Flash remains the technology of choice for me - I can use superior MP4 videos, and can write once and deploy anywhere.

So where does this leave the iPad and Apple's choice to exclude Adobe from the table?

I predict many application developers will move towards HTML5 rather than Flash - providing compatible versions of their applications. Will this hurt Adobe? Probably to some extent since they have sunk so much money into promoting Flash as a serious application development platform.

For content destinations such as YouTube, Vimeo and others, if they want iPhone/iPad users to consume their content then I would expect to see specific native applications - like what we already have for YouTube. Will this hurt Adobe? Not really.

Flash adverts will still be the bane of the web, developers will still use Flash for games and slideshows and restaurant menus. iPhone/iPad owners will still see lots of blue cubes.

Flash isn't going anywhere, though its usage may be shifting. 

Apple isn't going to change its mind, just look at their track record. This decision isn't going to impact sales significantly one way or another.

Posted January 31, 2010
// 1 Comment

iPad Applications I'm Looking Forward To

  • NetNewsWire

    My current RSS reader of choice. I love how it can sync what I have read between my desktop and mobile clients, however on an iPhone the limited screen real-estate makes it tricky to quickly scan posts. On an iPad, with the extra pixels, an RSS reader can really present an experience comparable to the desktop. Now if only we could queue up articles to read in background Safari tabs...

  • Instapaper

    Great for those moments during the day that you stumble across an interesting looking web page that you don't have time to read. I save it to Instapaper and either read it from the iPhone app or have it delivered to my Kindle. It has really changed the way I consume web content, and has increased my productivity ten-fold. Another app which would benefit from the larger screen.

  • Evernote

    Yet another great web-app with an iPhone app which is limited by the small screen size.

  • A good RTS game

    After seeing Warcraft 3 on a multi-touch screen I have a feeling this could be really cool.

Posted January 30, 2010
// 0 Comments

iPad Thoughts

Wednesday saw Apple introduce the iPad, their revolutionary new mobile computing device, designed to fill the gap between smartphone and laptop. All in all, I was fairly impressed by the device and will probably end up buying one - partly because I'm a gadget whore, and partly because I think it could actually live up to some of its promises.

Some of the features things were pretty much what I was expecting:

  • The form factor. When dealing with multi-touch computing, you are always dealing with a big sheet of glass. I do like the aluminum back - a very elegant and understated piece of design common across the unibody Macbook's and iMac's.
  • iPhone OS. Anyone who thought the iPad would be running a full blown version of Mac OS X must be sorely disappointed, but I think this move makes perfect sense - the tablet was never going to be the kind of device which replaces the desktop, but instead one which was good at a subset of its functionality. Having an OS designed around the multi-touch experience makes perfect sense.
  • The Apple A4 silicon. A given really after their acquisition of PA Semiconductors.
  • No Flash support. More on that in a future post.
  • iBookstore.

I have to admit, I was a bit surprised by some of the aspects of the device:

  • iPhone OS. Whilst I had no doubt that the iPad's operating system would be based on the same codebase as the iPhone, I was expecting a bit more. Whilst the apps looked very nice, especially the new versions of iWork, the Springboard and lockscreens looked very awkward when scaled up to a larger size. Apple seemingly has done nothing to help users manage their apps, and based on all the patents posted on Engadget and Gizmodo, I was really hoping to see some kind of new and sexy multi-touch gesturing system, and of course, multi-tasking would have been nice.
  • The price points.  I see why Apple did it, they wanted to keep costs down and price the base model at $499, but I was not expecting a separate 3G versions, especially with staggered release dates. Especially with the service being pay-as-you-go, anyone who jumps in early and gets the wifi version is an idiot. Okay, a bit strong, but they are missing out especially given the iPad is not upgradable later. I really would have thought that Apple would have found a way to have a single version. One thing to consider, which no-one seems to have been talking about is GPS - unless you have a 3G version, there is no location enabled niceness - a very useful feature and one which a great deal of app developers are embracing.
  • The camera (or lack thereof). Now before anyone says anything, no, I did not want to take pictures with my iPad! Instead I was hoping for a front facing camera for two reasons. First, video conferencing. iChat or Skype could have become the killer app for the iPad, turning it into a serious communication device. If a $249 netbook can incorporate a webcam, then why not the iPad? Video conferencing isn't exactly something which requires an expensive camera sensor - 1.3 megapixels would be fine, and they are cheap as chips. The second reason I was hoping for a camera was due to Apple's patent on switching user accounts based on facial recognition. As a device, the iPad is meant to sit on your coffee table and be used by multiple family members- unlike the iPhone which has a one-on-one relationship with its user. With the iPad there seems to be no way to offer user specific customizations or accounts. 

Across the internet, debates are raging wether its about the lack of Flash support, cameras or coffee making abilities. I have a few predictions for the future:

  • Apple were rushed to get the iPad ready for January 29th. Part of the reason why we are looking at iPhone OS 3.2 and not OS 4.0. Whilst the iPad will be released with 3.2, 4.0 will also be announced at the same time for a July release. This is where we will see enhancements to Springboard and multi-tasking.
  • AT&T will offer a subsidy on the iPad with a 2-year contract. This will bring the price of the 3G model down to something comparable with the wifi-only models.
  • We won't see any pre-launch hardware updates of any consequence. That means no camera this time round.
  • The iPad will change app development for the better. Companies such as OmniGroup have already re-prioritized their 2010 plans around 5 separate iPad apps because they see the value in the device - a large multi-touch screen opens up a lot of doors for both interaction and information density. We are going to see better apps, more complex and innovative apps, and many of the simplistic trivial, joke apps which pollute the app store will not survive the transition.

Filed under  //   ipad   iphone   mac  
Posted January 30, 2010
// 0 Comments

iPhone Home Screen Experiment: Days 2 & 3

Oddly, my iPhone homescreen still looks like it did on day one. With the exception of one companion application for a web app I'm evaluating, its still looking very bare with only Facebook, Tweetie 2, Foursquare and Maps.

This is really testament to the fact that whilst the App Store boasts over 140,000 applications, its actually really hard to produce something which has the stickiness factor which leads to regular usage. In each of these cases, they provide excellent interfaces to web apps which I am engaged with, optimized for the smartphone screen.

Whilst Steve Ballmer criticized the App Store, stating that it was more like a necessity in order to make up for a poor web browsing experience, I see it more of a genius move. On such a small device, even with the niceties of HTML5 and webkit's extensions to CSS3, it is still a very difficult task to produce an optimized UI; plus even if you do get it looking perfect, you still have to deal with the big killer - latency. Quite simply, apps are a huge part of the iPhone's success, offering developers the benefits of native device interaction and access to the various sensors on the device. 

If you pay attention to all of the good applications, you can see that not only do they embrace multi-touch interaction and gestures, but they pull in sensor data. Tweetie 2 has a user interface full of little touches which demonstrate this - you drag on a list to refresh it, swipe a list item to reveal a toolbox. Apps such as Foursquare and Maps are built around geo-location. Its very easy to see why they are sticky.

With the announcement of the iPad, you have to wonder how things will change. Suddenly we have a device capable of a much better web browsing experience - with a massive high-definition screen and a fast processor. Does this mean we will see a move away from applications and a shift towards websites optimized for the device? 

Building applications for the iPad is a far more daunting prospect than the iPhone, with more to think about in terms of interaction design. One has to wonder, with such a rich web experience, is this even necessary?

Posted January 27, 2010
// 0 Comments

Measuring the impact of the Twitter ecosystem

I found this fascinating look at the Twitter ecosystem today:

My point is this. You can talk about Twitter.com and then you can talk about the Twitter ecosystem. One is a web site. The other is a fundamental part of the Internet infrastructure. And the latter is 3-5x bigger than the former and that delta is likely to grow even larger. avc.com, A VC, Jan 2010

 

Twitter is a tricky one when it comes to measuring the reach of your campaigns. Tools such as Google Analytics offer a good insight as to the number of users who come in from Twitter.com but provide next to nothing on the users who come in from various non-browser Twitter clients, this figure is instead blended into your direct traffic.

Whilst URL shorteners and tracking parameters can still help close the gap, there are still many instances where you cannot close the tracking gap.

With expert insights suggesting that the traffic coming from these clients and the greater Twitter ecosystem is roughly 3-5 times that as you see coming from Twitter.com it really gives you something to think about as you consider your inbound traffic analysis.

Posted January 25, 2010
// 0 Comments

iPhone Home Screen Experiment: Day 1

Like many iPhone owners, I have far too many apps on my phone. Taking a leaf out of Patrick Rhones' book, I have embarked on a mission to slim down my home screen.

Yesterday I started by moving all the icons off the first screen, with the exception of the dock which I use regularly. As I find myself using an app multiple times during the day, I move it back.

The results after day one are fairly predictable. Foursquare, Facebook, Tweetie and Maps have made it back to the home screen. All apps which are part of my social periscope and see regular use. It will be interesting to see what happens tomorrow when I am back at work - will any productivity apps move to the front?

As well as yielding interesting insights into which iPhone apps have the most stickiness, experiments like this are also a reflection on the UI design of the iPhone as a whole. Whilst Springboard is a simple and effective way of launching apps it is painfully obvious that it does not scale. The success of the App Store is beyond Apple's wildest dreams, and having 100,000 apps at everyones fingertips is exposing this as a serious problem. 

I think its a given that iPhone OS 4.0, which will likely be previewed this coming Wednesday, will attempt to address this with either a totally redesigned springboard or at the very least some UI enhancements. 

Lets consider what Apple's engineers can do to improve things:

  • Folders. An obvious one, with so many apps some form of grouping would be entirely logical. As a user, a way to organize all apps of a similar type, such as games, into a folder would be invaluable. Several solutions to this exist in the Jailbreak community, though so far they have all been lacking - missing the sexy UI touches for navigation and management which we could hope to expect from Apple.
  • Stacks. Introduced in Leopard, Stacks have been fairly interesting in terms of UI - proving themselves great for showing small collections of items such as recent downloads, but falling down to some extent when navigating larger sets. I can see this metaphor working well on the iPhone, with icons erupting from the dock, perhaps showing popular applications or those with active notifications.
  • Magic Pages. Apple could try and replicate this very experiment, and also borrow from the folders concept - creating home screen pages which automatically show the most popular applications, or specific categories. After all, why rely on the user to organize their collections when the software can add a little helping hand.

I'm sure there are a lot more directions to go and I'll post more as I post updates on my home screen experiment. If you have any thoughts, why not leave a comment ?

 

Posted January 24, 2010
// 0 Comments

Emerging Techniques Every Web Developer Should Know – woorkup.com

via woorkup.com

A great look at some of the emerging techniques on the web - some of which are enabled by HTML5 such as offline application storage, others such as oAuth and oEmbed which represent standards being developed by developers, for developers.

Its fairly easy to really start gushing when compiling a list like this, but what I like is that it is feasible to begin implementing these techniques right now. We are starting to see HTML5 support in Webkit and Mozilla based browsers, and it is really a serious option especially when creating mobile web applications. oAuth is becoming a de facto authentication standard, and oEmbed is really starting to generate traction with YouTube implementing it and Wordpress 2.9 consuming.

Exciting times ahead!

Filed under  //   web  
Posted January 16, 2010
// 0 Comments

2009, another year gone

This past year has probably been one of the most interesting in my professional career. 

A year ago I joined the team at Animoto, leaving the world of corporate American behind me. I had spent the past five years working for American Express, developing web applications and driving their online strategy. The opportunity to work on such high profile web sites and applications, visited by over a million people each day, made all the internal politics worthwhile! It really helped me develop from an occasional web developer to a professional, crossing disciplines and along the way I learned a great deal.  I don't know if it was itchy feet or the chance to really own the development of a product end-to-end, but I decided it was time to move on.

Over the past year, it has been refreshing - moving to a much smaller and agile company, getting the chance to see the direct impact of my work. I'm honored to have the opportunity to work with such a talented team on such an innovative product. 

Looking beyond my own employment, the technology arena has also changed dramatically in 2009. I feel as though the building blocks of web apps have finally matured and the pains of the browser-wars are fading. 

On the Javascript side of things, jQuery has seen numerous refinements and optimizations, making it the framework of choice for many. Atlas has raised its head, offering developers a promising environment for creating Cappuccino based web applications. Across the major browsers, JavaScript performance has also significantly improved.

On the CSS side, more and more of the CSS3 spec have been implemented by Mozilla, Webkit and Microsoft. Finally, it is becoming a viable option to use border-radius, box-shadow, RGBA opacity. For developers and designers this potentially can streamline the workflow, and making rich-HTML prototyping much more attractive.

IE6's market share has also diminished significantly with browsers such as Firefox and Chrome gaining market share, and Microsoft pro-actively pushing IE7 and IE8 on users. For developers, this is really starting to change the levels of browser support we offer. Since the red-headed step-child is finally in the minority, progressive enhancement is a much more acceptable option.

Whilst I don't think anything game changing has yet emerged, these are the perfect building blocks for the web of 2010, and it will be exciting to see where enterprising developers take this. Already there are rumors of the iSlate/iTablet/iProd redefining the mobility computing space, I tend to think that whilst 2009 was the year of software maturity, 2010 will be the year of hardware maturity.

 

Posted January 3, 2010
// 0 Comments

Moving to Posterous

Long time no post! Here it is, the annual post where I announce that the future is all bright and sunny, and that I intend to post more often, covering a range of topics from getting the most out of CSS3 to the pro's and con's of specific user interface design patterns. We'll see how that turns out!

I have taken the opportunity to move this blog over to Posterous, for a number of reasons. The first being that in using the service over the year for other blogging projects, it has always managed to impress me, and as a publishing platform it has matured significantly. The second, and perhaps most important reason is that it shifts the focus back towards content - I'm no longer dealing with my own Wordpress install and the overhead that adds, instead I can post content from anywhere. Hopefully this is the kind of thing which will encourage me to write more.

I have to say, the migration itself appears to have gone smoothly - importing all of my old posts in a few minutes. A bit of theme tweaking and everything should be good. 

Posted January 3, 2010
// 0 Comments

New Beginnings

For the past four-and-a-half years I have been deeply entrenched in corporate life - working for American Express several different roles. When I joined the company I started as a programmer developing intranet dashboards and web applications with J2EE, before moving on to focus on the front-end user experience of users on the companies website. This led to my involvement in usability testing, front-end design and build which saw excellent improvements in both satisfaction and conversion rates of various online processes and applications. Over the past year, I have also had the opportunity to really focus on the design and creative strategy for American Express's online presence, as well as working to optimize what we have.

The corporate life has been fun, giving me the opportunity to make an impact and learn a variety of skills which I'm sure will continue to be useful; however I've decided to actually take the leap and http://startup.partnerup.com/2007/11/01/leaving-corporate-america-for-a-startup/

Posted January 25, 2009
// 0 Comments