Suggestions on presenting images with mobile layout

[Shikkediel]

Hi all,

First of all best wishes for the new year. :-)

Next I was wondering to pick your thoughts on the way best to present a single page layout that only shows an image of a specific item. I have created one example but am considering if this is the right way to proceed with other pages.

What’s “different” about these pages is that the images are not secondary content but the main subject that people would actually want to read. So I have chosen to not let the image adapt to the size of the browser but instead to create overflow on the containing parent when the size exceeds that of the screen. Here’s one of those pages:

http://tamiyaweb.com/model/info/58001

Would this work for you on small screens or should I let the visitor zoom in themselves? I could also start serving a fully visible image (zoomed out) and create a button to go to 1:1, which would then set off the scrollbars. Lastly, keep it full width and let the user decide the scaling factor.

The Google mobile check doesn’t really like what I’ve done so far but that isn’t really the measure of things.

Thanks in advance for any input.

Edit – it’s not really an image there by the way but a nifty canvas created from an originally encrypted image, a cool script I bought from a coder with some serious skills… but that’s slightly besides the point.

[Chris Coyier]

Off the cuff… I would start zoomed out so people can see the whole thing, then have a very explicit button for zooming in like “See image at full size” which zooms in to a readable level. And ideally allow pinch/zooming/panning even without the button press.

[Shikkediel]

Thanks Chris, I appreciate you sharing your view on this. After letting it sink in, I was leaning towards it as well. Zoomed in from the start as it currently is, isn’t a great experience. And there’s a perfectly empty footer there for the button you mentioned.

Messing about with zoom levels and trying to adapt the page to that seems to be something that isn’t really achievable. Googling around, I haven’t found a way to reliably detect the zoom level. Sadly there’s no cross browser approach for that and somewhat of a hiatus in the spec. So I’ll leave the size of the (fixed) header and footer alone if the visitor decides to additionally pinch zoom the page. Even though the idea of being able to scale the canvas container only (and not the rest of the page) is appealing.

Thanks again. :-)

[Shikkediel]

Done as said. Mostly anyway, still working on some details. Not as straightforward an approach was possible as one could do with a simple image… because it’s actually an iframe.

But I think the solution ended up pretty neat – using transforms to make the element responsive. Which requires a bit of imagination to combine a scale with a translate and position/center the transformed iframe correctly. Calculated with JS but there’s nothing really there to see without it anyway.

Discovering something in the process I wasn’t at all aware of… if you do this, the translate will be 100 pixels as you’d expect:

transform: translateX(100px) scale(0.7);

But reversed the pixels will also be scaled!

transform: scale(0.7) translateX(100px);

So this will only translate 70 pixels…

o_O

Edit – I often forget to mark helpful answers but in this case it’ll be like telling Bolt he’s a pretty good runner.

[Shikkediel]

I think the next step will be this:

http://caniuse.com/#feat=object-fit

So that the JS can become a fallback. :-)

Side note, Firefox seems to round the transform more accurately (six decimals) when the translate is put last. It otherwise rounds at 0.25 pixel.

[Shikkediel]

Actually, scaling worked quite well and has just about the right browser support needed so the original code was a fine solution.

So the next step was to implement something similar on the other pages. Quite a bit easier, no iframe but a only a canvas and a basic width: 100% is enough there to make it responsive. But in another way slightly more complicated because there was already a button centered inside the footer to make the page scroll back to the top.

So I made the new button appear in the middle as well but transition it to the left when the one to scroll to the top fades in (when 200 pixels are scrolled). And back again to the center when it fades out.

Please let me know what you think about this UI. It will only appear below a screen that’s 800 pixels wide…

It also leads me to another question. The translation of the button back and forth only takes a second. Yet with Firefox, it seems to slightly adjust it’s position like three seconds later every so often (when nothing should be occurring anymore). It’s just a minor jump to the left… anyone happen to’ve seen this before?

tamiyaweb.com/data/parts/list/58094

[Shikkediel]

Just to be clear… below 800 pixels it present a “Show Full Size” button. When this one is clicked, it enlarges the image and and an icon is shown instead (to return to zoomed out view) that will translate to the left (and back) when the page has been scrolled more than 200 pixels. When it returns to the center, it makes this jitter with FF.

[Shikkediel]

Okay then… looks like it’s not there when I set the width of the button to an even number. So I suppose it’s some subpixel adjustment. The timing of it is very late and odd in any case. I’ll leave it as is for a little when so members can see the glitch for themselves.

Home made Inkscape icon by the way. :-)

[bearhead]

Given your constraints, I think what you have is probably the best solution possible….

I guess if you have a lot of free time on your hands you could re-write all of the text and tables, and then screen-cap the images out. But I don’t know what the copyright situation is with the content, so don’t do anything illegal ;)

[Shikkediel]

Thanks for the reply, I might indeed create a text database of it… a huge undertaking for which I will need more knowledge of SQL of first. That will make it better searchable too. The brand tends to not mind about showing the info as long as there’s no motive of profit behind it. And the images themselves are very well protected from reproduction as they aren’t really there, just a decrypted canvas with an obsfuscated file path to the original. Some of this older stuff is rare to find so I’m doing it for the hobbyists and code practice, which made me get interested in programming in the first place.

Cheers for taking the time to give some feedback. :-)

[Beverleyh]

Looks good! My only contribution is that maybe a pinch gesture could return it back to full screen, but other than that, I think it conveys its purpose very nicely.

[Shikkediel]

Thanks, sounds like a good suggestion. I’ll look into it. :-)

Just a few more pages to go and all of about 200 of them will have been brought into the modern era of responsiveness. That was a good two months of fiddling around.

Meanwhile I got distracted by the low Pagespeed score most of them are getting. Looks like they dropped since last time I checked. But I’m not the only site apparently, I think Google has been tinkering with the parameters. Render blocking links might be having more of an impact and many “prioritize visible content” remarks are popping up. Accidentally figuring out that this is likely because of using a lot of background images so I’m lowering requests by creating sprites. But I’m going off topic…

[Author]

Posts