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

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


Uso de imágenes

Se trabaja con los dedos


Uso de imágenes


No a los plugins


Uso de imágenes


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

Usabilidad en formularios

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

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

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/

Diseño y animación en la web movil

Technology

Transcript of Diseño y animación en la web movil