Web móvil: ¿inclusiva y accesible?

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 CerfCOMUNICACION

INFORMACION

ECOMMERCE ELEARNING

EBUSINESS

“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 600px1024 x 600px1024 x 768px1182 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 decerradura 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 laInflexibilidad de ancho fijo:

b. El enfoque de laInflexibilidad 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:

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

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("tableta.css") 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!)

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

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 limitacionesque 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 unode 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

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?

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:

Específico para iPhone 4:

La orientación:

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 pixelesa 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:1em/1.5em 'Arial', sans-serif; -webkit-text-size-adjust: none;}@media screen and (max-width:800px) { body { font-size:0.8em; }}@media screen and (max-width:400px) { body { font-size:0.7em; }}

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="foto.png",

sizingMethod="scale");

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

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>

Con JavaScript

Sin JavaScriptConfigurar $mobile_first = FALSEANTES 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)

¿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 Querieshttp://mattkersley.com/responsive/

Galería de sitios con Media Querieshttp://mediaqueri.es

Libro de Ethan Marcottehttp://www.abookapart.com/products/responsive-web-design

Bryan Rieger: Rethinking Mobile Web http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu