Touch Screen Design Thinking


February 03, 2012

I’ve just finished up an interesting week at work and I’m gearing up for a three day weekend to get ready for a Super Bowl party on Sunday. Ok, so it’ll just be me and my father-in-law watching but I’ll be cooking homemade hot wings. And I call that a party.

That’s not really what I want to talk about. I want to talk about designing for the web.

Today I responded to a tweet by Ryan Plesko about using a fixed navigation on single page sites. Ryan tweets:

When designing a single page website consider fixed position navigation. Otherwise your menu is meaningless after the first click.

I agree. Ryan is absolutely correct. The best design decision you could make with a single page site navigation is to make the navigation fixed to the screen so the user can have access at any point on the page.

But, there are technical problems when positioning elements fixed on a page when you think about touch screens and other mobile devices. Brad Frost's video explanation covers the difficulties mobile browsers have with position:fixed. The short of it: Mobile browsers aren’t consistent with supporting position:fixed just yet. There are frameworks and libraries we can use to better the performance in popular mobile browsers but you have to ask yourself if the added weight and complexity is worth it.

I responded to Ryan's tweet:

That's good advice but position:fixed falls apart on touch screens.

In which Ryan defends his tweet:

I'm not suggesting the only way to do it is posttion:fixed. Responsive design should accommodate other devices.

We can design our sites to only have a fixed position navigation on “desktop” sites. What does that mean? When the viewport is greater than 960px wide? What about large touch screen devices in landscape orientation? That’s 1024px of viewport being displayed. I clarify my reasoning with Ryan:

RWD won't help either. You still have to account for large touch screens, right? Or do you have position:fixed > 1024px only?

In terms of thinking in a more device agnostic way, this is similar to the same problem I had with designing the theme for AgriLife. This theme had to accommodate content for 700 plus sites on a network install. Not knowing what the navigation was going to be, I had to design a system that included multiple levels of drop downs shown on hover. Ultimately, the navigation fell apart on touch screens because the second level of navigation links where not accessible. I’ve since discovered a better solution to the problem.

I’d like to think there is a simple approach to the fixed position problem. Ethan Marcotte has done a great job of this on his site displaying the navigation beautifully in each section. This keeps the site light and simple with no complex javascript overhead.

Consider the fact that touch screen users are accustomed to zooming. If you take a look at the jQuery Mobile example of fixed positioned headers and footers on your mobile device, you’ll notice things get a little crazy when zooming. The Twitter mobile app does this as well (at least for Android). Web Designer Wall’s very attractive recent responsive redesign has a fixed position navigation on the left side of the content but viewing on a large touch screen it seems a little jerky and the zooming is disabled (tested on a TouchPad). Not an ideal result for touch screen users.

We have to consider touch screens when designing our sites and craft interfaces that are device agnostic. The desktop-centric design thinking must stop if we are going to have better experiences on the web.

And I promise to make better choices.

Latest Thoughts

Thanks for stopping by!