BreakTime: Computer Break App Review #1

We’ve all heard it: “sitting is killing us”, “screens will keep you awake at night”, “desks are bad for your health”, “computers will give your robot eyes”, etc, etc. Yet for many of us, our jobs are at a computer and at a desk and until we can code from the beach while doing an inverted pose or with a laptop hammock stand, what are we to do?

Over the next couple of days/weeks, I am going to try a different break strategy every day. Feel free to follow along and leave your thought on the apps as well. First up:


The Pitch

BreakTime is a simple utility that’s designed to help you remember to take breaks away from your computer. It never forgets a break, running in your dock and / or menu bar (or even in the background).

The Break

Well, the download screen leaves a lot to be desired on this one, but it was recommended by three people so I went for it.

Simple to install and get up and running. Option to display icon in dock which is nice. Presented with basic and advanced options. I went with the default set. You can go into super serious strict break mode by option for the Enforce break option which won’t let you click the “done” button early.

The menu icon will update based on how much time is left till your next break and also provide a larger visual representation of that on click.

Twenty minutes later we were ready for our first break!

I also was interested to see what the sounds were. They were quite minimal which was perfect. A quaint, non-jarring alert to let you know it was starting, and then the BreakTime options are presented on your main screen. You can wait the default two minutes, prompt the break in a minute or more, or select ‘done’ to end the break.

Any secondary displays are dimmed.

Any music playing will still play but clicks on other apps are prevented until selecting ‘done’. At the end of two minutes, the break screen stays up and begins to play a low-key alarm alerting you that the break is done. I expected it to end automatically, and could imagine if the break is triggered while I’m away from my desk that sound could be annoying.

I don’t know if the magic reschedule ever happened, which would readjust my break times if I was away for a while as I wasn’t away for a while. But definitely a neat feature.

The Results

By the second break, I switched from 20 minute to 30 minute increments. Twenty was too often for me for a two minute break.

I was getting along nicely with this, but at the third break my demo prompted me to purchase:

BreakTime is a contender: pretty customizable and unobtrusive. And the sound effects are pretty nicely chosen and appropriate. I do wish that it closed on it’s own after the determined two minute break was up.

Tomorrow’s break app: Marinara Timer

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:


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


  • multiple functionalities to test/design

Interaction: Surprise and delight hovers

Sites in use:


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


  • Minimal to potentially average added page weight for functionality

Interaction: Information reveal hover

Sites in use:


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


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

Interaction: Destination hover

Sites in use:


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


  • 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:


  • 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


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

Interaction: Slideshows

Sites in use:


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


  • 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:


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


  • 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:


  • 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


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

Interaction Media Features


  • 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.


  • 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.


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.


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)