responsive web design and touch devices
DESCRIPTION
This presentation was given at JoomlaDay 2013 (http://joomladay.gr/) - 15/6/2013.TRANSCRIPT
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...
[email protected]/tsevdoslinkedin.com/in/tsevdosjohn