ResponsiveWeb Design and

touch devices

From / John Tsevdos @tsevdos

agenda

adapt to touch devicesprovide solutionsjavascript touch frameworkstechniques, tips and tools

responsive web designprinciples

flexible layout/gridmedia queriesflexible media (images, videos, etc.)

you can get there fromhere

interactionUX

this is a "touch" world

fingers !== mouse pointerdifferent mediumsdifferent use

"traditional" web designmight not work

* at least out of the box

navigationcall to action linkslong forms/tables:hover and mouseover events

UI components

keep calm and :

simplifyfollow the patterns (and the big players)try to avoid functionality that doesn't really work ontouch devices

navigation

do nothing approach (CSS)select menu (js)toggle menu (js)left/right nav flyout (js)footer only (css)

adapt to touch :

navigationadapt to touch :

responsive navigation patterns

navigationif 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

call to action links

make larger click areasadd padding

adapt to touch :

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>

forms

minimize form inputuse the appropriate virtual keyboard

adapt to touch :

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

tables

try to avoid themoverflow:scroll

adapt to touch :

tables

native scroll inside elements ( )

adapt to touch :

source

overflow: scroll;-webkit-overflow-scrolling: touch; /* native like scroll */

tables

(Zurb.com) (jQuery Mobile)

(bootstrap plugin)

adapt to touch :

responsive tablesreflow table moderesponsive tables

:hover and mouseoverevents

try to avoid themdon't use them for displaying/perfoming criticalinforation/tasks (for example tooltips and dropdownmenus)provide alternatives

adapt to touch :

:hover and mouseoverevents

no silver bullet for thesetry to use similar touch events

adapt to touch :

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 :

use a javascript touchlibrary

lean touch librariesfull touch libraries

lean touch libraries fetures

small footprinteasier to useno UI components, just the touch eventsexcellent solutions for small/middle projects

lean libraries

(modular, works like jQuery)

Hammer.jsQUO.js

full touch libraries fetures

large footprintmore complete solutions (provide UI components andwidgets)excellent solution for biggers projects/apps

full touch libraries

jQuery mobileSencha TouchjQTiUI

best practice

start small, but if you really need something morecomplete, don't hesitate to use it!always try to load only what you really need/use

when in doubt, check howthe "big" players do it

BootstrapFoundationPure

follow the guidelines

create your own!

Android User Interface GuidelinesiOS Human Interface Guidelines

touch devices can do more

call or text

<a href="tel:+306948123456">+306948123456</a><a href="sms:+306948123456">+306948123456</a>

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

be a pioneer

reward modern browser usersuse HTML5 (elements, attributes etc.)use CSS3 (gradients, shadows/text shadows, rgba,transitions, animations, fonts, etc.)SVG

add a feature detection and adaptation strategy ()modernizr

be a pioneer

use , or (or simplyuse a library like )graceful degradation

HTML5 geolocation APIIndexedDB Web SQL Local Storage

lawnchair

congratulations!

make it touch-friendlyenrich the UX on tablets/smartphones

thank you

questions ?

I'm social...

tsevdos.comphrappe.com@tsevdosgithub.com/tsevdoslinkedin.com/in/tsevdosjohn