How to optimize website for touch devices
It sounds to me like you want to have a touch-screen-friendly option, to cover the following scenarios:
- iPhone-like devices: small screen, touch only
- Small screens, no touch (you didn't mention this one)
- Large screens, no touch (i.e. conventional computers)
- 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.
Optimizing website for mobile devices
Things that I have used when designing mobile websites.
- Find out the range of devices that you are planning to support. Some questions that you can ask are
- Are u going to support only smartphones
- What platforms are u planning to support ( iPhone, Android, Symbian ? )
A lot of you questions can be answered by the kind of Analytics that you are able to gather. If you have very less statistics then you can follow this strategy to start with.
Separate out the target range of devices into
- simple ( basic phones with minimum browsing capabilities. ) - Design a very simple plain vanilla site for them.
- medium ( older generation smartphones with browsers with poor javascript support ) - Design a site that has slightly better features.
- Highend smartphones ( iPhone, Android, WebOS ) - Provide jazzy features that these phones support.
Use a device detection library like WURFL / .Mobi for device detection and WALL for dynamic rendering of content.
You can use .Mobi to detect an HTML5 compliant mobile browser. That way, you can take advantage of HTML5 capabilities in the devices that support it.
For testing you can follow this approach
- test on browsers - Firefox / Safari / Opera have plugins to alter USER_AGENT and can simulate mobile testing.
- Test on simulators - All the device platforms provide free to download emulators
- If needed try device emulation products like device anywhere / perfecto.
I hope I was able to clarify atleast some of you questions. :)
how to identify touch enabled mobile devices
Did a bit of research and this is what I found
http://en.wikipedia.org/wiki/WURFL
The PHP implementation
http://wurfl.sourceforge.net/nphp/
Front End
Same question from an other post "valid answer"
What's the best way to detect a 'touch screen' device using JavaScript?
The info can be found on the following "require reading"
Optimize website for touch devices
And a bit more details on how moderniz detect it
http://modernizr.github.com/Modernizr/touch.html
Hope that help
Related Topics
In Angularjs, Any Inline JavaScript Code That Included in HTML Templates Doesn't Work
How to Do Page Numbering in Header/Footer HTMLs with Wkhtmltopdf
CSS and Jquery: Spaces Inside Image Name Break Code of Url()
Show Dynamically Added Navlinks When Added in Bootstrap Navbar
JSON Datetime Between Python and JavaScript
Changing Iframe Src with JavaScript
Cross-Platform, Cross-Browser Way to Play Sound from JavaScript
How to Cache an Image in JavaScript
JavaScript Beforeunload Detect Refresh Versus Close
How to Retain the Scroll Position of a Scrollable Area When Pressing Back Button
How to Set Textarea Scroll Bar to Bottom as a Default
Why Does Reflow Need to Be Triggered for CSS Transitions
Getting the Values of All the CSS Properties of a Selected Element in Selenium
Mutationobserver: New Value in the Format of 'Oldvalue'