Does anybody know if @Elixir’s Reveal Pro stack works on tablet sized screens? I know - as per the https://foundry.elixirgraphics.com/documentation/reveal-pro/ - that it is deliberately set not to work on mobile screens but I do not see anything to that tune about tablet screens.
In preview mode it works on all screens, even on the mobile sized ones. And, after publishing it works quite nicely on my desktop sized screens, but not on the tablet sized ones. The content that should be ‘revealed’ is simply already sitting there: no animations happen.
I have tried to get it to work by changing animation type, as well as the delay and duration settings and both with ‘contain animation’ on and off. All that did not help.
I work in Foundry - also written by @Elixer, of course.
The URL is: World Choose | Stinger. The animations are supposed to work right under ‘choice 1’, ‘choice 2’, and ‘choice 3’.
Any input is welcome. Thanks!
Jim
Here is a screenshot of the stack settings I used last…
Seems to be working here for me on the iPad. You seem to have some pretty long delays though. I’m away from my desk since it is Saturday, so I can’t look at the code right now to see what you have it set to, but I’d shorten those delays.
Reveal Pro seems to work on my iPad. But your site loads very slow. Even your top banner takes a while to show the image. Could it be your images are too large? That may cause the delay in loading, rather than the Reveal Pro settings.
Your top banner image should be between 200 and 300 k. The images you’ve put in columns can be reduced to a width of 400 px or less.
If you would allow me please… Do you use separate images for different screen sizes? If so, what kind of dimensions would you recommend for banner images and regular visuals? Thanks!
Hi @Jimmy , for a top banner I use a width of 1260 px, 1400 px max. The height depends on your settings. For a full screen visual I use 1720 x 1300 px. Those work for desktop, tablet and mobile devices.
If I’m using images in columns, let’s say 3 columns, then I let the size depend on the width of the container. Some sites use 960 px width, others use 1400 px. Just divide this to factor 3 (3 columns) and for a 960 px container a visual of 320 px width is more than sufficient.
I use photoshop/save for web to compress my images. But you can use Preview (comes with OSX) as well. Tools/Adjust size. - File/Export to give the jpg compression.
The human eye is forgiving, so you can set a quality of 60. I sometimes go to 30, depending on the complexity of the image.
The idea is to speed up loading times by using images as light as possible.
@Jimmy , one can compress a jpg file with a Maximum quality (100% of the digital information), Very High quality (80% info), High quality (60%), Medium quality (30%) or a Low quality (10%). So, depending on your choice you will have a jpg wich still contains all pixels (Maximum quality) or with a lot less pixels but a higher compression resulting in an image of only a few Kb. The trick is to compress your image as much you can but still have something that is visually good.
Don’t hesitate to go for High quality (60%) or less (50%). I have often very good results with this setting. In Photoshop one can visually compare the different settings before saving. In Preview it’ll be more trial and error I’m afraid.
You might also consider a smart piece of software, called Squash
Hans
ps. As for pixels per inch, you use a screen resolution for websites (72 dpi is the norm).
