Responsive images approach

There has been a lot of discussion of the best way to implement responsive images these days.

Jason Grisby points out another problem with the browser implementation of the image pre-fetch functionality. Or how the browser will be able to fetch the correct image if it doesn’t know the layout yet.

So I have a little idea I want to share.

What about defining our desired breakpoints on the html tag:

<html respbp="320,480,960,1000">

Then we just tell the browser what images need to be treated as responsive

<img src="photo-320.jpg" resp="yes" />

So when the browser try to pre-fetch the images, it knows our desired breakpoints, and it already knows our vieport size.

So we just need to name our responsive images as our breakpoints
photo-320.jpg
photo-480.jpg
photo-960.jpg
photo-1000-jpg

And as you see in my img tag I took a mobile first approach defining the 320 breackpoint as the default img. Of course this is much simple to code and deal than the other ideas with multiple sources or breakpoint defined in every image.

what do you think?

La importancia de los estándares

Desde la creación de la World Wide Web Consortium (WC3) en el año 1994 el desarrollo sobre plataformas web tiene una serie clara de que guías debe seguir para crear diseños escalables, flexibles, semánticos y accesibles.

Esta entidad se ha encargado de redactar documentación relacionada con lenguajes como xml, xhtml, html, css, svg. uri/url y otros. Sobre estos documentos los desarrolladores de navegadores web se han basado, o no tanto, para crear sus motores de renderizado que interpretan el código de la páginas web para luego mostrarlas en pantalla. Sin estas reglas cada navegador interpretaría ese código como quisiera y no tendríamos consistencia en la visualización de los sitios entre un navegador y otro.

De la teoría a la realidad

En teoría suena muy bien, pero es sabido que estos estándares no están 100% soportados en los navegadores, y para peor el navegador mas utilizado, el Microsoft Internet Explorer, tanto en su versión 6 como en la reciente versión 7, son los que menos estándares soportan, sin mencionar los códigos propietarios que utilizan. Pero a pesar de esto, desarrollar siguiendo los estándares es lo más aconsejable ya que trae ventajas a corto y largo plazo, tanto para el que programa las paginas como para el que las mantiene, actualiza y para el negocio que este montado sobre ese sitio.

Separación de diseño, estructura y contenidos

En el desarrollo con estándares se aboga por la separación. Esto se podría ver en 3 capas:

  • La estructura: Comprende a la parte html de un sitio, donde se definen las áreas de contenidos.
  • Los datos: Comprende los contenidos del sitio, artículos, notas, productos, etc. Solo aplicable a sitios donde sus contenidos estén albergados en una base de datos, de lo contrario esta capa estaría integrada en la estructura.
  • El diseño: Comprende el aspecto visual del sitio, situado en los CSS.

Ventajas

Compatibilidad con los navegadores

Desarrollar con estándares no solo es compatible con los navegadores actuales, sino que degrada bien en navegadores antiguos, navegadores de solo texto, lectores de pantalla y los mas importante son completamente compatibles con navegadores futuros, que a medida que se siguen mejorando actualizan su soporte para estándares.

Accesibilidad

Siguiendo las normas de html, semántica y la utilización de CSS los sitios no solo son mas accesibles al usuario web común, sino que da la ventaja de que el mismo sitio pueda se accedido desde un navegador de solo texto, desde un celular, desde un pda, con lectores de pantalla para ciegos, una consola de juegos, etc.

Velocidad y peso de archivos

Al utilizar CSS y evitar las tablas como elemento de layout del sitio y ayudad con el uso correcto del HTML podemos disminuir la cantidad de código hasta un 40% haciendo el sitio mas liviano y rápido, no solo beneficiando al usuario sino disminuyendo el ancho de banda consumido.

Mantenimiento

Al tener las tres capas que componen el desarrollo hacer cualquier cambio resulta muchísimo más sencillo, ya que por ejemplo si hace falta hacer un cambio en la apariencia del sitio, tan solo con editar pocas lineas en el CSS podemos hacer modificaciones que afectan globalmente al sitio.

Indexabilidad y negocios

Cuando uno toma la decisión de montar un negocio en internet debe tener en cuenta a la indexación en los buscadores y hoy estos se alimentan de texto. Y mientras más claro este este texto, mientras mejor construido con estándares mejor será la indexación del sitio, y por lo tanto mas público atraerá, lo que es mejor para los negocios.

En resumen

Puede que al tratar de empezar a adoptar los estándares en el proceso de desarrollo cueste un poco, pero los beneficios tanto a corto como a largo plazo bien lo valen, y desde y punto de vista profesional de a poco en el mundo se esta solicitando este conocimiento, lo que lo hace también valioso en el futuro laboral de los desarrolladores.