Interesting design conundrum

[bearhead]

I have (what I think) is an interesting design problem.

What I’m trying to do is create a webpage that shows my client’s employees and a quote from them when they are moused over. However there are some specific criteria that I am required to meet as per the clients request:

1. The layout must be done in a grid-like fashion.

2. the quotes must appear on mouse over, the client doesn’t want them to be always visible, and onclick won’t cut it either.

3. the quotes cannot overlay people’s photos, this is apparently very rude in middle eastern culture, and my client is very sensitive to that.

This is what I have right now (WIP):

I am using masonry.js to handle the grid stuff and keep it responsive, masonry also allows the pictures to fit around the quotes so no one is covered up.

I have the quotes coming from the bottom, because if they come out of one side or the other, quotes appear off screen for narrower screens. Having the quotes coming out of the top can be done… but that just seems goofy to me. The issue with the bottom quotes though, is that for the bottom row of people, the quotes are partially below the viewport. I tried to work around this by using the scrollIntoView function. It works in Firefox and IE but not Chrome for some reason? Its also not very elegant…

So I guess what I asking is, how would you go about designing this page? Is there a more elegant way to design this page that I haven’t thought of?

[nixnerd]

I mean to me… there is way too many things moving. That’s not really your fault though… because you’re in a weird situation. You weren’t kidding when you said it needed to be laid out in a “grid-like” fashion. I didn’t know the photos would literally be butted up to one another with a pretty small gutter.

How does this client feel about transforms and flipping each photo over to reveal the quote? that seems like the most elegant solution.

[Craigw14]

The only suggestion I could bring forward would be to have the photos nested around a static area in the middle, which changes on each hover for each employee, and would keep it in some form of grid pattern.

That would mitigate the problem of the movement and there isn’t any coverage of the employee (‘ which is nice of you that you respect your clients culture :) ‘).

Hopefully this is useful to you in any way, just woke up.

[mmcgu1966]

have you considered having the text to the side of the image, instead of below it? that way, the width of an ‘item’ would change, pushing other ‘item’ divs to the left. If they float, they would simply drop down to the next row. You wouldn’t even need all that complicated absolute positioning.

[sensationikke]

On a side note, because you of your point 3, and I don’t seem to see any mention of it in your text. Did you notice that when hovering over one the big photos, the quote is over the picture of someone else? (this does not occur with the small photos)

[bearhead]

Yeah that issue was brought up recently… We’re still weighing the different options, but right it looks like I’ll end up doing one of two things:

1. applying a different class to the large photos so that their quotes don’t overlap anything.
2. My client might be ok with the quotes covering other people’s photos (just not the photo to the person to whom the quote belongs). This is how it’s currently set-up on their website, so its an option, though maybe not ideal for them. It would eliminate the issue of things flying around the screen though…

[Author]

Posts