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.

  • 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 Nov 28 '16 at 10:13
  • :focus only works on inputs. Does that mean i have to have hidden inputs? – Sevenearths Nov 28 '16 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 Nov 28 '16 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 Nov 28 '16 at 10:59
  • Do you have to use tabindex="..." on an element to make :focus work? – Sevenearths Nov 28 '16 at 16:36
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).

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

  • No they just list features. There is not enough content to make them warrant their own page – Sevenearths Nov 28 '16 at 13:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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