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

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.

John Tsevdos

June 15, 2013
Tweet

More Decks by John Tsevdos

Other Decks in Technology

Transcript

  1. Responsive
    Web Design and
    touch devices
    From /
    John Tsevdos @tsevdos

    View full-size slide

  2. agenda
    adapt to touch devices
    provide solutions
    javascript touch frameworks
    techniques, tips and tools

    View full-size slide

  3. responsive web design
    principles
    flexible layout/grid
    media queries
    flexible media (images, videos, etc.)

    View full-size slide

  4. you can get there from
    here
    interaction
    UX

    View full-size slide

  5. this is a "touch" world
    fingers !== mouse pointer
    different mediums
    different use

    View full-size slide

  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

    View full-size slide

  7. keep calm and :
    simplify
    follow the patterns (and the big players)
    try to avoid functionality that doesn't really work on
    touch devices

    View full-size slide

  8. navigation
    do nothing approach (CSS)
    select menu (js)
    toggle menu (js)
    left/right nav flyout (js)
    footer only (css)
    adapt to touch :

    View full-size slide

  9. navigation
    adapt to touch :
    responsive navigation patterns

    View full-size slide

  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

    View full-size slide

  11. call to action links
    make larger click areas
    add padding
    adapt to touch :

    View full-size slide

  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
    >

    View full-size slide

  13. forms
    minimize form input
    use the appropriate virtual keyboard
    adapt to touch :

    View full-size slide

  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
    " /
    >

    View full-size slide

  15. tables
    try to avoid them
    o
    v
    e
    r
    f
    l
    o
    w
    :
    s
    c
    r
    o
    l
    l
    adapt to touch :

    View full-size slide

  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 *
    /

    View full-size slide

  17. tables
    (Zurb.com)
    (jQuery Mobile)
    (bootstrap plugin)
    adapt to touch :
    responsive tables
    reflow table mode
    responsive tables

    View full-size slide

  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 :

    View full-size slide

  19. :
    h
    o
    v
    e
    r and mouseover
    events
    no silver bullet for these
    try to use similar touch events
    adapt to touch :

    View full-size slide

  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 :

    View full-size slide

  21. use a javascript touch
    library
    lean touch libraries
    full touch libraries

    View full-size slide

  22. lean touch libraries fetures
    small footprint
    easier to use
    no UI components, just the touch events
    excellent solutions for small/middle projects

    View full-size slide

  23. lean libraries
    (modular, works like jQuery)
    Hammer.js
    QUO.js

    View full-size slide

  24. full touch libraries fetures
    large footprint
    more complete solutions (provide UI components and
    widgets)
    excellent solution for biggers projects/apps

    View full-size slide

  25. full touch libraries
    jQuery mobile
    Sencha Touch
    jQT
    iUI

    View full-size slide

  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

    View full-size slide

  27. when in doubt, check how
    the "big" players do it
    Bootstrap
    Foundation
    Pure

    View full-size slide

  28. follow the guidelines
    create your own!
    Android User Interface Guidelines
    iOS Human Interface Guidelines

    View full-size slide

  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
    >

    View full-size slide

  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
    " /
    >

    View full-size slide

  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

    View full-size slide

  32. be a pioneer
    use , or (or simply
    use a library like )
    graceful degradation
    HTML5 geolocation API
    IndexedDB Web SQL Local Storage
    lawnchair

    View full-size slide

  33. congratulations!
    make it touch-friendly
    enrich the UX on tablets/smartphones

    View full-size slide

  34. I'm social...
    tsevdos.com
    phrappe.com
    @tsevdos
    github.com/tsevdos
    linkedin.com/in/tsevdosjohn

    View full-size slide