Responsive Web Design and touch devices


Published on

This presentation was given at JoomlaDay 2013 ( - 15/6/2013.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Responsive Web Design and touch devices

  1. 1. ResponsiveWeb Design andtouch devicesFrom /John Tsevdos @tsevdos
  2. 2. agendaadapt to touch devicesprovide solutionsjavascript touch frameworkstechniques, tips and tools
  3. 3. responsive web designprinciplesflexible layout/gridmedia queriesflexible media (images, videos, etc.)
  4. 4. you can get there fromhereinteractionUX
  5. 5. this is a "touch" worldfingers !== mouse pointerdifferent mediumsdifferent use
  6. 6. "traditional" web designmight not work* at least out of the boxnavigationcall to action linkslong forms/tables:hoverand mouseover eventsUI components
  7. 7. keep calm and :simplifyfollow the patterns (and the big players)try to avoid functionality that doesnt really work ontouch devices
  8. 8. navigationdo nothing approach (CSS)select menu (js)toggle menu (js)left/right nav flyout (js)footer only (css)adapt to touch :
  9. 9. navigationadapt to touch :responsive navigation patterns
  10. 10. navigationif you are too lazy to build your own custom navigation trythe below links/resourcesselect menu :toggle menu :left/right nav flyout :adapt to touch :jQuery Responsive Menu PluginTinyNav.jsFLEXNAVTOP DRAWERjPanelMenu
  11. 11. call to action linksmake larger click areasadd paddingadapt to touch :
  12. 12. call to action linksadapt to touch :<!-- Good --><div><a href="url/path"><img src="nice/image.jpg" alt="nice image" /><p>This is a very nice image.</p></a></div><!-- Boring --><div><div class="image"><a href="url/path"><img src="nice/image.jpg" alt="nice image" /></a></div><p><a href="url/path">This is a very nice image.</a></p><p><a href="url/path">read more</a></p></div>
  13. 13. formsminimize form inputuse the appropriate virtual keyboardadapt to touch :
  14. 14. formsadapt to touch :<!-- Default Keyboard --><input type="text" /><!-- Numeric Keyboard --><input type="number" /><!-- Number Keyboard --><input type="tel" /><!-- URL Keyboard --><input type="url" /><!-- e-mail Keyboard --><input type="email" /><!-- Pattern Keyboard --><input pattern="[0-9]*" type="text" />
  15. 15. tablestry to avoid themoverflow:scrolladapt to touch :
  16. 16. tablesnative scroll inside elements ( )adapt to touch :sourceoverflow: scroll;-webkit-overflow-scrolling: touch; /* native like scroll */
  17. 17. tables( Mobile)(bootstrap plugin)adapt to touch :responsive tablesreflow table moderesponsive tables
  18. 18. :hoverand mouseovereventstry to avoid themdont use them for displaying/perfoming criticalinforation/tasks (for example tooltips and dropdownmenus)provide alternativesadapt to touch :
  19. 19. :hoverand mouseovereventsno silver bullet for thesetry to use similar touch eventsadapt to touch :
  20. 20. UI components(like modals, image sliders, carousels, tabs, accordions etc.)do they enhance the experience or they just makethings worst?are they really working on touch devices?do they respond to touch events?adapt to touch :
  21. 21. use a javascript touchlibrarylean touch librariesfull touch libraries
  22. 22. lean touch libraries feturessmall footprinteasier to useno UI components, just the touch eventsexcellent solutions for small/middle projects
  23. 23. lean libraries(modular, works like jQuery)Hammer.jsQUO.js
  24. 24. full touch libraries fetureslarge footprintmore complete solutions (provide UI components andwidgets)excellent solution for biggers projects/apps
  25. 25. full touch librariesjQuery mobileSencha TouchjQTiUI
  26. 26. best practicestart small, but if you really need something morecomplete, dont hesitate to use it!always try to load only what you really need/use
  27. 27. when in doubt, check howthe "big" players do itBootstrapFoundationPure
  28. 28. follow the guidelinescreate your own!Android User Interface GuidelinesiOS Human Interface Guidelines
  29. 29. touch devices can do morecall or text<a href="tel:+306948123456">+306948123456</a><a href="sms:+306948123456">+306948123456</a>
  30. 30. touch devices can do morecapture images, video or sound using HTML forms<input type="file" accept="image;capture=camera" /><input type="file" accept="video;capture=camcorder" /><input type="file" accept="audio;capture=microphone" />
  31. 31. be a pioneerreward modern browser usersuse HTML5 (elements, attributes etc.)use CSS3 (gradients, shadows/text shadows, rgba,transitions, animations, fonts, etc.)SVGadd a feature detection and adaptation strategy ()modernizr
  32. 32. be a pioneeruse , or (or simplyuse a library like )graceful degradationHTML5 geolocation APIIndexedDB Web SQL Local Storagelawnchair
  33. 33. congratulations!make it touch-friendlyenrich the UX on tablets/smartphones
  34. 34. thank you
  35. 35. questions ?
  36. 36. Im