July 16, 2014 at 3:16 pm #175614
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:
- The layout must be done in a grid-like fashion.
the quotes must appear on mouse over, the client doesn’t want them to be always visible, and onclick won’t cut it either.
the quotes cannot overlay people’s photos, this is apparently very rude in middle eastern culture, and my client is very sensitive to that.
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?July 16, 2014 at 10:34 pm #175628
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.July 17, 2014 at 2:40 am #175645
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.July 20, 2014 at 6:29 am #175907
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.July 21, 2014 at 3:04 pm #176107
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)July 30, 2014 at 7:53 am #176932
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:
- applying a different class to the large photos so that their quotes don’t overlap anything.
- 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…
You must be logged in to reply to this topic.