Web móvil adaptada o específica

CSS-based responsive web design is a great tool for adapting a layout to different screens, period. It is a tool, not an end. In some cases, where a site’s content should be the same from device to device (a blog, for example), responsive web design is enough for the job. More complex services, though, may need much more, including different content, tools, and services.

Yes, friends: it depends.

What’s it depend on? Certainly the needs of the audience. But as with so many things, it often depends a great deal on business considerations, too.

Josh ClarkResponsive Web Design or Separate Mobile Site? Eh. It Depends.

Cita extraída de un artículo que resume una animada discusión entre los partidarios del responsive web design (muy resumido, el uso de Media Query para adaptar la presentación de una web a los diferentes dispositivos) y los que van más allá de la mera presentación de contenidos: optimizar las experiencias según el contexto de uso y de usuarios.

Nada nuevo, en definitiva. Aunque técnicamente ahora es posible obtener mejores resultados que hace no muchos años: hay ejemplos más o menos elaborados en mediaqueri.

Ya puestos, otro artículo que nos puede ayudar a ampliar nuestra perspectiva histórica es New to Mobile? Welcome to the One Web Debate.

Vínculos en aplicaciones móviles para iOS

Ahora mismo estoy cacharreando un poco con aplicaciones móviles para iOS.

Se puede hacer una aplicación web para iOS con HTML, CSS y Javascript, y se indica mediante algunos elementos meta. Aquí va un pequeño resumen:

  • <meta name="apple-mobile-web-app-capable" content="yes" /> Da la opción al dispositivo iOS añadir a la pantalla de inicio, junto con el resto de las aplicaciones, un acceso directo a una aplicación web. Ojo que no es lo mismo que un acceso directo que abre Safari con la interfaz habitual del navegador.
  • <meta name="apple-mobile-web-app-status-bar-style" content="black" /> Permite quitar de la interfaz los elementos propios del navegador (la barra de la dirección y el buscador arriba, y la barra de navegación, favoritos e historial abajo). Sólo deja visible la barra de estado (cobertura, hora y batería). Tiene tres posibles valores default (de azul iOS), black y black-translucent.
  • <link rel="apple-touch-icon" href="touch-icon-iphone.png" /> permite elegir el icono (57×57 en formato PNG) para la pantalla de inicio. Sirve tanto para aplicaciones web como para simples accesos directos a una página web.
  • <link rel="apple-touch-startup-image" href="/startup.png" /> incluye una imagen previa a la aplicación web.

No hablo del famoso viewport, aunque personalmente echo de menos la posibilidad de usar una etiqueta para que mantenga la proporción en las vistas vertical y apaisada.

Bueno, siguiendo estas claras instrucciones – risas de fondo – tenemos los primeros elementos para hacer una aplicación web. Qué modernos.

Y ahora viene una curiosidad, que puede tener su sentido, pero resulta chocante: cuando tocamos un vínculo, abre una nueva instancia del navegador, pero esta vez aparece los elementos de la interfaz “normal” (barra de estado, además de la barra de la dirección y la de navegación-favoritos). ¿Qué ocurre? ¿Qué hemos hecho mal?

La respuesta es… nada. Simplemente los vínculos no funcionan como tales en una aplicación web dentro de iOS. Actúan como una especie de window.open. ¿Solución? Un poco de javascript. Aquí va un ejemplo de jquery:


$(document).ready(function() {
	var deviceAgent = navigator.userAgent.toLowerCase();
	var ios = deviceAgent.match(/(iphone|ipod|ipad)/);
	if (ios) {
		$("a").click(function(event) {
			event.preventDefault();
			var direccion=$(this).attr("href");
			location.href=direccion;
		});
	};
});

Por si el código no resulta demasiado trivial, mediante el agente de usuario discriminamos a los dispositivos con sistema operativo iOS, eliminamos el comportamiento por defecto de los vínculo, y le añadimos la url del href a un location.href de javascript que sí funciona. En este caso podríamos tener una aplicación web compuesta por varias páginas HTML.

