Automatic Fallback Image for Unsupported Browsers?

Browser & Compatibility
1

Hi there!

In order to reduce file size I have removed support for IE6-9. I was wondering how you could automatically set a fallback/backup image (JPG/GIF) to display when an older or unsupported browser is detected?

My understanding is it is not required for Double-click as you upload the fallback image separately (?), however, some providers seem to require this to be done at the banner level and I can’t seem to find anyway to go about it here.

Would very much appreciate any assistance.

2

Does including IE6-9 support push your file size over a limit? If it doesn't, I would keep IE6-9 support in place and also use the fallback image.

What providers require this?

You can create a conditional CSS block that only runs on IE 'LT' / 'less than' version 10:

<!--[if lt IE 10]>
	<style>
#document_hype_container {display:none;}
#replacementimage {display:block;}
       </style>
<![endif]-->

And then above your Hype div, you would place:

<img src="fallbackimage.jpg" id="replacementimage" style="display:none;" width="400" height="600">

2 Likes
3

Hi Daniel, thank you so much for the reply. That method of fallback is clever, I didn’t think about doing it within the html file itself I was trying to achieve it within hype. I’ve done as you’ve suggested and kept i.e. 6-9 support in place and trimmed file size elsewhere.

From what I’ve read I can lose the PIE.htc to get it through Double-click understanding I’ll lose some transitions in the process.

Now just need to get “polite loading” figured out!

1 Like
4

Thank you for all your assistance Daniel. Very much appreciated you helping me work through all the questions.

1 Like
5

Hi.
Simple question: why don’t you make a clear feature/explanation in Hype’s UI so that we can choose a specific static image for non-compatible browsers? The documentation on static images is not clear on that. In other words, do we need absolutely to copy the code above and paste in the exported HTML each time?

6

Hype v4 has a feature called Poster Images will display a static image if JavaScript is not enabled on a visitor’s machine:

https://tumult.com/hype/documentation/#poster-images

I’ll make a note to consider using it as above if a user has manually disabled IE6-9 support, but it seems like if you care about those browsers it is better to keep support turned on :).