How to optimize website for touch devices

by

It sounds to me like you want to have a touch-screen-friendly option, to cover the following scenarios:

  1. iPhone-like devices: small screen, touch only
  2. Small screens, no touch (you didn’t mention this one)
  3. Large screens, no touch (i.e. conventional computers)
  4. Touch-screen-enabled large screens such as iPad, notebooks/pcs with touch screens.

For case 1 and 2 you will probably need a separate site or a CSS file that eliminates lots of unnecessary content and makes things larger and easier to read/navigate. If you care about case #2 then as long as the links/buttons on the page are keyboard-navigable then case 1 and 2 are equivalent.

For case 3 you have your normal website. For case 4 it sounds like you want clickable things to be bigger or easier to touch. If it’s not possible to simply make everything bigger for all users, an alternate style-sheet can provide you with the touch-friendly layout changes.

The easiest thing to do is provide a link to the touch-screen-version of the site somewhere on the page. For well-known touch devices such as iPad you can sniff the user agent and set the touch stylesheet as the default. However I’d consider making this the default for everyone; if your design looks good on the iPad it should look acceptably good on any notebook. Your mouse users with less-than-stellar clicking skills will be pleased to find bigger click targets, especially if you add appropriate :hover or mouseover effects to let users know that things are clickable.

I know you said you don’t want to sniff user-agents. But I’d contend that at this time the state of browser support for this is in too much flux to worry about the “Correct” way to do it. Browsers will eventually provide the information that you need, but you will probably find that it will be years before this information is ubiquitous.

More Related Contents:

  1. How do I simulate a hover with a touch in touch enabled browsers?
  2. How do I normalize the CSS3 transition end events across browsers?
  3. How to make HTML element resizable using pure Javascript?
  4. Callback on CSS transition
  5. Is there a callback on completion of a CSS3 animation?
  6. Prevent onmouseout when hovering child element of the parent absolute div WITHOUT jQuery
  7. Ignore mouse interaction on overlay image
  8. Detecting that the browser has no mouse and is touch-only
  9. How do you Hover in ReactJS? – onMouseLeave not registered during fast hover over
  10. link element onload
  11. How to detect CSS3 resize events
  12. How to prevent sticky hover effects for buttons on touch devices
  13. How can I tell when a CSS background image has loaded? Is an event fired? [duplicate]
  14. Prevent zoom cross-browser
  15. Is there a way to have content from an IFRAME overflow onto the parent frame?
  16. Modifying CSS class property values on the fly with JavaScript / jQuery
  17. Detect change in orientation using javascript
  18. How to ensure a form field is submitted when it is disabled?
  19. Disable dragging an image from an HTML page
  20. Am I using too much jQuery? When am I crossing the line?
  21. Use a new CSS file to override current website’s
  22. How to get just numeric part of CSS property with jQuery?
  23. In Javascript, how do I “clear” the back (history -1)?
  24. Missing click event for inside element on firefox
  25. How can I change the font (family) for the labels in Chart.JS?
  26. Unusual shape of a textarea?
  27. How to display Image dynamically on UI?
  28. Is there a way to curve / arc text using CSS3 / Canvas
  29. Capturing window.onbeforeunload
  30. How to apply background-color to a selected option?

Leave a Comment