I'm working on a site were the features are shown as exploratory items (http://codepen.io/sevenearths/pen/rWzgba). This all works well on computers where users can hover over elements and additional text can be revealed, but it doesn't work so well on mobile devices where hovering is not an option :(
Is there anyway I can make another experience for those on mobile devices (checkout the @media small screen setting in the CSS pane in the link above)?
This is hard though because it is hard to discern between a PC users and a tablet users.
I have thought about the following:
- Have the animations run on click as well
- Have the animations run when a break-point in the page has been reached (how do you ONLY get this to work on mobile devices)
- Have the animations run when a break-point in the page has been reached for a timed cycle (the information would only be visible on mobile devices for a short period. Useless)
- Have a user agent check solution (https://stackoverflow.com/a/11381730/563247) (that would not be a good move)
I could just NOT have an exploratory interface and have the elements static across all devices but I don't think that would be an engaging user experience.