U can touch it

What to consider when you make touchable websites (2011)

Transcript

1. uxcamp europe Berlin, 11.06.2011 – 12.06.2011 The nexum AG is a consultancy and agency for digital media. Tamim Swaid, Consultant, nexum AG U can touch it What to consider when you make touchable websites
2. 2 Global Unit Shipments of Non-Touch vs. Touch-Devices
3. 3 The website on different devices
4. 4 An appropriate fallback for Flash
5. 5 No flash video player – use .mp4 – and encode right Mp4 Flash
6. 6 Website not wider than 980 px. Otherwise it shrinks or scrolls.
7. 7 Typography on the iPad www.zeit.de
8. 8 The touch target size should be… The width of a finger limits the density of items on screen. If the items are too close, the user will not be able to choose a single one. Recommended touch target size is 9mm/34px Minimum touch target size is 7mm/26px Minimum spacing between elements is 2mm/8px
9. 9 Touch target size in reality
10. 10 Interaction feedback -webkit-tap-highlight-color: <css-color>
11. 11 Mouse Over Menu…
12. 12 … gets a close icon
13. 13 Complicated hover menus are outdated
14. 14 Keep your websites fast – No Animation overload
15. 15 Contrasting colours for better readability http://www.flickr.com/photos/matthewcooper/4749603193/
16. 16 Lightboxes and layers are problematic
17. 17 Scrollable div-boxes don‘t have scrollbars on touch Desktop iPhone iPhone „Problem“ fixed in iOS 5
18. 18 Keep data input as short as possible
19. 19 HTML5 Input Types Telephone URL E-Mail datetime-local search tel url email datetime date month week time number range color
20. 20 Input, saving and printing PDFs won‘t work on touch devices
21. Tamim Swaid, Concept & Consultant tamim.swaid@nexum.de Tel. +49 221 56939 - 4149 nexum AG Maarweg 149 – 161, 50825 Köln Thanks Bild 21