I'm updating our website, and have built this pretty sweet (I think) Lightbox composition, with one HUGE flaw... I can't seem to position/anchor the actual show where I want it to lay. If I click on the "Stacked" view option, it sits in the appropriate spot, however the Next and Previous buttons show up without the show being activated (however the Close button does not). I'm guessing I've just been playing with the set up for too long and I'm missing an obvious solution (Though I have also clicked "Hide all initially" for all elements of the composition).
This link shows the issue, where on click, the show is in the right position, but the Next/Previous navigation shows up on top of everything:
The page does take a few seconds to load... so as a sidenote, I'd also like to include a "Loading" progress bar... any ideas for that would be super helpful as well.
The total amount of data downloading for this page is huge, probably in the neighborhood of 100Mb. The primary cause of that is the heavy use of GIF images. GIF should generally be your last choice for an image file.
First Choice JPEG
For any image with mostly photographic content and that's an opaque rectangle, JPEG is the first choice. There are many GIF images on this page that would be 1/100th their current size (or less) as a JPEG with no reduction in the resolution of the image or detectable reduction in image quality.
Second Choice PNG
Browsers don't support transparency within JPEG images. Therefore any image that is not an opaque rectangle cannot be JPEG. (For example the masked beer mug image on this page is appropriately PNG format.)
PNG may also be the better choice for a graphic that contains areas of solid color and hard edges between colors (typical of line art, computer drawn boxes, lines, etc.). It's really a decision each site creator needs to make and consider for each image. For some graphics some people will be quick to notice a smudge or fuziness to what was a hard edge that may be introduced by JPEG compression. For others the download speed benefits outweigh the slight fuziness or for there specific graphics the effect isn't noticeable. In still other cases for a graphic that's entirely computer drawn art the compression in PNG may result in a file that's significantly smaller than the equivalent JPEG.
Third Choice GIF
For small animated graphics, GIF is a viable choice.
As for the lightbox position and appearance of the next/prevoius buttons, there is no direct support for what you're attempting to achieve.
A lightbox is always centered within the browser view. (Or more precisely, the boundary box of the slideshow that's display and manipulable in Muse Design view, is always centered in the browser window.)
For modes other than lightbox, the next/previous button are always shown. I've noted that it would make sense to add an option to control this behavior in a future Muse release.
Thanks Zak. I fully understand the image selections for web, and the number of GIF's is largely accountable to animations requested to showcase different work. I've run across an Adobe Flash tutorial for a loading page which should provide at least a modicum of relief from the chunky loading time. Since this particular page is showcasing a breadth and depth of work, the GIFs are unavoidable (unless I'm packing multiple automated lightboxes into each other - which I would assume will be even more chunky and glitchy). Where possible, I have used .jpg and .png images. I've noticed the centering of the Lightbox, and was mainly looking for a solution to give the show an absolute position but we've since settled on dealing with it as is. I appreciate your time.
I don't think this page will be well received with the GIFs. 100Mb of data is 1/3 of some $20/month cell phone data plans. Average broadband speeds in the US are around 9Mbps. That equates to about 120 seconds to download this data. Data rates in Europe and the central US tend to be lower than that, so for many it would take even longer. 4G/LTE data rates are comparable, but many are still on slower technologies and thus the download time would be even longer.
An example from the page is "6-4-work-print-tobacco-associates-ads.gif." It contains 5 unique images, but because of how GIF animation is handled the file contains 85 unique images and is 15.9 Mb. If you take the 5 unique images and save them as medium quality JPEG the combined 5 are roughly 333k. Roughly 1/50th the original size and download time.
You don't need or want to use Flash. If you did find a Flash-based solution, it could address the image size issue, but it wouldn't work on iOS devices.
If rather than placing a .gif image into each composition widget target container you put a Slideshow widget (with caption, next, previous, etc. turned off, autoplay on and a fade transition) for most of the GIFs you'd have nearly identical behavior at a very small fraction of the download cost. A couple differences that may or may not matter. On a touch device the visitor will be able to swipe through the images (unless swipe is specifically turned off) and autoplay in Muse loops, so the transitioning to the next image will wrap back around to the first image and continue.
As you note, for GIFs like the banner ad the animation is not a simple fade between two images, so a GIF is the easiest solution there (though Edge Animate could be used to create that style of animation with less data download).
so embedding light shows within individual frames would resolve the issue with quicker downloads without excessive glitches? Essentially setting an autoplay for each? At this point, this is strictly desktop...
80% of execs are starting their purchasing decisions on mobile... so I'm definitely open to suggestions... though the layout and functionality for mobile will be drastically different.
also, *notably*, 100MB is 1/10th of smaller ($20) data plans... not 1/3... at least with 1 GB of coverage... which is the minimum for Verizon. Just for harhars. I'm also curious about Edge Animate... I'll have to look into that because we've been doing all of our animated GIFs through Photoshop. Learning curve this year has been sharp.
Yes. Composition Lightbox with an autoplay slideshow in each target container.
FWIW, the minimum data plan on AT&T is 300Mb for $20/month.
Edge Animate could be used to create an animation that uses HTML5/CSS3 transition effects. The result works well on modern browsers (including iOS devices) and would be a much smaller download than a GIF, but the effects may not work on older browsers which in some cases will include IE8, which still has double digit market share last I checked.
also... I believe last time I looked, IE only accounted for 27% of browser hits... For some reason 18% is sticking in my head... but I think that's too low. Out of curiosity, do you see anything else with the site that can be optimized? I still have to add image tags, but I think I've covered my bases elsewhere. Will gladly send you the preview link privately for feedback. (It's 100% Muse).