Forum Moderators: phranque

Message Too Old, No Replies

Design thoughts for a classified page

         

csdude55

11:36 pm on Mar 28, 2018 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I have a classifieds section with several categories, and they all have the same general layout:

TITLE
______________________________________

Price | ________________________
_______ | | |
| | Image |
Contact Info | | |
_______ | |________________________|
|
Description |


I hope my little ASCII art comes through... if not, I have a title, then two columns where the left column has Price, Contact Info, and Description, while the right column has an image. On mobile, the image is shifted to the top, then Price / Contact / Description is beneath it.

There are two things I don't like about this layout, though, and I'm not sure how to handle them.

1. Some people post a lengthy description, but the width of that column is only 300px so I end up with a long, narrow column. I've thought about letting it wrap around the image, but then sometimes people will post a shorter image and a lot of details in the Contact Info, so I could potentially end up with something like a physical address wrapping around the image in a weird way.

2. Sometimes people don't post an image at all (which makes sense if they're announcing a yard sale or job offer), which means that the details section (like Contact Info) might end up being 600px wide and looking weird.

Or they might not put a picture and only a short Description (not uncommon with mobile users), so I end up with a big page with 3 or 4 words on it, which also looks weird.


I've thought about plugging in a "No Photo" placeholder if there's no image, which solves the second problem... but then, that would look weird if the ad is for a job offer or something where no picture would be expected.

Any other thoughts on how to get around those obstacles? I'm hoping you guys might be able to think of something I haven't considered...

not2easy

1:51 am on Mar 29, 2018 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



A few thoughts -
As for the longer descriptions, maybe script in "read more.."?

No image? Your logo with something short to fill space and promote some extra service as a placeholder?

TorontoBoy

2:25 am on Mar 29, 2018 (gmt 0)

5+ Year Member Top Contributors Of The Month



For long content you could use a button for an accordion. On Bootstrap it is called "collapse". Do a short description, then a button for the longer content.

[w3schools.com...]

tangor

5:07 am on Mar 29, 2018 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



TITLE(left) PRICE(right) (one line)
Image (if used)
CONTACT
DESCRIPTION

Adjust div width to reading comfort, force image to fit.

csdude55

5:16 am on Apr 21, 2018 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



While on the subject of a Classifieds layout, I'd like your opinion on a specific feature.

I've seen other sites that, underneath the listing of the classified, they'll list other similar items that "you may also be interested in".

I'm torn on whether to do this. On the one hand, it encourages the potential to keep clicking on more listings. But on the other hand, they might be looking at something they would want, but then click on someone else's listing and forget to come back.

What do you guys think, is this an overall positive or negative for the site?

ipco

1:20 pm on Apr 21, 2018 (gmt 0)

10+ Year Member



Some quick thoughts before morning coffee.

Instead of trying to create a single one size fits all layout, would it be worth considering a choice of templates and let the user decide from a list? Their choice determines where on the page the ad is placed.

Job Application will not want an image or price but will require contact info, specified skills etc?

Yard Sales will only need a time, place and description.

Items Wanted may be a shorter description and contact info

For Sale items might have a Title at top, an image (collapsed if no image) below, contact info and price then a short description below that with a "More" link for longer descriptions as suggested by others. Perhaps even a "More Images" option too.

Lost and Found perhaps similar to For Sale.

There again, it depends on the overall page layout. Is the page (possibly) full of images or is it a list of titles (and thumb nails) with modals on hover or links to pop-ups in which event you will not have a layout problem.