Responsive Web Design and touch devices
0 likes1,067 views
This document discusses making web designs touch-friendly by adapting navigation, calls to action, forms, tables, and other elements to be optimized for touchscreens. It recommends simplifying designs, following mobile patterns, avoiding hover events and complex components, using touch libraries like Hammer.js and jQuery Mobile, and checking guidelines from companies like Android and iOS. The document also suggests using HTML5 features when possible and adding touch-specific capabilities.
![forms
adapt 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" />](https://image.slidesharecdn.com/joomladay-responsivewebdesignandtouchdevices-130619071214-phpapp02/85/Responsive-Web-Design-and-touch-devices-14-320.jpg)
Responsive Web Design and touch devices
- 1. Responsive Web Design and touch devices From /John Tsevdos @tsevdos
- 2. agenda adapt to touch devices provide solutions javascript touch frameworks techniques, tips and tools
- 3. responsive web design principles flexible layout/grid media queries flexible media (images, videos, etc.)
- 4. you can get there from here interaction UX
- 5. this is a "touch" world fingers !== mouse pointer different mediums different use
- 6. "traditional" web design might not work * at least out of the box navigation call to action links long forms/tables :hoverand mouseover events UI components
- 7. keep calm and : simplify follow the patterns (and the big players) try to avoid functionality that doesn't really work on touch devices
- 8. navigation do nothing approach (CSS) select menu (js) toggle menu (js) left/right nav flyout (js) footer only (css) adapt to touch :
- 9. navigation adapt to touch : responsive navigation patterns
- 10. navigation if you are too lazy to build your own custom navigation try the below links/resources select menu : toggle menu : left/right nav flyout : adapt to touch : jQuery Responsive Menu Plugin TinyNav.js FLEXNAV TOP DRAWER jPanelMenu
- 11. call to action links make larger click areas add padding adapt to touch :
- 12. call to action links adapt 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. forms minimize form input use the appropriate virtual keyboard adapt to touch :
- 14. forms adapt 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. tables try to avoid them overflow:scroll adapt to touch :
- 16. tables native scroll inside elements ( ) adapt to touch : source overflow: scroll; -webkit-overflow-scrolling: touch; /* native like scroll */
- 17. tables (Zurb.com) (jQuery Mobile) (bootstrap plugin) adapt to touch : responsive tables reflow table mode responsive tables
- 18. :hoverand mouseover events try to avoid them don't use them for displaying/perfoming critical inforation/tasks (for example tooltips and dropdown menus) provide alternatives adapt to touch :
- 19. :hoverand mouseover events no silver bullet for these try to use similar touch events adapt to touch :
- 20. UI components (like modals, image sliders, carousels, tabs, accordions etc.) do they enhance the experience or they just make things worst? are they really working on touch devices? do they respond to touch events? adapt to touch :
- 21. use a javascript touch library lean touch libraries full touch libraries
- 22. lean touch libraries fetures small footprint easier to use no UI components, just the touch events excellent solutions for small/middle projects
- 23. lean libraries (modular, works like jQuery) Hammer.js QUO.js
- 24. full touch libraries fetures large footprint more complete solutions (provide UI components and widgets) excellent solution for biggers projects/apps
- 25. full touch libraries jQuery mobile Sencha Touch jQT iUI
- 26. best practice start small, but if you really need something more complete, don't hesitate to use it! always try to load only what you really need/use
- 27. when in doubt, check how the "big" players do it Bootstrap Foundation Pure
- 28. follow the guidelines create your own! Android User Interface Guidelines iOS Human Interface Guidelines
- 29. touch devices can do more call or text <a href="tel:+306948123456">+306948123456</a> <a href="sms:+306948123456">+306948123456</a>
- 30. touch devices can do more capture 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. be a pioneer reward modern browser users use HTML5 (elements, attributes etc.) use CSS3 (gradients, shadows/text shadows, rgba, transitions, animations, fonts, etc.) SVG add a feature detection and adaptation strategy ( )modernizr
- 32. be a pioneer use , or (or simply use a library like ) graceful degradation HTML5 geolocation API IndexedDB Web SQL Local Storage lawnchair
- 33. congratulations! make it touch-friendly enrich the UX on tablets/smartphones
- 34. thank you
- 35. questions ?