What to consider when you make your website touchable.

1. The nexum AG is a consultancy and agency for digital media. U cantouchitWhattoconsiderwhenyoumaketouchablewebsites Tamim Swaid, Consultant, nexum AG uxcampeuropeBerlin, 11.06.2011 – 12.06.2011

2. 2 Global Unit Shipmentsof Non-Touch vs. Touch-Devices

3. 3 The website on different devices

4. 4 An appropriatefallbackfor Flash

5. 5 Noflashvideoplayer – use .mp4 – andencoderight Mp4 Flash

6. 6 Website not wider than 980 px. Otherwiseitshrinksorscrolls. 980 px

7. 7 Typography on theiPad www.zeit.de

8. 8 The touchtargetsizeshouldbe… Recommended touch targetsizeis9mm/34px Minimum touchtarget sizeis7mm/26px Minimum spacingbetween elementsis2mm/8px 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.

9. 9 Touch targetsize in reality

10. 10 Interaction feedback -webkit-tap-highlight-color: <css-color>

11. 11 Mouse Over Menu…

12. 12 … gets a closeicon

13. 13 Complicatedhovermenusareoutdated

14. 14 Keep yourwebsites fast – No Animation overload

15. 15 Contrastingcoloursforbetterreadability http://www.flickr.com/photos/matthewcooper/4749603193/

16. 16 Lightboxesandlayersareproblematic

17. 17 Scrollable div-boxes don‘thavescrollbars on Touch Desktop iPhone iPhone

18. 18 Keep datainputasshortaspossible

19. 19 HTML5 Input Types datetime-localsearchtelurl email datetimedatemonthweektimenumberrangecolor Telephone URL E-Mail

20. 20 Input, savingandprinting PDFs won‘twork on touchdevices

21. Tamim Swaid, Concept & Consultanttamim.swaid@nexum.deTel. +49 221 56939 - 4149nexum AGMaarweg 149 – 161, 50825 Köln Thanks 21 Bild