Am in the homestretch on laying out my e-commerce site and am now stuck on my Product Details page.
My preliminary design is to have a product image on the left of the page/container and to the right text describing the product (e.g. title, description, price, etc.)
I have created a sample that works okay for the desktop, but am unsure what to do for mobile when things get down to 320px screen width.
Attached are two screenshots that I got from Amazon.com.
My desktop design is similar, but I question if it is realistic to have the product image and the product text all on one line like Amazon does? This works okay on a desktop monitor, but I think it is unrealistic for a 414px width, let alone a 320px width.
Any thoughts on how to tackle this?
I am learning FlexBox and that seems like the way to go for responsive.
My only guess on coming up with something better than Amazon’s tiny image and text would be to either a.) have the product text slide below the image or b.) have the product image slide below the product text using FlexBox.
Thoughts?
Also, for responsive design, are you supposed to scale images as the screen display gets smaller or what?
But depending on your design and other factors the width could change. In this flexbox demo below I start out with the image at 50% width of the list item and the div fills the other 50%. That sets the image and text side by side.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox - Scaling Product Details</title>
<style>
h1 {text-align:center;}
ul.products {
display: flex;
flex-flow: row wrap;
justify-content: center;
max-width:1000px;
margin:0 auto;
padding:0;
list-style:none;
}
.products li {
display: flex;
flex: 1 1;
min-width: 380px;
max-width: 600px;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
border: 1px solid;
margin: 10px;
box-sizing: border-box;
}
.products li * {
margin: .5em;
box-sizing: inherit;
}
.products img {
width: 50%;
max-width: 350px; /*actual image width*/
height: auto; /* maintain aspect ratio*/
}
.products div {
flex: 1 1 50%;
}
.products h2 {
font-size:1.2em;
}
@media all and (max-width: 400px) {
.products, .products li {
flex-flow: row wrap;
flex: 0 0 100%;
min-width: auto;
}
.products img {width:100%;}
}
</style>
</head>
<body>
<h1>Flexbox - Scaling Product Details</h1>
<ul class="products">
<li>
<img src="http://via.placeholder.com/350x250" width="350" height="250" alt="">
<div>
<h2>Product Heading</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...</p>
</div>
</li>
<li>
<img src="http://via.placeholder.com/350x250" width="350" height="250" alt="">
<div>
<h2>Product Heading</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...</p>
</div>
</li>
<li>
<img src="http://via.placeholder.com/350x250" width="350" height="250" alt="">
<div>
<h2>Product Heading</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...</p>
</div>
</li>
<li>
<img src="http://via.placeholder.com/350x250" width="350" height="250" alt="">
<div>
<h2>Product Heading</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...</p>
</div>
</li>
<li>
<img src="http://via.placeholder.com/350x250" width="350" height="250" alt="">
<div>
<h2>Product Heading</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...</p>
</div>
</li>
<li>
<img src="http://via.placeholder.com/350x250" width="350" height="250" alt="">
<div>
<h2>Product Heading</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...</p>
</div>
</li>
</ul
</body>
</html>
Thanks for the response and sample. I’m getting ready for work, but will look at your code more later.
In the mean time, when the web page gets down to a smaller mobile size, do you think it is better to have the image come first or second?
Like in the product details page that I am attaching where in this case you are selling a book on Amazon, would you as an end-user rather see the text deatils of a book first and then see the book cover image second, or the other way around?
I am torn on this, since most people are visual and like images first, but then some people prefer to be able to read the text first.
In these examples, I feel like Amazon makes the text and image too small. If you download the attachments and then open them up in your computer and resize them so they are the same size as an iPhone - assuming you have one - then I think you’ll agree. (I couldn’t figure out how to take a screenshot and it automatically be the same size as the actual image I was capturing…)
So I am attaching these examples from Amazon as I was wondering if it would be better to stack the image and product description text on top of each other - like your media queries do @Ray.H?
Of course, then my concern is whether users will get annoyed because they have to scroll to see the image and the text? I guess that is the nature of the beast with mobile - you often cannot fit everything onto one smartphone screen, right? (Although Amazon sure seems to be trying that!!)
This comes down to personal preference. Obviously Amazon must be doing SOMETHING right based on the sheer volume of sales they do.
I visit amazon on mobile quite often and don’t agree with you. I find the font and image sizing to be appropriate. Granted you can’t easily pinch and zoom on those pages, but if I want to look at a choice closer, I’m going to go into the specific item which I would do so anyway since I always check reviews of the product and the seller.
Thanks for the reply. Sorry for my late response, but have been tied up with doctors visit and work the last few weeks.
My comments are probably biased since I never use mobile
However, after thinking about this more, I am starting to change my view.
I was planning on tackling this problem using something like @Ray.H posted above, where when you get to a smartphone, the product text would pop below the product image. I already had coded something similar a few weeks ago - thanks to help from @coothead - and I like how it looked.
But something occurred to me tonight… Would it be harder to browse a listing of products if the product image and product description were stacked on top of each other?
Normally when people view a list of things - whether that be a query, report, directory, product search results, etc - I think people expect things to be in rows, where each row represents a record / employee / transaction / product, right?
That being said, I created some mockups in LibreOffice with 3 different looks…
Look #1: Product Image and Product Description are side-by-side and equal width.
Look #2: Product Image and Product Description are side-by-side and the Product Image is maybe 33% wide and the Product Description is maybe 66% wide.
Look #3: Product Image and Product Description are stacked on top of each other.
Attached is a PDF of these three “looks”…
While option #3 gives you the most real estate for the Product Image and Product Description, if a person was thumbing throw a listing of say 20 products, I think it would be for people to keep track of what goes with what because you have to scroll so much. (Options #1 and #2 make it easier to link the Product Image and Product Description together since they are on a single row.)
What do you all think of these three samples?
Do you prefer one over another?
Is there one you like the most? Hate the most?
Do you think most people “drill down” into the Product Details page when scrolling through a listing of Products in the Product Catalog?
I’ll tell you the same thing I’ve told you before. It’s up to you.
For me, I’d choose the one that would cause my customers to scroll the least, which would mean either option one or two. I don’t necessarily see a benefit to the bigger product image. But that’s just me.
I don’t know what “most” people would do, but I do. I like to look at reviews from other people, and to look at previews (for books like yours), or close views of the products if it’s a physical product. Or to look at suggested “similar” products to see if there is something that meets my needs more.
I know my wife does. She was doing some “Secret Santa” shopping yesterday, and changed a purchase decision based on visiting the details page of a product she was shopping for. She was very interested in a product from the listing page (it looked like a great choice for what the kid wanted), but when she went to the details page, looked at the products closer, and read the reviews from those that bought the product, she went with another option.
Granted that was a physical product and not something like a book, but the reviews and the preview of the books would only be available on a details page.
After kicking things around this weekend, I am now thinking that options #1 or #2 are better than my option #3 because I think people expect a product to fill a single row in a listing and not look like a vertical column where the start and ending is unclear. (Looks like Amazon maybe knows more than I thought?!)
It is good that at least you and your wife like to drill-down to the Product Details page.
I have another thread where I was asking if people expect to see pricing info and an “Add to Cart” button in the Product Catalog, or if you are willing to wait and see those on the Product Details page.
Considering there was someone there with analytics data and experience to back up their position, I don’t think I’d have anything more insightful to add. Personal opinions don’t overshadow cold hard facts.
