search

BraveUX / braveux

Staging environment for our agency website.
http://braveux.github.io/braveux/
24 stars 6 forks source link

Hurdlr Case Study MOBILE: Divider w/ animated icons #422

Closed gabrielataginya closed 6 years ago

gabrielataginya commented 6 years ago

Screen Shot 2018-03-27 at 1.56.38 PM.png

The icons are dispersed oddly.

ekfuhrmann commented 6 years ago

Yep, this is an odd instance. So to explain, generally we scale the images/icons based on the display size. In this case we have a min-height of 35vh or (35% of the view height of the device) for this section divider. This is done so that we're not left with a super small divider.

On an iPhone X, this is how the section currently looks: image

As an alternative approach we can have the following: image

Personally I feel the latter option, while displaying the image better, is too small to work as a divider. I'm not sure how we resolve this without modifying the actual placement on mobile... but due to the way in which we animate and load these it's not a trivial thing.

I'm not sure we get enough mobile traffic to consider really updating this section. I think the larger divider works better, though is absolutely not a best-case scenario. That said, the mobile experience of our case studies is pretty poor as is with content that can be very small.

Going to punt this discussion over to the designers for their thoughts, but to me I think as it currently exists is the best option.

theseangoodwin commented 6 years ago

After looking at this on a mobile device (iPhone 6) and the browser inspector (iPhone X), I think the divider works quite well as is. It seems taller than in @ekfuhrmann 's screenshot.