I support a range of clients with existing websites, doing the odd update to amend a page, add a section or feature. Some of the HTML behind their sites is getting a little old compared to the current ideal of responsive design, where one page can re-format itself for display on phones, tablets and computers. However, budget restrictions mean they’re stuck where they are and need to make the best of what they have.

I recently helped one client, the Brighton hotel Cavalaire, who noticed the proportion of people visiting their website using iPads getting to be a good chunk of their traffic. Many of their main pages have Flash content, showing slideshows of photographs of their lovely rooms. When visiting the website on an iPad or iPhone (or now, on a recent Android phone) the areas with the slideshows would be blank, as the iPad (and similar) does not have Flash on it.

Ideally, we would replace the slideshow pictures with a similar slideshow animated using Javascript. Unfortunately, budgets were very tight and organising and creating the assets was a prohibitive cost, although something we’re planning for the future. Instead, we compromised on having a single image replace the Flash based slideshow. Now I just needed to work out how this would happen. I knew I’d used Flash detection code before, but when I found my code it was for using font replacement with sIFR. I started looking up solutions for detecting and replacing Flash content, then fortunately my brain kicked in.

Enter the old school

There always was a way of replacing Flash content with an image when adding Flash content to the page, all you have to do it add it within the <object> block of code, then the Flash content replaces it, if it can load. When Flash came out, dial up modems were the standard people connected to the internet, and some browsers and computers just couldn’t cope with running Flash, so within the way Flash content is called in to the page using HTML, there is a way of adding alternative content too.

Adobe have an official example, and my code is just like that, customised with the right sizes for the content in question:

<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ width=”632″ height=”289″ id=”home_rooms”>
<param name=”movie” value=”/home.swf” />
<!–[if !IE]>–>
<object type=”application/x-shockwave-flash” data=”/home.swf” width=”632″ height=”289″>
<!–<![endif]–>
<img src=”/images/noflash_home.jpg” width=”632″ height=”289″ alt=”Rooms in this Brighton hotel” title=”” />
<!–[if !IE]>–>
</object>
<!–<![endif]–>
</object>

Whatever is in the <img> tag is loaded if the Flash content cannot be loaded. Dead simple, easy to implement, and much better for the viewer than a big empty box. For some cases, this will be all that is needed, for this site, it’s a useful stop-gap.

This is a reminder to myself – when you’re looking for a fancy solution to something, remember to look and see if there’s a standard way of doing it built in already. It will save time, and generally all the browsers, whether mobile or desktop, will support it with no fanciness required.