Teniendo en cuenta lo anterior, cabría preguntarse:

  • ¿Quieres un acceso directo a la página de inicio definiendo la imagen tú mismo (y que no salga un pantallazo)? Usa apple-touch-icon.
  • ¿Quieres que no se vea la barra de la dirección inicialmente? Prueba con window.scrollTo(0,1); e inicialmente no se verá (aunque estará presente).
  • ¿Quieres reutilizar una web como una aplicación web en iOS (más cool) con su imagen de bienvenida – tan útil ella -, y sin elementos de la interfaz en el navegador? Pues mucho cuidado con los vínculos, y recuerda el código anterior para los vínculos internos de la aplicación web. No quedaría bien que al tocar un vínculo, se abra una nueva ventana. Nada bien.

Cambiando un poco de tema, ya hay bastantes voces (con más o menos autoridad) que dicen que las aplicaciones desarrolladas específicamente para un sistema operativo (Android, iOS, Blackberry, Symbian, Windows Phone,…) están viviendo su momento de gloria ahora, y en unos años, será sustituído por aplicaciones webs (teoricamente menos tiempo de desarrollo, y actualizaciones más rápidas). Todo depende de los avances en las aplicaciones web móviles y su implementación (ver Standards for Web Applications on Mobile: February 2011 current state and roadmap).Ya veremos.

Usuarios

Me gusta tumblr. Un gestor de contenidos sencillo y peligrosamente adictivo: la facilidad para crear una entrada, seguir otros blogs (¿se dice así todavía?, ¿existen los blogs?), añadir un artículo, cita, video o foto a tu lista de favoritos o publicarla en tu blog es sorprendente.

Más allá de sus virtudes, me gustaría mencionar Things Real People Don’t Say About Your App, una pequeña joya humorística sobre usuarios y sus comentarios. Porque como todo el mundo sabe, los usuarios siempre dicen la verdad en los test de usuarios, y no es necesario interpretar lo que dicen 🙂 La combinación de citas reales con fotografías de usuarios reales es dificilmente superable.

Algunos ejemplos:

Un poco de tipografía

95% of the information on the web is written language. It is only logical to say that a web designer should get good training in the main discipline of shaping written information, in other words: Typography.

Oliver ReichensteinWeb Design is 95% Typography

Echando un poco la vista atrás – basta un simple vínculo -, uno se encuentra con una frase como la anterior publicada en el 2006 (recordada, eso si, por twitter hoy mismo). Y yo soy uno de esos que no han intentado profundizar en algo tan importante, hasta hace no mucho tiempo. Y con la mala suerte de que el libro que me compré, no me ha servido para mis propósitos: un libro para introducirse en el arte y la ciencia de la tipografía (hablo de “¿Qué ocurre mientras lees? Tipografía y legibilidad.” de Gerard Unger). Tal vez con el próximo libro tenga más suerte (¿sugerencias?).

Pero bueno, hay algunos recursos que me parecen útiles y aquí los dejo, para que no se me olviden.

  • Thinking with Type, con cuatro apartados (letras, texto, rejilla y extras). Información relativamente breve y con posibilidad de descargar bastantes secciones en ficheros pdf para observar los detalles con mejor resolución.
  • The Elements of Typographic Style Applied to the Web . El título lo dice todo, tipografía práctica para la web.
  • typetester, una herramienta para comprobar a la vez tres fuentes diferentes, permitiéndose variar algunas características como el color, alineación, separación entre letras,…
  • Periodic Table of Typefaces, es una forma bastante curiosa y desde mi punto de vista lograda, de mostrar las fuentes tipográficas más populares con información extra, como el año de creación, el autor y familia. En forma de tabla periódica.
  • Typography Deconstruction Un fichaje de última hora a la lista de recursos, recomendado por un compañero de trabajo y que se encarga de analizar los elementos básicos en el diseño de fuentes de forma clara y muy visual. Me gusta mucho.
  • The Elements of Typographic Style Applied to the Web: The Elements of Typographic Style de Robert Bringhurst, aplicado a la web. Creo que es un recurso muy recomendable.