Specific CSS for Touch Enabled Devices

[bkbillma]

The world is largely stuck on the idea of native apps right now but web apps are trying to make room and become noticed. As a web developer I obviously want to see web apps taken more seriously, and I am in the middle of creating a few anyway. Starting mobile first on my devices currently works quite well. Ok I am getting off topic.

Having a touch screen on your laptop makes for a great complementary or maybe even primary input for navigating around. Whether you agree or not, it is better to have the option of touching the screen to interact than not in almost any case.

But many websites that are built responsive or not have smaller targets, obviously for a mouse. So my question is should we be detecting touch enabled as well as device-width/device-height and dpi in our media queries. Even if it isn’t possible in media queries right now if someone has a touch enabled device should our targets be larger?

I am thinking yes, though I have some reserve about the change in interface and if it is confusing to a user when they visit with touch enabled vs not. I think done right it will be no different than the responsive for different screen sizes that we are currently doing. But, I see this as a certain issue that will be faced in 2013. How do we make sites work nice not only for any screen size but whether the user is using touch, mouse, gesture, etc.

[bkbillma]

Nice article. Thanks for the link. I have partly been doing this in all of my recent dev. More just making targets bigger and not so much thinking about placement based on the way a device is held. We can’t really know what way the device will be held tho just by knowing size and if it is touch or not.

Still the ‘coarse’ css’4′ addition is kinda cool. Perhaps it might turn into even having a simple way for the user to decide if they want the site to be optimized for the 2 thumb sides or one of the other configurations shown. Much like the old ‘view desktop mode’.

But rather an adaptive layout the user can choose from or toggle between because they might like one in landscape better than portrait or vice versa

[Andy Howells]

You can test for Touch using modernizr and then you could conditionally load some CSS on particular elements (or indeed a whole new stylesheet) if you wanted to serve something to just those users. However, it would be pretty broad, some customers may have a touch screen massive desktop, so it might not always make sense to have giant buttons if they also have a mouse available.

[bkbillma]

Yeah I know via js you can look for it as well. But I think the link @chrisP linked to might be best practice (making your site touch friendly always)

[Author]

Posts