0

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:

  1. Have the animations run on click as well
  2. 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)
  3. 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)
  4. 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.

Improve this question
6
  • 1
    Fancy animations which rely on mouse hover alienate a lot of people who use the keyboard instead of a mouse, so this solution is an accessibility nightmare. It is not difficult to trigger these animations using a keyboard, but his isn't the place to ask how to do this (clue, use the CSS :focus pseudo class)
    – SteveD
    Commented Nov 28, 2016 at 10:13
  • :focus only works on inputs. Does that mean i have to have hidden inputs?
    – Robert Johnstone
    Commented Nov 28, 2016 at 10:42
  • 2
    Absolutely not correct. css-tricks.com/almanac/selectors/f/focus You can see an example of it applied to a div further down the page. All you need to do is make the objects receive keyboard tabbing focus.
    – SteveD
    Commented Nov 28, 2016 at 10:48
  • 1
    I updated your code example with tabindex (to give them keyboard focus) and changed all the :hovers to :focus (don't know if this saved). There is still a bit more work you will need to do, to clean this up, but this is your starting point and proves :focus is the correct approach for keyboard users. You should be able to use hover AND focus to trigger the animation.
    – SteveD
    Commented Nov 28, 2016 at 10:59
  • Do you have to use tabindex="..." on an element to make :focus work?
    – Robert Johnstone
    Commented Nov 28, 2016 at 16:36

2 Answers 2

Reset to default
1

Use tabindex to allow them to receive keyboard focus and use :focus to trigger the CSS rules you are currently using on the :hover. You can support both :hover AND :focus to trigger the same animation CSS rules, although you might need to remove the browsers default keyboard focus styling as it might conflict with your styling (Chrome can be a bit troublesome).

Improve this answer
1

Are the containers also links to something?
You could make the animation play on click/tap on mobile too and in the active element show a button that links further.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
1
  • No they just list features. There is not enough content to make them warrant their own page
    – Robert Johnstone
    Commented Nov 28, 2016 at 13:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.