Upgrade to Pro — share decks privately, control downloads, hide ads and more …

U can touch it

U can touch it

What to consider when you make touchable websites (2011)


Tamim Swaid

June 11, 2011

More Decks by Tamim Swaid

Other Decks in Design


  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

  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