Interactions in Responsive Web Design for Hover and Touch Devices

Links and talking points from my talk: “Interactions in Responsive Web”

Why add interactions to our web pages?

  • Illustrate a change on the page
    • Let users know something has changed
    • Make changes less jarring
  • Allow other changes to happen in the background
  • Appear current
    • Use of new technology lets users know you are up-to-date
  • Add entertainment
    • Surprise and delight
    • Value in fun factor

Should you add interactions/animations/transitions?

  • Will the interaction help users understand the changes in the interface?
  • Will the interaction add personal value or enjoyment to the experience?
  • How does the interaction affect the page size/performance budget?
  • Can I optimize the experience by choosing less expensive properties to animate?
  • How much time will be added to the design/development timeline to create/implement?
  • How will this effect the cross-device QA/testing time?
  • If I remove the interaction, can my visitors still access the information in an easy manner, with minimal clicks or confusion?
  • Do the interaction choices degrade gracefully?
  • Is the design accessible for touch, mouse, and keyboard users?

Interaction: Simple transitions on :hover & :focus

Easy to add with code such as:

a { transition: color 0.25s linear; }

Sites in use:

Pros:

  • no context lost on touch/non-touch devices
  • smooth change for users with hover or focus
  • minimal work to implement

Cons:

  • multiple functionalities to test/design

Interaction: Surprise and delight hovers

Sites in use:

Pros:

  • Gain fun, user enjoyment with playful interaction
  • No context lost on touch devices

Cons:

  • Minimal to potentially average added page weight for functionality

Interaction: Information reveal hover

Sites in use:

Pros:

  • Show information to users quickly without additional clicks or page loads
  • Can provide a fun interface for visitors to interact with

Cons:

  • Different experience for touch/mouse users
  • Touch users on larger sizes might be confused by experience

Interaction: Destination hover

Sites in use:

Pros:

  • Can maximize imagery by hiding text till interaction
  • Can offer shortcuts for reaching a destination

Cons:

  • Users without hover will not know destination, might be forced to take longer route to content
  • Visitors might miss links all together
  • Might require additional JavaScript to remove 300ms delay

Interaction: Navigation menus

Sites in use:

Hovers:

  • Have become a common convention for dropdown menus
  • Touch users will have a sub-par experience by having to take a longer route to content

Clicks:

  • Visitors might not recognize the need for a click
  • Makes sure touch and mouse users can access content

Interaction: Slideshows

Sites in use:

Pros:

  • Common interface for serving image and text content
  • Visitors can use arrow, pagination, and swipe conventions
  • Lazy load techniques can help solve speed problems

Cons:

  • Can have a speed impact; add to our performance budget
  • Interactions can be confusing on smaller screens when content doesn’t fit nicely and movement is rendered at unexpected speeds and directions

Interaction: Site Intros

Sites in use:

Pros:

  • Can focus attention on specific elements
  • Adds visual enjoyment and liveliness to page
  • Adds slickness to otherwise pretty barren splash pages

Cons:

  • Can be a large speed impact
  • Can be confusing on smaller screens to follow elements as they animate in

Hover/Touch Global Switcher

CodePen examples:

Pros:

  • Makes sure that there is a way that visitors on any device can get the best experience for them
  • Allows aesthetic customization for different use cases
  • Can combine with screen size to optimize for small screen touch vs large screen touch

Cons:

  • Additional design/development work to craft different experience
  • Requires user to do extra work to set preferences

Interaction Media Features

Pointer:

  • Checks for: none, coarse, fine
  • If multiple input mechanisms: recommended that the UA reports the characteristics of the least capable pointing device
  • UAs may make the feature match multiple values.

Hover:

  • Queries whether primary pointing system used on the output device can hover or not.
  • Values: none, on-demand, hover

CSS Animation Performance

Faster properties:

  • Transform
    • position
    • scale
  • Opacity
  • Rotation
  • Some filters

Read more:

300ms Delay

Mobile browsers wait ~300ms from the time that you tap the button to fire the click event to wait and check for double tap.

Overrides:

Related links:

Helpful Links for Successful Web Typography

Here is a collection of useful links for designers and developers from my presentation The Developer’s Ampersandwich.

Articles/Examples

Tools/Browser Extensitions

Free Web Fonts

A Formula for Speaking Fees

I was on a panel about public speaking recently and the topic of getting paid to speak came up. My answer: I do charge a speaking fee for most conferences I speak at. Ideally every person (full time, self employed) will be paid for speaking, but now that I’m a freelancer, it is imperative for me.

When I speak at a conference, I am committing to spending time away from traditional client work to prep a talk, practice a talk, travel to/from a talk, and give the talk. I’m super into math and formulas and I find that hard numbers allow me to figure a fair speaking fee. So let’s see how that works. If I say yes to an hour long talk, that can potentially break down to these hours:

  • Email correspondence with conference organizer (info, travel plans, etc): 1 hour
  • Prepping for talk (info, keynote design, research): 35 hours
  • Practice: 5 hours
  • Travel (including waiting at an airport, where I find it hard to do work depending on Internet/length of time): 5-16 hours
  • Conference (multi-day): 16 hours

That can be a total of 73 hours away from paying client work. Now, let’s break this time down a bit. If it’s a conference I’d be interested in attending, then the 16 hours at the actual conference can be a draw because I can also learn things there, So we’ll take that out of our total hours and now we are at 57 hours. Let’s say you only say yes to places with direct flights, no time zone change. That will save us some time, so let’s chop 7 hours off of our time to get down to a nice even 50 hours.

