Would like feedback on a new responsive gallery

[markhwebster]

Hi,
I am brand new to this board, though I’ve learned a lot here in the past.

I am a fine artist, and I teach college level web design. I am updating my website and have two new pages working.

http://www.websterart.com/html/flex-landscapes.html

http://www.websterart.com/html/flex-mark.html

I would be very grateful if I could get some feedback on these two pages. I’ve developed some stuff in html5, css3 and jquery/javascript that is all done from scratch.

As you will notice, you can only navigate to “home” and “landscapes”.
The thumbs on the landscape page are clickable, and lead to the full size images, which trigger an animation.

Different images load based on your viewport width.

Depending on your viewport width, the full size images have css3 rollover transition animations on both the images as you scroll, and on the captions.

Or, the caption animation will trigger via a click if on an iphone.

There is also a “back to grid” button built into the animated captions.

I used to use the galleria plugin for this gallery function, I still have it working on my old site at http://www.websterart.com. But I didn’t like it’s fickle behavior, so I’m developing this new gallery function from scratch.

Thanks in advance for any comments or suggestions. I’m not sensitive, feel free to be honest.

Mark Webster

[Atelierbram]

Gallery looks and behaves fine to me; following remarks can be considered to be “in the margin” and probably petty personal preferences.

On the 1px black border on the big photo’s of the paintings (on flex-landscapes): to me it can do without. As you probably well know (surrounding) black makes colors ‘glow’, like (surrounding) white make colors ‘breathe’. But your paintings have lots of bright color already and, in my eyes, the black makes the colors glow too much. Take it away, and the eye starts to notice other painteristic qualities like the dynamic brush strokes.

On the caption-text on the semi-transparent black background down the bottom of the gallery-images when hovered: could do with a little more padding on the text. Can loose the light border here too. Font could be of a lighter weight, (since it is white on dark, and wait until we have led-light monitors with even more contrast, the letters appear heavier) with maybe even a tiny bit of letter-spacing applied.

.notify .caption p {
  margin: 5px 25px 3px 5px;
  padding: .5em;
  letter-spacing: 1px;
  word-spacing: -1px;
  /* font-family: webfont, sans-serif; */
  font-weight: 300;
}

[markhwebster]

Thanks for the thoughtful suggestions! I did take the black border off the big pictures. I see what you mean about the caption border…but for some reason I like the way it looks. I guess I’m thinking of framing or something. I tinkered with the font. The font is tricky because iPhones seem to display the font differently and fill up the caption earlier than normal computers. I also made the captions “return to grid” button bigger, because it is hard to click on an iphone, which meant enlarging the captions. Now I have to add more content to each caption. I’ve got more pages working now: home, landscapes, portraits, still lifes and structures. Getting flexbox and column-count to play nicely together has been a great learning experience. Thanks again for all the help. This site is an awesome resource.

[Author]

Posts