Category Archives: Clients

Offering a Flash alternative for iPad & iPhone on old websites

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.

Recently completed: website for Nicklin Builders

This has been ‘soft launched’ for a while, but now all of the content has been uploaded so I can show it to people – the new website for Nicklin Builders.

They’re a firm of builders based in Lancing who do work all across Sussex. They live opposite my parents and have done work on their house, and I’m happy to both show their website and also recommend their work.

The excellent design work was by Megan Sayers, who worked with a very poor brief – they needed something good looking which would also fit in with the printed stationery they’ve been using for years. Megan subtly updated their logo, and designed around the limitations of their printed material while still giving the website a great look. She also had to work around the content area being updatable by the client, so it could be any length and contain one or many images. I’m very happy with the work Megan did, and so are Steve and Harry, the clients.

The HTML is built in HTML5, using HTML5Boilerplate to kickstart the code and get Javascript which helps Internet Explorer understand the more modern tags being used. There isn’t any whizzy interactive stuff on the site, so it could have been built with HTML4 quite happily.

So they could update the site themselves, I installed Perch which has a friendly interface, especially if you’ve not done such things in the past. Being a site for a family friend, the job was on a tight budget and Perch offered an excellent way to get a well tested content management system without having to spend long on integrating it in to the HTML of the website.

The only problem I hit in the project was Perch’s Gallery plugin breaking. Some poking around revealed this was caused by mistakenly selecting a directory to upload when selecting a large number of images to put in to the gallery. A quick fix was to just wipe the gallery database table and re-upload the images as that process is so simple.

If you live in Sussex and need a builder, please give Nicklin a call. They’ll come and give you a free quote and can explain what they can do and what they’ve done before. They’ve been going for over forty years, so they know their stuff.