viejo-topo-jamgo

Diseño mobile-first para una revista on-line

A finales de este año, hemos diseñado y desarrollado un site para el ámbito editorial. Después de analizar los requerimientos del cliente, vimos que la solución no era decidir entre un formato página tipo noticias, o tipo blog, o una web corporativa, o un foro, el producto más bien tenía que ser todo a la vez. En este post explicamos el cómo y el porqué de la solución realizada.

El proyecto ha implicado rehacer completamente el sitio web de El Viejo Topo, (originalmente una revista de temática política en lengua castellana) pero que actualmente diversifica su oferta de contenidos a través de la propia revista, la edición de libros, la organización de actividades, etc.

Y de que trata este post.

Durante el proceso del proyecto han surgido preguntas de muchos tipos: qué tipo de público, qué tipo de modelo de negocio, qué tipo de dispositivos usan los lectores/as, cómo ha de participar el lector/a, cómo han de participar los colaboradores/as, etc. También han surgido otro tipo de cuestiones, mucho más vinculadas al proceso de diseño y a la arquitectura de contenidos de un site de este tipo. Sobre estos aspectos trata este post.

Primera idea: descartamos el ancho fijo para mostrar contenidos.

Los periódicos digitales diseñados antes del 2012 (el año de la explosión del responsive design) suelen estar construidos con maquetas de anchos fijos. Un ejemplo típico puede ser la web de el periódico digital El País.

El problema de esta visión es obvio: una maqueta con un ancho fijo, discriminará la lectura correcta en muchos de los dispositivos actuales, móviles, tabletas, ordenadores de sobremesa, portátiles etc

En este gráfico vemos una aproximación de las resoluciones de pantallas de todos los dispositivos que se conectan a la red durante el año 2015.  Estos datos nos ayudan a decidir que actualmente no tiene sentido diseñar para una medida específica de pantalla.

  • 1366 x 768px > 17,58%
  • 360 x 640px > 7,39%
  • 1920 x 1080px > 7,39%
  • 1024 x 768px > 4,93%
  • 1280 x 800px > 4,51%
  • 768 x 1024px > 3,69%
top 14 screen resolutions from Dec 2014 to Dec 2015
top 14 screen resolutions from Dec 2014 to Dec 2015. Fuente de información: http://gs.statcounter.com/#all-resolution-ww-monthly-201412-201512-bar

Segunda idea: responsive design siempre.

Si queremos realizar un site que permita una lectura cómoda para todo tipo de visitas, tenemos que modelar el contenido para que se adapte a las distintas pantallas.

Por otro lado, no hay que olvidar que Google ayuda a posicionar a los sitios desarrollados con esta técnica, marginando a los sitios que usan diversas versiones de un mismo contenido.

“…Helps Google’s algorithms accurately assign indexing properties to the page rather than needing to signal the existence of corresponding desktop/mobile pages…”

En este link, podemos leer más información sobre los criterios de SEO vinculados a responsive design.

Tercera idea: trabajar a partir de librerías responsive.

Actualmente existen bastantes librerías basadas en técnicas responsive (o front-end frameworks) con las que empezar a diagramar una maqueta en web. En nuestro caso, hemos usado frecuentemente Foundation, (que en su versión 6 ya incorpora el modelo de caja flexbox) por su sencillez.

Librerías responsive y ya está? Nops! Cada proyecto necesita una solución distinta. No podemos creer que una librería (como Foundation) va a servir para maquetas todo tipo de entornos web. Justamente eso es el diseño: encontrar soluciones distintas a problemas distintos. En nuestra opinión, debemos ser capaces de diseñar y diagramar con libertad, arquitectura de contenidos, tipografías y colores, medidas de caja, medianiles, headers, footers, menús, número de columnas, etc seguro que necesitan un tratamiento específico en cada aplicación. Por tanto, Foundation es una especie de plantilla base que vamos a modificar tanto como sea necesario para modelar nuestro site.

Cuarta idea: la experiencia de usuario define el diseño.

Esta mezcla de necesidades vinculadas a la experiencia de usuario y planteamientos técnicos desencadena otra situación: no vale con hacer un diseño más o menos vistoso y pensar que un programador realizará una adaptación responsive. Actualmente el diseño y el desarrollo front-end tienen que entenderse como 2 actividades de un proyecto dependientes entre sí.

Los periódicos on-line.

En una librería podemos encontrar infinidad de publicaciones distintas: periódicos diarios, periódicos semanales (como los dominicales), periódicos temáticos, revistas mensuales, revistas temáticas etc, cada una con su diseño específico según sus necesidades y el público al que van dirigido. Creemos que estos formatos vinculados al papel, no son directamente traspasables al medio on-line. En cierta forma, hay que pensar de nuevo como modelar estos contenidos en los medios digitales. Tampoco sirve con tener el último WP-theme o Drupal theme “news edition” y vendérselo a nuestro cliente. Cada editorial, periódico, revista, tendrá necesidades distintas, tipo de contenido, tipo de público, tipo de modelo de negocio etc, que implicarán un diseño y una solución bien pensada y concreta.

Algunos ejemplos de revistas y periódicos on-line.

Para empezar a trabajar, realizamos una mini investigación para entender el state of the art sobre diseño editorial en web. Este recorrido nos enseña que no hay una solución ganadora, más bien hay diversas soluciones buenas, que se pueden además, mezclar entre ellas. Aquí apuntamos algunas URLs de sites que nos parecen coherentes y bien diseñados.

A. Modelo de cajas adaptables (o el llamado cointainer model).
http://www.wired.com/
http://www.theguardian.com/international
http://ctxt.es/
http://www.lavanguardia.com/

B. Modelo elástico con columnas de texto y cajas.
http://alternativaseconomicas.coop/
http://www.newyorker.com/
http://www.bbc.com/news

C. Modelo de usabilidad inspirado en una app nativa.
http://usbek-et-rica.fr/

D. Modelo híbrido.
https://directa.cat/

Y qué hemos hecho en Jamgo

El camino seguido para desarrollar este site ha sido el de una solución híbrida, es decir, hemos realizado un diseño pensando todo el tiempo en su forma de adaptarse a distintas pantallas, con un ancho de caja flexible, también hemos introducido elementos tipo app (el menú lateral para segmentar contenidos) y hemos segmentado el contenido por bloques con columnas y cajas.

Consultar artículo del proyecto El Viejo Topo