• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Web móvil: ¿inclusiva y accesible?
 

Web móvil: ¿inclusiva y accesible?

on

  • 4,213 views

Diapositivas de la charla que dicté en la Escuela Da Vinci (Buenos Aires, Argentina) durante el Día Mundial de la Usabilidad 2011. ...

Diapositivas de la charla que dicté en la Escuela Da Vinci (Buenos Aires, Argentina) durante el Día Mundial de la Usabilidad 2011.
¿Es posible adaptar nuestros diseños para hacerlos usables y accesibles en cualquier dispositivo?

Statistics

Views

Total Views
4,213
Views on SlideShare
4,211
Embed Views
2

Actions

Likes
2
Downloads
99
Comments
3

2 Embeds 2

https://si0.twimg.com 1
https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

13 of 3 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • hola y gracias
    te comento que por alguna razon no puedo o detecta mi instruccion de link de hoja de estilo
    mira lo tengo asi


    pero no funciona cuando lo veo en la version movil, puedes orientarme

    gracias

    por cierto excelente trabajo
    Are you sure you want to
    Your message goes here
    Processing…
  • Hola jolth! Me alegra que te hayan servido las diapositivas! Pero no entiendo tu comentario: en el ejemplo de la diapositiva 80 dice exactamente eso, que 200 / 960 por 100 es 20.83 %... ¿cuál es tu recomendación? Un saludo!
    Are you sure you want to
    Your message goes here
    Processing…
  • Hola Hernan, te agradezco por las diapositivas no podía ser mejor. Solo tengo una recomendación para la 'fórmula mágica' en la diapositiva 80.

    (200.0 / 960.0) * 100 = 20.83

    Gracias.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Web móvil: ¿inclusiva y accesible? Web móvil: ¿inclusiva y accesible? Presentation Transcript

    • Web móvil: ¿inclusiva y accesible?
      • Hernán Beati
        • @hernan_beati
    • Hernán Beati
      • Desarrollador Web (desde el siglo de las tablas)
      • Autor del libro PHP, Creación de páginas Web dinámicas (Alfaomega-ITMaster) y actualmente escribiendo mi 2do libro: HTML5 & CSS3
      • Director de
      • Docente en:
    • Vamos a plantearnos algunas preguntas clave sobre el tema de esta charla...
    • 1. Web 2. Móvil 3. Inclusiva 4. Accesible ? Definamos esto...
    • 1. ¿Qué es la Web? “ Es muy difícil suprimir las voces de mil millones de individuos...” Vinton Cerf COMUNICACION INFORMACION ECOMMERCE ELEARNING EBUSINESS OCIO
    • “ Web: herramienta fundamental para que la humanidad interactúe, usando sitios web como intermediarios.”
      • Hasta hace muy poco, la web era rígida
      • Creábamos sitios web para una sola resolución
        • 1995: 640 x 480px
        • 2000: 800 x 600px
        • 2005: 1024 x 768px
      • Y si el ancho era líquido (en porcentajes ) considerábamos que el sitio se adaptaría a cualquier resolución existente en una PC...
    • Pero cambió el contexto : la masificación de los móviles convirtió en obsoletas a nuestras Webs rígidas . Porque se miniaturizan y se vuelven ilegibles y casi imposibles de navegar en móviles...
    • 2. ¿Qué es Móvil? 128 x 160px 320 x 240px 480 x 320px 800 x 480px 768 x 1024px + 1024 x 768px 1536 x 2048px + 2048 x 1536px 800 x 600px + 1200 x 824px 480 x 272px
    • ? Esto también es móvil 1024 x 600px 800 x 600px 1024 x 600px 1024 x 768px 1182 x 864px
    • O mejor... ¿qué “no” es Móvil? 800 x 600px, 1024 x 768px, 1280 x 768px, 1600 x 1200px, 1920 x 1080px, 2560 x 1600px y MAS...
    • ¿Cuál es el límite de lo “móvil”?
      • Celulares (“antiguos” y Smartphones)
      • iPhone
      • iPod y Consolas portátiles de videojuegos
      • iPad y tabletas similares
      • Kindle y lectores de ebooks con WiFi o 3G
      • Netbooks (no siempre portátil)
      • Notebooks (no siempre portátil)
      • ¿All in One c/pantalla touch? (portátil de cabotaje)
    • Los atributos de lo “móvil”
      • Diversidad de tamaños y resoluciones de pantalla
      • Diversidad de navegadores y versiones
      • Plugins no siempre disponibles (Flash)
      • Poca velocidad de procesamiento
      • Tiempo limitado de uso, apuro por finalizar tarea
      • Conexión a internet intermitente y cara
      • Ah... ¿movilidad? No necesariamente (84% usa móviles en casa, 64% en trabajo).
      Pero... hay millones de PCs con esos mismos atributos!!!
    • Algunos datos (a Octubre de 2011) 2.095.006.005 de personas utilizan la Web “fija” (30.2% de la humanidad) 5.300.000.000 de personas tienen un celular (77% de la humanidad) 1.300.000.000 de personas ya usan Web Móvil (+18% de la humanidad) 33% de ellos, “solo” usan la Web Móvil (no usan PCs!) Fuente: http://mobithinking.com/mobile-marketing-tools
    • Más del 85% de los Celulares vendidos entre 2010 y 2011 navegan la Web Y no son iPhone... (menos del 4% son iPhone) La tendencia a futuro es clara:
    • Ventas de Smartphones HOY superan ventas de PCs:
    • ...y Tabletas superan a Netbooks 1er trimestre de 2011: 6,4 millones Tabletas – 8,4 millones Netbooks 2do trimestre de 2011: 13,6 millones Tabletas – 7,3 millones Netbooks Tendencia para fin de 2011: 60 millones Tabletas – 32 millones Netbooks Fuente: http://www.clarin.com/internet/tabletas-destrozan-mercado-netbooks_0_578942373.html
    • Cambió el contexto ¿Qué deberíamos replantearnos?
    • ¿Existe una web “Móvil”, independiente de “la otra”? ¿o TODA web debería estar preparada “para Móviles”... ...porque será accedida desde una diversidad de dispositivos , usados por millones de personas ?
    • Repasemos: 3. ¿Qué es inclusivo? Lo contrario a exclusivo
      • "El diseño de productos y entornos con el fin de que sean usables por el máximo número de personas posible." Conell
    • La intención inclusiva de un diseño se decide a nivel de objetivos del proyecto, porque condiciona cuáles casos de uso y contextos se tomarán en cuenta y cuáles NO. Y lo inclusivo obliga a lo accesible
    • Repasemos también: 4. ¿Qué es accesible?
      • Medida (no booleana, sino escala gradual) de la posibilidad de acceso a los contenidos y las tareas de un sitio web, superando limitaciones de tipo:
      • Visual
      • Auditivo
      • Motriz
      • Cognitivo
      • ...y TECNICO! = DISPOSITIVOS (móviles, antiguos, especiales, etc.)
    • Entonces, la Web Móvil, ¿es inclusiva y accesible? "La accesibilidad no puede depender de los dispositivos, a menos que consideres el no tener un iPhone como una discapacidad " Martín Szyszlican
    • Si el contexto cambió , y las regulaciones todavía no (WCAG, etc.) seamos parte del cambio , y evitemos YA los problemas de accesibilidad propios del nuevo contexto , aunque no estemos “obligados” (aún) a hacerlo. (¿alguien del W3C en el público?)
    • ¿Cómo estamos creando sitios “para móviles” hoy? A. Programando Aplicaciones para cada dispositivo (caro, solo para grandes empresas, y “exclusivo”: solo se hace para “algunos” dispositivos -iPad, iPhone, Blackberry-) B. Creando una Versión Móvil de un sitio web entero “simplificado” (duplicación de esfuerzos, pobreza de resultados, uniformidad, carpeta /movil/ como “ghetto” que no permite compartir URLs) C. O no hacemos Nada , y dejamos que el usuario móvil se frustre... (¡y esto es lo mayoritario!)
    • ¿ Quién puede crear sitios web “para móviles”? A. Programadores de Aplicaciones (Objective-C, .Net, Java) B. Programadores Web (PHP y MySQL) C. Diseñadores Web (HTML5 y CSS3) ¿No hacemos nada? -> ¡OPORTUNIDAD!
    • El precio de no hacer nada... Ojo de cerradura Miniaturización Zoom constante
      • Clientes perdidos
      • Personas que no se comunican
      • Gente que no puede informarse
      • Alumnos que no estudian
      • Menos oportunidades de negocios
      • Niños que no juegan
      • Diseñadores que FRACASARON
      El precio de la INACCESIBILIDAD
    • ¿Cuales son los enfoques a evitar en nuestros diseños para hacer webs accesibles incluso para celulares?
    • a. El enfoque de la Inflexibilidad de ancho fijo :
    • b. El enfoque de la Inflexibilidad líquida : ? Logo cortado, columnas donde una palabra supera ancho de columna...
    • Solución: Un enfoque flexible , que considere TODAS las resoluciones y tamaños , pero...
    • ¿Es viable para nosotros hacer un diseño para cada dispositivo?
    • ¿O un solo diseño que sea flexible y se adapte? "En lugar de crear diseños desconectados , cada uno adaptado a un dispositivo o navegador, deberíamos tratarlos como facetas de la misma experiencia. En otras palabras, podemos diseñar sitios que no sólo sean más flexibles , sino que puedan adaptarse al medio donde están siendo utilizados." Ethan Marcotte
    • Sin dudas: es más viable un solo diseño que se adapte Ver ejemplo
    • Este enfoque se llama: Diseño Web “Sensible” o Responsive Web Design
    • ¿Cuáles son los elementos de un Diseño Web “Sensible” ? 1. Maqueta adaptable con Media Queries 2. Grillas flexibles 3. Imágenes adaptables
    • 1. Maqueta adaptable con Media Queries Un mismo HTML, distintas hojas CSS
    • Se trata de vincular distintas hojas de estilos: <link href=“estilo_base.css”> <link href=“celulares.css”> ...con Condiciones
    • ¿Qué condición determina “cuál” hoja CSS aplicará un navegador? El tamaño (de viewport o de pantalla ) max-width: x Ancho del Viewport mayor o igual a x min-width: x Ancho del Viewport menor o igual a x max- device -width: x Ancho de Pantalla mayor o igual a x min- device -width: x Ancho de Pantalla menor o igual a x
    • ¿Dónde defino eso?: En tres posibles lugares: 1. Dentro del código HTML: <link href=&quot; tableta.css &quot; rel=&quot;stylesheet&quot; media=&quot;screen and (min-width:480px) &quot;> En “tableta.css”, adaptamos el diseño (cambiando cantidad de columnas, ajustando tamaños).
    • También podemos crear “zonas” en un archivo CSS : @media screen and (min-width:480px) { .columnas { float: left; } } O usar @import desde una hoja maestra: @import url(&quot;tableta.css&quot;) screen and (min-width: 480px) ;
    • Veamos esto en acción: Galería de sitios que usan Media Queries http://www.mediaqueri.es
    • Pero, atención! Existen dos enfoques : 1) PC primero ← no funcionó! 2) Móvil primero ← actual
    • a. Enfoque obsoleto (no sirve!)
      • Partir del sitio “grande” (PC) y aplicar Media Queries para móviles (problema: no todos los móviles entienden Media Queries... y se quedan con diseño “grande”!)
      ?
    • ¿Cómo se hacía? (no lo hagan!) <link href=&quot; pc.css &quot; rel=&quot;stylesheet&quot; media=&quot;all&quot;> <link href=&quot; movil.css &quot; rel=&quot;stylesheet&quot; media=&quot;screen and ( max -width:768px)&quot;> Si el navegador del celular no reconoce media queries, solo lee “pc.css”... y se bajará fotos gigantes, maquetará columnas flotadas de pocos “milímetros” de ancho, etc. ?
    • Otro error muy común de este enfoque: Ocultar contenidos en versión móvil!! -No usar display:none ni visibility:hidden ni text-indent:-9999px Porque el contenido será transferido igual (consumiendo tiempo y cuota de transferencia)
    • b. Enfoque actual (este sí!)
      • Enfoque actual, “Móvil primero”: comenzamos con textos estructurados para quienes no soportan Media Queries.
      • Luego, usando min -width, apuntamos a “rangos” de tamaños (no dispositivos específicos), cada vez más grandes.
    • ¿Cómo se hace? (háganlo así!) <link href=&quot; movil.css &quot; rel=&quot;stylesheet&quot; media=&quot;all&quot;> <link href=&quot; mas-grande.css &quot; rel=&quot;stylesheet&quot; media=&quot;screen and ( min -width:481px)&quot;> Si el navegador del celular no reconoce media queries, se queda con “movil.css”, y... quedó diseñado.
    • Concepto Mobile First: Luke Wroblewski
    • Quitemos las limitaciones que nosotros mismos impusimos. Cambiemos nuestra metodología de diseño . Móvil primero, texto primero.
    • ¿Por dónde empiezo el proceso de diseño si quiero aplicar Media Queries? Por el principio: el texto .
    • Pregunta al paso : ¿Denominador común de una pizza? ¿Ananá? ¿Anchoas? ¿Morrones? O la MASA ...
    • ¿Denominador común de una Web? ¿Flash? ¿Imágenes? ¿Videos? O el TEXTO ...
    • Tenemos la oportunidad de enfocar nuestros textos Si pensamos ocultar un texto en la versión móvil, posiblemente tampoco sea tan importante en la versión “no móvil”... ¡quitémoslo!
    • Una vez marcados los textos semánticamente (con h1, h2, p, ul con li), marcamos las secciones con article, section, aside y nav. ¡Ya tenemos la versión BASE! La usarán celulares de 128px sin soporte para Media Queries, y lectores de pantalla.
    • Base: sin estilos
    • Proceso de texto a maqueta : 1. Diseñar wireframes 2. Decorarlos en Photoshop 3. Codificar el sitio con HTML & CSS
    • Punto clave a considerar: -Pensar contenidos en franjas (secciones, bloques) ¿Puedo “ horizontalizar ” las secciones, y los bloques dentro de ellas? (pasarlos de “apilados” a “flotados”)
    •  
    • Ejemplo:
    • 1. Wireframes Dos por rango a cubrir (uno al mínimo y otro al máximo ancho definido)
    • Consejo: Empezar por la Home Recordar que cada uno de estos bocetos (empezando del más angosto) deberá ensancharse hasta el tamaño del siguiente ...
    • Orden de creación 1. Celulares antiguos (128px) 2. iPhone y smartphones (320px) 3. iPad y otras tabletas (480px / 768px) 4. PC (+1024px)
    • No queremos adaptación “a los saltos”... Ver ejemplo
    • Ajustar Navegación:
    • Flotar más y más columnas...
    • 2. Maquillar los Wireframes
    • 3. Codificar CSS con Media Queries
    • <link rel=&quot;stylesheet&quot; href=&quot;smartphone.css&quot; media=&quot;only screen and (min-device-width : 320px) and (max-device-width : 480px)&quot;> <link rel=&quot;stylesheet&quot; href=&quot;smartphone-landscape.css&quot; media=&quot;only screen and (min-width : 321px)&quot;> <link rel=&quot;stylesheet&quot; href=&quot;smartphone-portrait.css&quot; media=&quot;only screen and (max-width : 320px)&quot;> <link rel=&quot;stylesheet&quot; href=&quot;ipad.css&quot; media=&quot;only screen and (min-device-width : 768px) and (max-device-width : 1024px)&quot;> <link rel=&quot;stylesheet&quot; href=&quot;ipad-landscape.css&quot; media=&quot;only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)&quot;> <link rel=&quot;stylesheet&quot; href=&quot;ipad-portrait.css&quot; media=&quot;only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)&quot;> <link rel=&quot;stylesheet&quot; href=&quot;widescreen.css&quot; media=&quot;only screen and (min-width : 1824px)&quot;> <link rel=&quot;stylesheet&quot; href=&quot;iphone4.css&quot; media=&quot;only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5)&quot;> Andy Clarke: http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries Antes: base.css
    • La única decisión es entre cuáles rangos estirar
      • “ Un” ejemplo (y no “el” ejemplo):
      • 128 hasta 319 (sin estilo)
      • 320 hasta 479
      • 480 hasta 767
      • 768 hasta 1023
      • 1024 hasta 1824 (PC)
      • Más de 1825 (Pantalla gigante)
    • Considerar el Viewport Tamaño de “ventana” del navegador En PC, es menor que la pantalla. En móvil, es mayor . Ejemplo: Safari asigna 980px de ancho y hace zoom para mostrar lo que supone una web hecha para PC (y en el 99% de los casos, acierta!)
    • ¿Solución? <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;/> Ahora, ya no lo lleva a 980px, lo deja en 320px que es el ancho del dispositivo. Referencia: http://davidbcalhoun.com/2010/viewport-metatag
    • Los iPhone 4... Los iPhone 4 miden 640 x 960px, pero a 326 dpi Sin embargo, detectan esto: <link media=&quot;only screen and ( max-device-width: 480px )&quot; href=&quot;iphone.css&quot; rel=&quot;stylesheet&quot; />
    • Específico para iPhone 4: <link media=&quot;all and ( -webkit-min-device-pixel-ratio:2 )&quot; href=&quot;iphone4.css&quot; rel= &quot;stylesheet&quot; />
    • La orientación: <link rel=&quot;stylesheet&quot; media=&quot;all and ( orientation:portrait )&quot; href=&quot;vertical.css&quot; /> <link rel=&quot;stylesheet&quot; media=&quot;all and ( orientation:landscape )&quot; href=&quot;horizontal.css&quot; />
    • Navegadores con Media Queries Firefox 3.5 y + Google Chrome (todos) Safari 3 y + Opera 9.5 y + Internet Explorer 9 y + ¿Y los demás? -> Polyfills + “Móvil primero” ¿Y los lectores de pantalla? -> No aplica, leen HTML
    • Compatibilizadores / Shims / Polyfills https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
      • CSS3.mediaqueries-js
      • Respond
      • matchMedia
      • jQuery Media Helpers
      • Adapt.js
    • 2. Grillas flexibles
      • Usar anchos de contenedor y de columnas en porcentajes , para que el diseño se mantenga
      • PROPORCIONAL
      • dentro del rango de ancho mínimo y máximo definido en las Media Queries del punto anterior.
      • Ver ejemplo
    • Fórmula mágica (o casi)
      • Tamaño Elemento / Tamaño Contexto
      • Ejemplo:
      • 200px / 960px = 0,2083
    • De pixeles a porcentajes (usar calculadora)
      • Tamaño Elemento / Tamaño Contexto
      • Ejemplo de 3 columnas para fotos en zona de 480px:
      • 150px / 480px = 0,3125 31.25%
    • Márgenes y paddings flexibles 1. Margen: el contexto es el ancho del elemento padre (contenedor): Ej. 24px / 900px = 0,02666 = 2,66% 2. Padding: el contexto es el ancho del elemento mismo al que lo aplico: Ej. 24px / 200px = 0,12 = 12%
    • body { font:1 em /1.5em 'Arial', sans-serif; -webkit-text-size-adjust: none; } @media screen and (max-width:800px) { body { font-size:0.8 em ; } } @media screen and (max-width:400px) { body { font-size:0.7 em ; } } Demo: http://www.alistapart.com/d/responsive-web-design/ex/ex-article.html Tipografía, siempre en EM
    • Si en cada hoja CSS condicional, apuntamos a distintas imágenes (de distintos tamaños) , no tendremos problemas con background-image 3. Imágenes adaptables
    • Haciendo flexible la imagen dentro del rango mínimo y máximo: img, video, object { max-width:100% ; } Para Explorer 6 y 7 (en hoja aparte): img, video, object { width :100%; } (Cuidar ancho del elemento contenedor )
    • Evitar problemas en Explorer: .imagen{ background: none; /* quitamos otros */ filter: progid:DXImageTransform.Microsoft. AlphaImageLoader(src=&quot;foto. png &quot;, sizingMethod=&quot;scale&quot; ); }
    • Pero, ¿qué hacemos con el único src posible dentro de las etiquetas <IMG> ? No soluciona nada el “no darle ancho” a la imagen, porque entonces deberíamos crearla en Photoshop a su mayor ancho (por ej. 900px) y se transferiría entera, a pesar de mostrarla luego a 400 o 200px de ancho en pantallas chicas.
    • Objetivos a lograr
      • Evitar peso y tiempo de descarga innecesario
      • Usar distintas imágenes para distintos dispositivos, pero generadas automáticamente.
      • Estirar “de a rangos” cada imagen
      ?
    • Técnicas existentes
      • Cookies y orden “actual” de procesamiento del navegador. Problema: las primeras imágenes descargadas antes de definir la cookie no se adaptan.
      • Técnicas con uso de <noscript> . Funcionan, aunque no es semántico (el marcado ya no refleja los contenidos). Dependen de JavaScript activado.
      • Detección de dispositivo del lado del servidor. Es semántica, y a futuro puede eliminarse sin tocar el marcado.
    • www.adaptive-images.com 850Kb -> 210Kb -> 117Kb -> 74Kb -> 30Kb PHP & GD Library + .htaccess + <script> (opcional)
    • Configuración de archivo PHP
      • $resolutions (array de tamaños)
      • $jpg_quality (de 0 a 100%)
      • $cache_path (ruta a la carpeta)
      • $watch_cache (TRUE o FALSE)
      • $sharpen (TRUE aplica sharpen a reducciones)
      • $browser_cache (default: una semana)
      • $mobile_first (TRUE: si no hay cookies envía menor tamaño, FALSE envía mayor tamaño)
    • Configuración de .htaccess <IfModule mod_rewrite.c> Options +FollowSymlinks RewriteEngine On # Carpetas de fotos que no se redimensionan, una por línea: RewriteCond %{REQUEST_URI} ! fotos-intocables # Enviamos al script PHP el resto de las fotos: RewriteRule .(?:jpe?g|gif|png)$ adaptive-images.php </IfModule>
    • <script>document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';</script> Con JavaScript Sin JavaScript Configurar $mobile_first = FALSE ANTES de links a estilos, agregar: <style> @media only screen and (max-device-width: 479px) { html { background-image:url( ai-cookie.php?maxwidth=479 ); } } @media only screen and (min-device-width: 480px) and (max-device-width: 767px) { html { background-image:url( ai-cookie.php?maxwidth=767 ); } } @media only screen and (min-device-width: 768px) and (max-device-width: 991px) { html { background-image:url( ai-cookie.php?maxwidth=991 ); } } @media only screen and (min-device-width: 992px) and (max-device-width: 1381px) { html { background-image:url( ai-cookie.php?maxwidth=1381 ); } } @media only screen and (min-device-width: 1382px) { html { background-image:url( ai-cookie.php?maxwidth=unknown ); } } </style>
    • Bordes de imagen adaptables (en porcentajes) img{ max-width:98%; padding:1%; /* Despega 1% de cada lado, y completa el 100% */ background:#000; /* Color del borde “falso” */ }
    • Videos adaptables FitVids.js (plugin para JQuery) https://github.com/davatron5000/FitVids.js Videos elásticos: http://webdesignerwall.com/tutorials/css-elastic-videos
    • Es escalable (sin pixelarse!) y degrada en imagen en Explorer <= 8 (resto de navegadores ya lo soportan) <object data=&quot; imagen. svg &quot; type=&quot;image/svg+xml&quot;> <img src=&quot;imagen-b.png&quot; alt=&quot;Texto alt&quot; width=&quot;144&quot; height=&quot;144&quot; /> </object> ¿El futuro? SVG (Scalable Vector Graphics)
    • Conclusión: Es posible crear Webs Móviles (y “no móviles” también) inclusivas y accesibles, previendo diseños consistentes y compatibles con distintos dispositivos y resoluciones, usando Media Queries , grillas flexibles e imágenes adaptables .
    • Recursos: Emulador de Media Queries http://mattkersley.com/responsive/ Galería de sitios con Media Queries http://mediaqueri.es Libro de Ethan Marcotte http://www.abookapart.com/products/responsive-web-design Bryan Rieger: Rethinking Mobile Web http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
    • Web móvil: ¿inclusiva y accesible? Hernán Beati