Hello to all. I needed to quickly remake my website so I used Sparkle. To view it on a mobile phone, one needs to turn the device horizontal. Works fine on iPad etc. I don’t mind this however, when viewing on iPhone, I would like to be able to enlarge the images (using my fingers), but I can’t. No doubt it is the way I created it, not knowing if there was a more proper way. My site: https://tizzonestudio.com/
I’ve looked through the documentation and am not clear as to best practices when not using a template. Should I have created a layout block, then within that block put the image and scrolling? I didn’t see a way to do that, but again, probably human error.
I want to keep my site looking as it does, I don’t mind having to turn an iPhone horizontal, only would like to be able to enlarge the images when on a small phone. If that is possible, please tell me how I should have set it up.
The other thing I would like if it is possible, but again, I couldn’t figure out how to do it: I would like a small column of text next to the images in the scrolling area that would hold info about each image. i.e. the client, what it was for etc. Right now, when I include any info about an image, it is on the jpg. It seemed at the time of creation, I couldn’t have a text box and an image box in the scrolling.
That’s why I only design a computer website, not any mobile website. I dislike not being able to zoom in. I just make images relatively large on my website, so it reads just as well on a computer as on a phone. And it saves tons of work.
From a Web Designer’s perspective the mobile portrait is an important part of a User’s website experience, and is one we all need to think out carefully as we have now close to 80% of Users using their mobile as the first-device in making contact with the web.
In Sparkle to initiate the Mobile Device (portrait) you need to go into the device icon in the Sparkle UI as per below, and select Portrait Smartphones by initiating Custom Layout…
When you select this Sparkle will generate your mobile device. When you select your mobile device screen you will see you will need to make text size adjustments (if you have implemented Font Styles this part is a breeze), and also adjust image size and canvas layout to accomodate mobile.
With my experience I am able to pinch enlarge images on a Sparkle mobile generated website.
Could I suggest with the text alongside your image…
I would have the text below your images as you are dealing with a 1 column stack for mobile.
@pinecone, you might have already gone over this but I thought to add it anyway…
On a side note… If you have a 17pt paragraph text on a desktop and you try to get mobile Users to read that on their phone, you will just lose your potential client. In todays’ world Users don’t enlarge a desktop website on mobile to read text… They just leave.
By not optimising your desktop for mobile nowadays, all major search engines drop you to the bottom of the search results. Search engines do not support websites that are not optimised for mobile!
Thanks for the replies but they aren’t really an answer to my question. I am happy with turning my site to horizontal on mobile. The only device that is somewhat problematic is the iPhone. I want to be able to enlarge the images by my fingers. I used Sparkle in 2016 to create an event site and was able to enlarge the photos when on mobile but I don’t recall how I did it then. @FlaminFig I appreciate your views re the importance of a typical mobile site and if my site was going to be highly visited, or for the masses, or trying to sell something, I would agree. The people going to my sites are in a certain niche and won’t mind turning their device horizontal. In fact, when I created the event site in 2016 and said it wasn’t ready due to not working properly on mobile, my viewers were the ones who told me, it works fine if they turn it horizontal. So, not everyone is put off by that and my site functions just fine that way. I only want to be able to enlarge the image so, I’ll keep experimenting. I’m sure there’s a way.
If I understand your request correctly, yes, it is possible to do this with Sparkle.
To zoom in on an image with Sparkle, you can use the “Zoom image in Lightbox” function. This allows you to display an enlarged version of the image in a pop-up window (lightbox) when the user clicks on it, and then they can further enlarge it using pinch-to-zoom. This option is available for both individual images and image galleries.
For an individual image:
Select your image.
In the sidebar, under the “Style” tab, scroll down to the “On Click” option.
Choose the “Zoom image in Lightbox” option from the dropdown menu.
For an image gallery:
Select your image gallery.
In the “Style” tab, you will also find the “Zoom image in Lightbox” option under the image description.
To display text linked to each image in an image gallery, this is located just above:
Select the image gallery.
Check the “Show Label” box.
A small box will appear where you can add the text you want.
And as @FlaminFig suggests, I highly recommend working on the mobile version of your site, even if it’s not meant for a large audience, as it will greatly improve the user experience for your visitors.
Sorry @pinecone, when you mentioned “I would like to be able to enlarge the images (using my fingers), but I can’t.” I thought you meant you could not enlarge the images with pinch/zoom.
