Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

you can get there from here interaction UX

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

"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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

navigation adapt to touch : responsive navigation patterns

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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 >

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

: 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 :

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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 :

Slide 21

Slide 21 text

use a javascript touch library lean touch libraries full touch libraries

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

full touch libraries jQuery mobile Sencha Touch jQT iUI

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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 >

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

thank you

Slide 35

Slide 35 text

questions ?

Slide 36

Slide 36 text

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