An internet radio show about the internet starring Dave Rupert and Chris Coyier.

Subscribe on iTunes or RSS

Twitter:

063 With Rachel Nabors

01:11:24 Download

Guests

Rachel Nabors

Web // Twitter

Rachel is a web animations expert at the W3C and part of the Microsoft Edge team.

Show Description

This week we were joined by Rachel Nabors, a cartoonist, illustrator, designer, and front end developer out of Raleigh, North Carolina. Rachel is highly interested in animations and sound in CSS and JavaScript. We talk about (roughly in order):

Show Sponsors

Interested in sponsoring?

Time Jumps

Comments

  • Without hgroup doesn’t having h1+h2 with no content in between imply a gap in the document hierarchy? I thought hgroup’s purpose was to allow the semantic meaning of heading elements to be retained while grouping them together so the document flow still made sense.

    • Leonardo Baptista Lopes

      Yes, that’s the use case: the document outline ignores the sub-headers, giving importance only to the highest one. SEO would not be a problem, it’d just be a matter of changing the algorithm.

  • Leonardo Baptista Lopes

    Let us not forget that hovers are and important usability resource when hover is applicable (when you actually use a cursor). Hovers allow us to understand whether an item is interactive by clicks, just as much as cursor change. I know, it’s redundant, but redundancy is usually good for usability.

    In the case of mobile devices, whe can’t hover, so it’s not a big deal no to have them (though many browsers actually allow you to see hover states if you long-press the items, so to make dropdown menus usable).

    But I obviously agree that a design should not depend on functioning hover states to work when it comes to mobile and screen readers.

    Thanks!

    • Good points! One thing I remember from old text-based adventure games like King’s Quest, before they implemented a curso interface, “interactable” items were colored to be slightly more saturated than their surroundings. Thus, your eye was quickly and subtly lead to investigate those things. In a world without hover, like mobile, I hope such techniques could be repurposed to add more redundancy!

      • Leonardo Baptista Lopes

        Thank you Rachel! And yes, I totally agree with you.
        Redundancy is a very important aspect of usability as well as of acessibility, because if something has redundant aspects, maybe someone who is not able to perceive one of them will have more clues about what it means.
        Things can convey their function through color, shape, texture, position, text, icons etc.

        Your videogame example can be expanded: level designers usually have to make paths and interactible objects more distinct than those that are not, to compensate for the lack of realism of games in comparison to reality, where a person could interact with almost anything.

  • My codepen, where all the animation we talked about live: http://codepen.io/CrowChick/

  • Thanks for addressing my hover events question. Good points were made. I’ll continue to avoid them when possible.

  • mhtorosian

    Thanks for answering my question! I ended up finding a helpful resource for responsive accordion sections in Brad Frost’s collection of responsive patterns: http://codepen.io/bradfrost/full/dlwBD

  • robertwilliams88

    Hey Guys, thanks for the mention of my “controversial” article about copy… just wanted to mention I’m a designer, not a copywriter 🙂

    • Leonardo makes a good point: hovers can be used to reinforce. But they shouldn’t be your only line of fire. I’d say design imagining a lack of hovers, and add hovers if you have the extra resources for it.

      • Leonardo Baptista Lopes

        That’s a good design advice, similar to graceful degradation: make it so that even the worst case scenario is supported.

  • Thank you guys so much for using Sealab 2021 sound effects, that made my morning drive haha! Can I expect “Hail Squishface” sound effects next? plbbt…

  • I have to disagree with Rachel’s hover on desktop comment. Like any interaction pattern, they can be abused ( Shout-out to alert dialogs! ).

    Hover events provide feedback to the user. Period. They communicate that the ‘thing’ you are currently over can be interacted with. Generally it is best practice to indicate the interaction potential (affordance) with a visual cue, the :hover then confirms the users prediction.

    Rachel also said something to the effect of tool-tips being band-aids for bad design. Tool-tips simply provide context. An icon, by nature, has a level of ambiguity. The objective of design is not always to make an experience fluent on a single trial. In many cases, the first trial is the ONLY trial.

    For an application like gMail, the experience is designed for multiple trials. The learning curve starts high and tapers over time. Generalized or ambiguous icons develop meaning in that specific context and will eventually outperform any other communication modality. The research question will always be, “How easily was ‘X’ encoded as ‘Y’.” Tool-tips simply help with the initial orientation.

  • TP

    Really interesting points made by @CrowChick:disqus about using hovers….totally re-wired the way I think about them. This has been one of the best talks ever. @CrowChick …awesome!

  • Kyle Breckenridge

    Here is that “all sound” iphone game Chris was talking about

    http://www.papasangre.com/

  • About the Blink topic: I found this video Q&A with the Blink Team interesting. http://www.youtube.com/watch?v=TlJob8K_OwE

Job Mentions

Check out all jobs over on the Job Board. If you'd like to post a job, you can do that here, and have it mentioned on ShopTalk for a small additional charge.