Responsive Layouts & Logo animation fallback options for when the animation doesn't appear


#1

Hi, I recently created my first animation with Hype and it turned out great, but I really need some help because it’s an animation of my logo and if it doesn’t work then my website will have no logo. The animation is displayed in the header section of my website where most logos go. I created several responsive layouts so as you resize the browser window, the logo animation will resize. The largest layout I created is the 1200px and above. I have a macbook pro and a regular mac. When I test it on my macbook pro it looks great, but on my mac, which is a much larger monitor (approximately 1295 px width) the logo animation doesn’t show up. Also, it doesn’t show up on my iPhone 5s either, even though I created a layout for the iPhone. I have two questions:

  1. My first question is why didn’t it show up on the larger monitor and iPhone when I created a 1200px and above layout and an iPhone layout? By the way, I tried it in Safari and Chrome on my laptop and it worked, but using the same Safari and Chrome on the regular Mac, does not.

  2. My second concern and question is what are my options for when the logo animation doesn’t appear at all due to browser incompatibility? I cannot have my website display without a logo. That would look really bad. Is there anyway I can show a png of my logo if it doesn’t show up? If so, how could I do this? I hope it’s easy. When I created my Hype animation, I used png files rather than svgs.

Thank you!


#2

Can you share your Tumult Hype document? We’re happy to help out.

re: #2, it is possible to create a fallback for browsers that don’t support JavaScript (there aren’t many) by following these instructions: http://www.w3schools.com/tags/tag_noscript.asp ( You can place an image tag directly in the area where the text ‘Your browser does not support JavaScript!’ appears.


#3

The Hype documentation says,

Responsive layouts make it easy to make your document look great on every size screen. Hype allows you to create multiple layouts for a single scene which are shown at specific breakpoints. When displayed in a browser Hype will dynamically load the correct layout based on the current width your document is displayed at.

Creating New Layouts

There are two ways to create new layouts:

Reveal the layout selector by clicking the Layouts toolbar button and then click the Plus button in the layout selector’s header.
Click the Add New Layout button in the Scene inspector’s Responsive Layout section.

I followed the instructions and created several layouts including iPhone, iPad, and browser width greater than 1200px. My animation is only showing up on the original layout. My logo animation is not showing up on the iPhone, iPad, and the large browser. Aren’t the other layouts supposed to show up automatically? Why aren’t they showing up? Am I supposed to do anything else besides creating the layouts to make them show up in the appropriate browsers? Please help! Thank you.


#4

Hi Daniel,

Thanks for answering #2. I will try it. Regarding the first issue with the responsive layouts, how do I share my document? Is there another way, such as providing me with detailed instructions so I can just see if I followed it correctly and/or am missing anything? I am funny about sending my personal work over the internet. I hope you understand.


#6

Feel free to send us an email or PM me. Totally understand!


#8

Ok. How do I send a PM? Will you also send me step by step instructions on how to create the responsive layouts. It doesn’t have to be super detailed. I just want to make sure I didn’t miss anything. This would be a great help! Thank you.