Responsive Web Design and touch devices

From John Tsevdos / @tsevdos

agenda

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

responsive web design principles

  • flexible layout/grid
  • media queries
  • flexible media (images, videos, etc.)

you can get there from here

  • interaction
  • UX

this is a "touch" world

  • fingers !== mouse pointer
  • different mediums
  • different use

"traditional" web design might not work

* at least out of the box

  • navigation
  • call to action links
  • long forms/tables
  • :hover and mouseover events
  • UI components

keep calm and :

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

adapt to touch :

navigation

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

adapt to touch :

navigation

responsive navigation patterns

adapt to touch :

navigation

if you are too lazy to build your own custom navigation try the below links/resources

adapt to touch :

call to action links

  • make larger click areas
  • add padding

adapt to touch :

call to action links

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

adapt to touch :

forms

  • minimize form input
  • use the appropriate virtual keyboard

adapt to touch :

forms

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

adapt to touch :

tables

  • try to avoid them
  • overflow:scroll

adapt to touch :

tables

native scroll inside elements (source)

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

adapt to touch :

tables

adapt to touch :

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

:hover and mouseover events

  • no silver bullet for these
  • try 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 make things worst?
  • are they really working on touch devices?
  • do they respond to touch events?

use a javascript touch library

  • lean touch libraries
  • full touch libraries

lean touch libraries fetures

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

lean libraries

full touch libraries fetures

  • large footprint
  • more complete solutions (provide UI components and widgets)
  • excellent solution for biggers projects/apps

full touch libraries

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

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

follow the 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 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)

be a pioneer

congratulations!

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

thank you

questions ?

rwd developer

I'm social...