Post on 21-May-2015
Diseño y animación
en la web móvil
Miguel Angel Alvarez
DesarrolloWeb.com
@alvarezmiguelan
1) Importancia de la web móvil
2) Características y usabilidad del diseño móvil
3) Documentos HTML optimizados para móviles
4) Responsive Web Design
5) Recursos útiles: Frameworks y librerías para el
diseño y animación en la web móvil
Mobile Internet, nueva era tecnológica
Fuente: Morgan Stanley
Crecimiento de Internet móvil
Fuente: http://blog.kissmetrics.com/infographics/
Fuente: Morgan Stanley
Sitios web optimizados para la web móvil
Fuente: http://blog.kissmetrics.com/infographics/
Características y usabilidad
del diseño en la web móvil
Fuente: Microsoft Tag
http://gettag.mobi
Usas el móvil mientras que...
Usas el móvil mientras que...
Usas el móvil mientras que...
a) Generalmente está
haciendo otras cosas
b) Ver algo concreto y
tienen menos tiempo para
consumirlo
c) Velocidad de conexión.
Planos de datos limitados
http://www.slideshare.net/bryanrieger/the-end-of-unlimited-bandwidth
Usabilidad en sitios para móviles
http://www.w3.org/TR/mobile-bp/
Usabilidad en sitios para móviles
Pantallas
Usabilidad en sitios para móviles
Pantallas
El foco no es tu sitio
Usabilidad en sitios para móviles
Pantallas
El foco no es tu sitio
Layout específico
Usabilidad en sitios para móviles
Pantallas
El foco no es tu sitio
Layout específico
Navegación
Usabilidad en sitios para móviles
Uso de imágenes
Usabilidad en sitios para móviles
Uso de imágenes
Se trabaja con los dedos
Usabilidad en sitios para móviles
Uso de imágenes
Se trabaja con los dedos
No a los plugins
Usabilidad en sitios para móviles
Uso de imágenes
Se trabaja con los dedos
No a los plugins
Los eventos cambian
Usabilidad en sitios para móviles
http://www.slideshare.net/williamcraig
Usabilidad en formularios
Minimizar la entrada de texto
Minimizar el número de campos
Opción para ver la clave escrita en los campos password
Utilizar campos input del HTML5
Alinear etiquetas arriba
Recordar datos introducidos anteriormente
Obtener automáticamente los datos que se pueda
Usabilidad en formularios
Documentos HTML optimizados para móviles
Documentos HTML optimizados para móviles
<!DOCTYPE html>
<meta charset="utf-8">
Documentos HTML optimizados para móviles
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="MobileOptimized" content="width">
<meta name="HandheldFriendly" content="true" />
<meta name="viewport"
content="width=device-width, initial-scale=1">
Configurar Viewport
Configurar Viewport
• Width
• Height
• initial-scale
• minimum-scale
• maximum-scale
• user-scalable
<meta name = "viewport"
content = "user-scalable=no, width=device-width,
initial-scale=1">
Dos versiones de tu sitio o una única web?
www.jj.com
m.jj.com
www.jj.mobi
Dos versiones de tu sitio o una única web?
Dos versiones de tu sitio o una única web?
Dos versiones de tu sitio o una única web?
Responsive Web Design
Responsive Web Design
1. CSS3 media queries
2. Rejillas fluidas
3. Imágenes fluidas
Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design/
CSS3 Media Queries
<link rel="stylesheet" type="text/css"
href="estilo.css" media="screen" />
@media screen and (min-width:1000px){ … }
@media screen and (max-width:320px){ … }
mediaqueri.es
Less Framework http://lessframework.com/
Frameless http://framelessgrid.com/
Golden Grid http://goldengridsystem.com/
1140 CSS Grid http://cssgrid.net/
Columnal http://cssgrid.net/
320 and up http://stuffandnonsense.co.uk/projects/320andup/
Skeleton http://www.getskeleton.com/
Responsive-Images
https://github.com/filamentgroup/Responsive-Images
src.sencha.iohttp://www.sencha.com/learn/how-to-use-src-sencha-io/
Polyfill Media Queries
css3-mediaqueries-js
http://code.google.com/p/css3-mediaqueries-js/
Respond.js
https://github.com/scottjehl/Respond
Mediatizr
https://github.com/pyrsmk/mediatizr
Screenfly http://quirktools.com/screenfly/
resizeMyBrowser http://resizemybrowser.com/
jQuery Mobile http://jquerymobile.com/
Sencha Touch
http://www.sencha.com/products/touch/
Sencha Animator
http://www.sencha.com/products/animator/
KendoUI Mobile http://jquerymobile.com/
jQTouch http://jqtouch.com/
The M Project http://the-m-project.org/
DHTMLX Touch http://dhtmlx.com/touch/
Wink http://www.winktoolkit.org/
Primero móvil
http://www.netmagazine.com/features/mobile-first
Súbete a este tren
http://www.flickr.com/photos/ejazasi/253032421/