Let’s do some more easy math and say your freelance hourly rate is $100/hour.

50 hours (talk prep, travel) x $100 (hourly rate) = $5,000 potential money missed from paying clients

If you are comfortable with charging $5,000 a talk. Great! If not, here’s how you can get that lower without selling yourself short.

It takes me a long time to prepare for a talk, so I try to give it more than once. So if I am going to give the talk 5 times this year, then we can lower that number:

35 (total hours prep) / 5 (amount of times I’ll use this talk) = 7

Our new total hours for this talk, will now be:

  • Email: 1 hour
  • Prep: 7 hours
  • Practice: 4 hours
  • Travel = 8 hours

We now have a total of 20 hours so our new speaker fee can be:

20 (total hours) x $100 (hourly rate = $2,000 speaker fee

Still feeling too high for you? How about only saying yes to speaking in places that you would want to extend into a vacation? With that in mind you can cut the travel hours out of your formula - since you’d want to go there anyway. Now our new total is 12 hours, at 100 bucks an hour, will be a speaking fee of $1200.

Do you think this conference might lead to client leads? Well then maybe you can knock off another 100 or 200, and ask for an even $1000. This formula needs to be tweaked to your liking, but I find when I put numbers breakdowns in front of me, this thing (speaking) that some of us picture as intangible, suddenly becomes more of a product you are offering.

How do you ask for this?

I love when someone emails me, invites me to their conference and says: “And we’ll pay you $2,000!” - I”m like sweet! Perfect! But that doesn’t always happen. So then what? Just because they didn’t mention a speaker fee in the initial email doesn’t mean they don’t have money to give you one. So at this point, you can write back and say “what’s the speaker fee?” - but since I’m not always comfortable with a response like that, since i worry that might be read as I’m only in it for money - when lots of times conferences are a labor of love - I like to respond with thoughtful questions that will fill out my formula. Here is a sample of what I will write back:

  • How large is the audience?
  • What is the cost of the conference? How many speakers are there?
  • How long are the sessions?
  • Are talks recorded?
  • What is the speaker fee?
  • Were you looking for me to speak on a topic I’ve already covered or create a new talk with original material and slides?
  • Are there pre or post conference events to consider for travel planning?

If they write back and say the audience is 400+ people and the cost is $1000 a ticket and there is no speaker fee, I’ll respectfully reply that I can’t take unpaid days off from client work. This is especially amplified if they want me to create new, original content and/or if they will be recording and releasing videos of my talk on their site. From there, some people have said they understand and are sorry they can’t offer it and sometimes I’ve had people come back and either match what I asked or an offer close to it.

If they write back and say the conference will have 100 attendess and the cost is only $100 a ticket and it’s a place I really want to visit or at a conference I really want to attend, than sometimes I waive the fee, as long as they cover airfare, hotel, and travel expenses (such as cabs to/from the airport - that can be over $100 sometimes, and things like checked bag fees). Sometimes my boyfriend travels with me, and if they provide him a free ticket to the conference and an invite to the speaker dinner - that also is important to me. Conferences are expensive to run. I know that. So if they can’t pay a fee, how they handle the other details can be the deciding factors for me.

Lastly, I limit the amount of non-speaker fee events I’ll speak at a year, between 1-3, such as one local, one national, and one international. That way I have another formula that is easy for me fall back to when I am flattered by an invite, but realistically isn’t a viable event for my career or my accountants liking. And it is super awesome that anyone wants to hear me talk about things, so saying no to those is really hard, but this formula has helped me make smart decisions. Hope these ideas help you.

Also check out:

(Thanks to the wonderfully awesome Chris Coyier for feedback)

Advice on Teaching Beginner Front-end Code

I’ve had the pleasure of teaching Intro to HTML/CSS for Girl Develop It here in Philly since our inaugural class! Sharing my knowledge of front-end code with women who want to learn it has been incredibly rewarding and one of my favorite things to do! GDI has chapters throughout the world and I’ve been asked a few times to share advice to first-time teachers about to head up a class.

  1. Don’t read/recite the slides - use them as a guide but make sure you are brining your expertise to the class. That’s what makes it different than the students reading the slides themselves.
  2. Make sure the students have access to the slides and the materials before class so they can have it locally on their machine - sometimes it’s hard to see the projector if it’s too bright or if the room is long/the student is in back of the room
  3. Encourage questions!
    • If people ask questions that are beyond the scope of the course, don’t shoot it down. Be sure to touch on the subject and where they can find more info if they want to seek out more. The pacing of beginner classes can vary greatly, so don’t go too fast, but enable those with a more solid understanding to push themselves further.
  4. Make sure the TA’s feel comfortable helping people out while you continue. There’s a LOT to cover in these the short span of an intro class, so you don’t want to stop the whole class for a how to question about how to copy/paste - but you should stop the class if the question is applicable to everyone.
  5. Take scheduled breaks and let students know at the beginning of class when it will be. This helps ease their minds in regards to things like parking meter refills, lunch, brain timeouts.
  6. Go around the room and ask how people are doing. Some people will not ask for help until pressed. I can’t tell you how many times you can say “any questions?” and everyone will say no. But go around the room and up to someone and say ‘hows it going?” and questions will start pouring out.
  7. HAVE FUN!! :)

I’m also currently teaching Intro to HTML on Skillshare. Teaching without feedback from being in the same room is a completely different ballgame! Remember that the energy of an in-person class can really add to the experience and use that to keep the class fun and engaging!