Type & Touch

As a general rule I gravitate towards larger type not only for relative readability, but also to help with touch targets. Yesterday, Matt Griffin from Bearded posted on the desire to, at times, use a base font-size that’s less than the 100% (16px) default for a range of media queried viewport widths. I questioned this in a series of nagging tweets, noting that touch and viewport size aren’t connected. The most popular touch devices may currently be phones and tablets, but you can also find touch screen offerings for 27” monitors and beyond.

I find it’s better to err on the side of larger type and bigger touch targets on any screen size, but I do think I was over-generalizing. In fact, there are a lot of places on the current Microsoft Homepage where we’re using 14px (0.875em) text. I think it works quite well for things like labels and caption/sub-text, especially for narrower columns.

Also, it’s entirely possible to have type smaller than 16px and maintain reasonable touch target sizing through vertical spacing like line-height and padding. Why both? Take a look at the two unordered lists below (Demo also on CodePen):

Example A only uses line height to establish vertical spacing, but when text wraps at narrower views the list items are hard to tell apart because lines of text and list item links are spaced the same. Example B has a tighter line-height with the difference being made up with the extra padding. This way, when the text wraps it’s easy to tell items apart. Bada-bing!

SXSW 2013

I’m looking forward to SXSW Interactive 2013, which kicks off this Friday, March 8th. This year there are 2 things I’m particularly excited about.

ATX Dribbble Meetup

The first is the Dribbble meetup on Saturday, March 9th at 8pm at Scholz Garten. The event is hosted by Dribbble, Microsoft, Squarespace, Creative Market, Happy Cog, and Paravel. We had a trillion people and an ice sculpture last year, so don’t miss it.

Adobe SXSW Creative Camp Panel

Then, on Sunday, March 10th I get to be part of Adobe Creative Camp, which spans the entire day. I’m on a panel at 3:30pm called Responsive Design From Every Angle with Sophie Shepherd, Jacob Surber, and Emily Wengert. I’m honored to have been asked and think it’ll be great.

Update: 3/13/13

The infinitely talented Gerren Lamson recently posted his sketchnotes from the Responsive Design From Every Angle panel. Gosh, he’s good.

Responsive Design From Every Angle Sketchnotes

The Mobile Book

It’s been an honor to contribute a chapter to Smashing Magazine’s The Mobile Book. I had the lead-off position in a series of chapters about responsive web design that was brilliantly followed up by Brad Frost and Dave Olsen.

The Mobile Book by Smashing MagazineThe Mobile Book by Smashing Magazine

If you’d like to take the book for a test drive, good news! Mine is the free sample chapter (8.0mb PDF). But there’s nothing quite like the real thing. This is Smashing’s best looking book, topped off with illustrations by the infinitely talented Mike Kus.

The Mobile Book by Smashing Magazine

Hitchcock on Happiness

But when all these [negative emotions] are removed, and you can look forward, and the road is clear ahead, and now you’re going to create something. That’s as happy as I would ever want to be.

I love the look he has on his face. You can almost see memories and experiences flash by. The joy I find in making something can easily be dashed when all is not well with those whom I care about. Work hard. Be nice. Handle your business, and don’t be an asshole.

Parallax Scrolling on the Web

While I’ve built one or two myself, I think parallax scrolling websites can, at times, be excessive. In the rare occasion where the effect is an appropriate fit, it can add a nice touch of natural perspective to a site.

Parallax Example

In the above GIF, I mounted a camera on a tripod and snapped shots at regular intervals as I raised and lowered the arm. Things in the foreground move up & down faster and further than things in the background. Also, things only shift on the axis being traveled—nothing shifts left & right along the x-axis if the y-axis is the one being traveled.

That’s why I think using vertical scroll to trigger horizontal motion can feel jarring and unnatural. Similar effects, like slowing the pace of a scroll or using it to load, rotate, or animate objects, can feel clunky and disorienting. There are surely exceptions, but assuming these effects make a site more engaging might be unsafe. I actually feel less engaged when scroll behavior is unexpected or hijacked. Like a car’s steering, even subtle changes in responsiveness will leave the driver unsure and less focused on what’s in front of them.

We should also keep in mind that extra browser/device testing is necessary. Some implementations can harm performance and won’t work well in touch environments. Parallax sites can be great fun, but please, implement with care.

Oh, and hat tip to Sega’s 1988 smash, Altered Beast, for showing us all how cool parallax is in the first place.

Beyond Device Testing

I had always looked at device testing as a straightforward pass/fail endeavor where websites either look and behave as expected or not. I would interact with whichever device—smartphone, tablet, or in-between—only for as long as it took me to verify that nothing was broken. At the end of the day all I gained was a check on a to-do list.

Recently, I’ve started ‘moving in’ to newly acquired or borrowed devices. I’ll setup email, multi-task, edit text, road test apps, and of course, browse the internet. Sometimes the experience is delightful, at others it’s frustrating and slow, but either way I win because I’ve taken a step or two closer to understanding where users might be coming from.

As web designers, our perceptions are among the most valuable tools in our arsenals. Limiting ourselves to one browser, operating system, or device brand is risky if our goal is to sensibly design for all of them. Now when I pick up a device to test, I find myself less quick to put it back down.