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?

3. Vamos a plantearnos algunas preguntas clave sobre el tema de esta charla...

4. 1. Web 2. Móvil 3. Inclusiva 4. Accesible ? Definamos esto...

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

6. “ Web: herramienta fundamental para que la humanidad interactúe, usando sitios web como intermediarios.”

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

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

10. ? Esto también es móvil 1024 x 600px 800 x 600px 1024 x 600px 1024 x 768px 1182 x 864px

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

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

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

16. Ventas de Smartphones HOY superan ventas de PCs:

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

18. Cambió el contexto ¿Qué deberíamos replantearnos?

19. ¿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 ?

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

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

24. 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?)

25. ¿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!)

26. ¿ 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!

27. El precio de no hacer nada... Ojo de cerradura Miniaturización Zoom constante

29. ¿Cuales son los enfoques a evitar en nuestros diseños para hacer webs accesibles incluso para celulares?

30. a. El enfoque de la Inflexibilidad de ancho fijo :

31. b. El enfoque de la Inflexibilidad líquida : ? Logo cortado, columnas donde una palabra supera ancho de columna...

32. Solución: Un enfoque flexible , que considere TODAS las resoluciones y tamaños , pero...

33. ¿Es viable para nosotros hacer un diseño para cada dispositivo?

34. ¿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

35. Sin dudas: es más viable un solo diseño que se adapte Ver ejemplo

36. Este enfoque se llama: Diseño Web “Sensible” o Responsive Web Design

37. ¿Cuáles son los elementos de un Diseño Web “Sensible” ? 1. Maqueta adaptable con Media Queries 2. Grillas flexibles 3. Imágenes adaptables

38. 1. Maqueta adaptable con Media Queries Un mismo HTML, distintas hojas CSS

39. Se trata de vincular distintas hojas de estilos: <link href=“estilo_base.css”> <link href=“celulares.css”> ...con Condiciones

40. ¿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

41. ¿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).

42. 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) ;

43. Veamos esto en acción: Galería de sitios que usan Media Queries http://www.mediaqueri.es

44. Pero, atención! Existen dos enfoques : 1) PC primero ← no funcionó! 2) Móvil primero ← actual

46. ¿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. ?

47. 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)

49. ¿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.

50. Concepto Mobile First: Luke Wroblewski

51. Quitemos las limitaciones que nosotros mismos impusimos. Cambiemos nuestra metodología de diseño . Móvil primero, texto primero.

52. ¿Por dónde empiezo el proceso de diseño si quiero aplicar Media Queries? Por el principio: el texto .

53. Pregunta al paso : ¿Denominador común de una pizza? ¿Ananá? ¿Anchoas? ¿Morrones? O la MASA ...

54. ¿Denominador común de una Web? ¿Flash? ¿Imágenes? ¿Videos? O el TEXTO ...

55. 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!

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

57. Base: sin estilos

58. Proceso de texto a maqueta : 1. Diseñar wireframes 2. Decorarlos en Photoshop 3. Codificar el sitio con HTML & CSS

59. 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”)

61. Ejemplo:

62. 1. Wireframes Dos por rango a cubrir (uno al mínimo y otro al máximo ancho definido)

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

64. Orden de creación 1. Celulares antiguos (128px) 2. iPhone y smartphones (320px) 3. iPad y otras tabletas (480px / 768px) 4. PC (+1024px)

65. No queremos adaptación “a los saltos”... Ver ejemplo

66. Ajustar Navegación:

67. Flotar más y más columnas...

68. 2. Maquillar los Wireframes

69. 3. Codificar CSS con Media Queries

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

72. 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!)

73. ¿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

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

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

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

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

82. 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%

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

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

85. 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 )

86. Evitar problemas en Explorer: .imagen{ background: none; /* quitamos otros */ filter: progid:DXImageTransform.Microsoft. AlphaImageLoader(src=&quot;foto. png &quot;, sizingMethod=&quot;scale&quot; ); }

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

90. www.adaptive-images.com 850Kb -> 210Kb -> 117Kb -> 74Kb -> 30Kb PHP & GD Library + .htaccess + <script> (opcional)

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

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

94. 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” */ }

95. Videos adaptables FitVids.js (plugin para JQuery) https://github.com/davatron5000/FitVids.js Videos elásticos: http://webdesignerwall.com/tutorials/css-elastic-videos

96. 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)

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

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

99. Web móvil: ¿inclusiva y accesible? Hernán Beati