El contenido es lo más importante

With a few exceptions, people visit the Web for its utility, not its beauty. Having a visually appealing site is good, of course, but content is golden. After all, when people enter queries into search engines, they don’t type in aesthetic attributes – they’re looking for information.

Traducción:

Con pocas excepciones, la gente visita la Web por su utilidad, no por su belleza. Tener un sitio visualmente atractivo es bueno, por supuesto, pero el contenido es sagrado. Después de todo, cuando la gente escribe sus preguntas en los motores de búsqueda, no pregunta por los atributos estéticos – está buscando información.

Prioritizing Web Usability. Jakob Nielsen, Hoa Loranger. New Riders, 2006.

Limita el número de tipos de letra y los colores

Limit the number of font styles and colors on your site and apply them consistently. People don’t trust sites that look like ransom notes.

Traducción:

Limita el número de tipos de letra y los colores en tu sitio y aplícalos con consistencia. La gente no confía en los sitios que parecen notas de secuestro.

Prioritizing Web Usability. Jakob Nielsen, Hoa Loranger. New Riders, 2006.

La rejilla infinita, lo que viene después del diseño adaptativo

Muchos seguramente no saben qué es el diseño adaptable. Algunos ya lo están aprendiendo y otros ya lo están aplicando. Parece que es la solución definitiva, y sin embargo, no es así.

En el artículo The Infinite Grid nos presentan el siguiente paso, la rejilla infinita, un diseño basado en una rejilla que puede crecer, crecer y crecer, hasta el infinito.

Bufff, todavía lo estoy intentando asimilar… voy por la mitad del camino hacia el infinito.

El ciclo de vida del desarrollo de un sitio web

En Infographic – A Website Designed, podemos encontrar la siguiente infografía que resume el ciclo de vida del desarrollo de un sitio web.

Evidentemente, este gráfico es una generalización. Según el tipo de sitio web, las diferentes fases o etapas que se plantean (contacto inicial, planificación, contenido, diseño, desarrollo y lanzamiento) tendrán una mayor o menor duración.

Por ejemplo, en este gráfico la fase de diseño es la que mayor duración tiene, seguramente porque el gráfico lo han realizado diseñadores que consideran que en el desarrollo de un sitio web “el diseño es lo más importante”.

El problema de las imágenes en los diseños adaptables

En el artículo El problema de las imágenes responsive en la web y la primera propuesta del W3C para arreglarlo nos explican el problema que tienen las imágenes en los diseños adaptables:

  • mediante CSS, puedo decir que las imágenes no tengan un tamaño fijo sino que tengan un 100% del espacio en el que están contenidas y con un máximo de anchura para que no se pixele en pantallas grandes. Así, se adaptan al espacio disponible, pero en realidad estoy cargando siempre la misma imagen (con todo su peso) y adaptándola visualmente mediante hojas de estilos. No mola. En realidad, el mayor problema de esta solución es que se carga la misma imagen en todos los dispositivos.
  • existen otras opciones, plugins y librerías creadas para intentar solucionar este problema. Por ejemplo, el proyecto Adaptive Images es un script combinado con unas líneas en el fichero .htaccess que redimensiona realmente las imágenes, las cachea en el servidor y las muestra de acuerdo al tamaño de la pantalla del usuario. Mola, pero tampoco mucho: hay que tocar el sistema de ficheros del servidor, utilizar las cookies del navegador, las imágenes dejan de ser un contenido puramente estático…

En el artículo se ofrecen varias soluciones, basadas en el empleo de JavaScript, pero lo más interesante es que nos anuncia que el W3C está trabajando en el desarrollo de una solución: HTML Responsive Images Extension. Parece que es la primera versión de este documento, y está fechado 3 de septiembre de 2012.

Responsive Web Design Testing Tool

Responsive Web Design Testing Tool es una herramienta online gratuita que nos permite comprobar si una página web posee un diseño adaptable (responsive design).

Esta herramienta es muy sencilla de utilizar: se introduce la URL de la página que se quiere verificar si tiene un diseño adaptable y a continuación la carga en diferentes marcos de distintos tamaños que simulan la anchura de pantalla de diferentes dispositivos.

¿Cuánto cuesta un diseño web adaptable?

Recordemos que un diseño web adaptable  es un diseño de un sitio web que se adapta a diferentes dispositivos con el fin de lograr la mejor experiencia en cada uno de ellos.

¿Cuánto cuesta un diseño web adaptable? Está claro que algo costará, casi nada es gratis, pero quizás salga más caro no realizar un diseño web adaptable.

En How much does a responsive web design cost? intentan contestar a esta pregunta y dan algunas pautas para que la realización de un diseño web adaptable no sea muy costoso.