There’s a lot of talk about responsive design, which is an important part of moving websites into the current era of mobile browsing. However, it’s important to look at your current situation before assuming that a brand new responsive layout is the immediate way to go. It may be possible and desirable to take an intermediate step of simply replacing old Flash content with HTML5 compatible content rather than gutting the whole thing and starting from scratch. We’ve done this now with three of our older sites, georgesteinmetz.com, edkashi.com and debbybrown.com.

For George’s site, it was fairly easy: the site was already HTML based, so we only needed to add a non-Flash fallback gallery viewer, which is displayed for users with no Flash (i.e. all iPhone, iPad and iPod touch users, as well as most sensible Android users). We enhanced the experience with some touchscreen gesture controls, and voila! Significantly upgraded experience for users.

Ed’s site was a bit more challenging. The whole thing was Flash based, from back in the days when you could justifiably say that making an entirely Flash based website wasn’t a terrible idea, all things considered. The site had an HTML backbone for search friendliness, but the whole user experience was dictated by the Flash interface. To handle creating a mobile experience for that site, we relied on customizing a jquery mobile setup. jquery mobile detects a user’s device and forwards the user to a separate mobile version of the site if it meets the criteria of a “mobile” device.

Debby Brown’s site was an interesting problem to work with. The homepage relied on 10 independent Flash galleries that had to be re-built in HTML5, CSS3 and javascript. Additionally, the internal galleries within the site also needed to be rebuilt similarly. Much of the site was HTML already though, which made it relatively easy to get up to speed for mobile browsing, but the number of Flash components that needed to be retooled added to the difficulty. Also, the sheer number of images being loaded by the home page made it sluggish initially. We tweaked the performance by adding a “lazy loading” function to make it so that the slides were only loaded as needed, reducing the initial number of HTTP requests¬†needed to load the page.