I've used a fluid / liquid design so mobile and desktop should work equally well, with image sizes scaling to suit the size of display your visitor uses.
To help show this, you'll see below how each of the four available templates behave both when the available space is 600 pixels wide and when it's 350 pixels wide.
The double-lined border shows the extent of the template output in those restricted spaces.
Because of the Blogger template I'm using (in common with many others who'll be using this tool), all images have a border placed round them. I've made sure the templates work when this happens.
See this short screen recording showing how each template behaves as the width available changes:
Template 1 shown when available space is 600 pixels wide
Titles of products aren't shown with this template. The caption is in html normal sized text.
My Long Set Caption extends to here
Template 1 shown when available space is 350 pixels wide
My Long Set Caption extends to here
Template 2 shown when available space is 600 pixels wide
Same as Template 1 but with product titles shown under the caption.The caption is in html normal sized text, the product title in html small text.
Template 2 shown when available space is 350 pixels wide
Template 3 shown when available space is 600 pixels wide
This template shows the first of the four products much larger and shifted to the right. Its title is in normal text, the other three in html small text. The caption is set to the html H1 tag and is intended to act as a heading to any text that follows.If the Blogger template wasn't adding a border image to each, this template and the next (4) would show the three smaller images arranged in a line rather than two in a line with the third below in the center.
Black and White Cow Print Pattern. Stretched Canvas Print | Tan Peach Pink Quatrefoil Monogram Sleeves For iPads | Aqua and Black Peacock Messenger Bags
My Long Set Caption extends all the way to here
Template 3 shown when available space is 350 pixels wide
Black and White Cow Print Pattern. Stretched Canvas Print | Tan Peach Pink Quatrefoil Monogram Sleeves For iPads | Aqua and Black Peacock Messenger Bags
My Long Set Caption extends all the way to here
Template 4 shown when available space is 600 pixels wide
Same as Template 3 but with the first of the four products shifted to the left.
Mint Green Zigzag Chevron Stripes. Gallery Wrapped Canvas | Aztec inspired pattern iPad sleeve | Trendy Gray Mint Chevron Deer Monogram Messenger Bag
My Long Set Caption extends all the way to here
Template 4 shown when available space is 350 pixels wide
Mint Green Zigzag Chevron Stripes. Gallery Wrapped Canvas | Aztec inspired pattern iPad sleeve | Trendy Gray Mint Chevron Deer Monogram Messenger Bag
My Long Set Caption extends all the way to here
Template 5 shown when available space is 600 pixels wide
Two up, two down. The caption is in html normal sized text, with all product titles in html small text.
My Long Set Caption extends all the way to here
Template 5 shown when available space is 350 pixels wide
My Long Set Caption extends all the way to here
I'd love to get your feedback on these templates or new ones you'd like to propose (and code for!) - in the comments, please :)
No comments:
Post a Comment
Comment moderation is switched on. Please wait till I've had a chance to review your comment and publish it. Thanks!