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)

43152d6187a49395c7d049c9c5bea218?s=128

Tamim Swaid

June 11, 2011
Tweet

More Decks by Tamim Swaid

Other Decks in Design

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