Responsive Web Design and touch devices

Responsive Web Design and touch devices

This presentation was given at JoomlaDay 2013 (http://joomladay.gr/) - 15/6/2013.

F4b9a4a4a00c827269ef65a692b8bfda?s=128

John Tsevdos

June 15, 2013
Tweet

Transcript

  1. 6.

    "traditional" web design might not work * at least out

    of the box navigation call to action links long forms/tables : h o v e r and mouseover events UI components
  2. 7.

    keep calm and : simplify follow the patterns (and the

    big players) try to avoid functionality that doesn't really work on touch devices
  3. 8.

    navigation do nothing approach (CSS) select menu (js) toggle menu

    (js) left/right nav flyout (js) footer only (css) adapt to touch :
  4. 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
  5. 12.

    call to action links adapt to touch : < !

    - - G o o d - - > < d i v > < a h r e f = " u r l / p a t h " > < i m g s r c = " n i c e / i m a g e . j p g " a l t = " n i c e i m a g e " / > < p > T h i s i s a v e r y n i c e i m a g e . < / p > < / a > < / d i v > < ! - - B o r i n g - - > < d i v > < d i v c l a s s = " i m a g e " > < a h r e f = " u r l / p a t h " > < i m g s r c = " n i c e / i m a g e . j p g " a l t = " n i c e i m a g e " / > < / a > < / d i v > < p > < a h r e f = " u r l / p a t h " > T h i s i s a v e r y n i c e i m a g e . < / a > < / p > < p > < a h r e f = " u r l / p a t h " > r e a d m o r e < / a > < / p > < / d i v >
  6. 14.

    forms adapt to touch : < ! - - D

    e f a u l t K e y b o a r d - - > < i n p u t t y p e = " t e x t " / > < ! - - N u m e r i c K e y b o a r d - - > < i n p u t t y p e = " n u m b e r " / > < ! - - N u m b e r K e y b o a r d - - > < i n p u t t y p e = " t e l " / > < ! - - U R L K e y b o a r d - - > < i n p u t t y p e = " u r l " / > < ! - - e - m a i l K e y b o a r d - - > < i n p u t t y p e = " e m a i l " / > < ! - - P a t t e r n K e y b o a r d - - > < i n p u t p a t t e r n = " [ 0 - 9 ] * " t y p e = " t e x t " / >
  7. 15.

    tables try to avoid them o v e r f

    l o w : s c r o l l adapt to touch :
  8. 16.

    tables native scroll inside elements ( ) adapt to touch

    : source o v e r f l o w : s c r o l l ; - w e b k i t - o v e r f l o w - s c r o l l i n g : t o u c h ; / * n a t i v e l i k e s c r o l l * /
  9. 17.

    tables (Zurb.com) (jQuery Mobile) (bootstrap plugin) adapt to touch :

    responsive tables reflow table mode responsive tables
  10. 18.

    : h o v e r and 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 :
  11. 19.

    : h o v e r and mouseover events no

    silver bullet for these try to use similar touch events adapt to touch :
  12. 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 :
  13. 22.

    lean touch libraries fetures small footprint easier to use no

    UI components, just the touch events excellent solutions for small/middle projects
  14. 24.

    full touch libraries fetures large footprint more complete solutions (provide

    UI components and widgets) excellent solution for biggers projects/apps
  15. 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
  16. 27.
  17. 29.

    touch devices can do more call or text < a

    h r e f = " t e l : + 3 0 6 9 4 8 1 2 3 4 5 6 " > + 3 0 6 9 4 8 1 2 3 4 5 6 < / a > < a h r e f = " s m s : + 3 0 6 9 4 8 1 2 3 4 5 6 " > + 3 0 6 9 4 8 1 2 3 4 5 6 < / a >
  18. 30.

    touch devices can do more capture images, video or sound

    using HTML forms < i n p u t t y p e = " f i l e " a c c e p t = " i m a g e ; c a p t u r e = c a m e r a " / > < i n p u t t y p e = " f i l e " a c c e p t = " v i d e o ; c a p t u r e = c a m c o r d e r " / > < i n p u t t y p e = " f i l e " a c c e p t = " a u d i o ; c a p t u r e = m i c r o p h o n e " / >
  19. 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
  20. 32.

    be a pioneer use , or (or simply use a

    library like ) graceful degradation HTML5 geolocation API IndexedDB Web SQL Local Storage lawnchair
  21. 34.