Diseño y animación en la web movil

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

Fuente: http://blog.kissmetrics.com/infographics/

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

 Pantallas

 Pantallas
 El foco no es tu sitio

 Pantallas
 Layout específico

 Pantallas
 Layout específico
 Navegación

 Uso de imágenes

 Se trabaja con los dedos

 No a los plugins

 No a los plugins
 Los eventos cambian


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

Documentos HTML optimizados para móviles

<!DOCTYPE html>

<meta charset="utf-8">

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

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){ … }

Less Framework http://lessframework.com/

Frameless http://framelessgrid.com/

Golden Grid http://goldengridsystem.com/

1140 CSS Grid 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.io
http://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/

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/

Diseño y animación en la web movil

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Diseño y animación en la web movil

Ähnlich wie Diseño y animación en la web movil (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (11)

Diseño y animación en la web movil