El CSS Grid mínimo: ungrid

Desde 960 grid system –y su heredero unsemantic–, hasta los actualmente populares bootstrap y foundation, he visto, estudiado, y aprendido de multitud de frameworks de CSS, en ocasiones hasta convertirse en auténticos monstruos en características y peso.

Por eso, cuando me encontré hace unos días ungrid, me quedé más que sorprendido. Vale que ni siquiera es un framework, que la rejilla que usa es muy básica, que por defecto las columnas tienen el mismo ancho (aunque obviamente se pueden añadir más clases), que no tiene estilos para resetar o uniformizar estilos, que no tiene estilos para títulos, formularios, tablas, que no ofrece un diseño web adaptativo, que probablemente no funcione bien en algún que otro navegador,… pero es que sólo utiliza dos clases. Y apenas cuatro propiedades.

Aquí está:

@media (min-width: 30em) {
    .row {
		width: 100%;
		display: table;
		table-layout: fixed;
	}
    .col {
		display: table-cell;
	}
}

A mí, que valoro muchísimo la ligereza del código, me parece un hallazgo digno de mención.

Por otro lado me entristece pensar la cantidad de esfuerzo en horas y dinero que ha supuesto no tener unas especificaciones y un soporte de los navegadores a la altura de las circunstancias. Pero claro, decirlo ahora no tiene mucho mérito 🙂

Responsive web design

Un poco de historia

El origen de responive web design, para adaptar webs a teléfonos móviles principalmente, es un artículo aparecido en A List Apart con el título de tachán… responsive web design. La técnica consiste en usar:

En el fondo no hay nada nuevo: Media Query es una potente evolución de media types presente en CSS2, y el uso de rejilla e imágenes flexibles ya era conocido desde hace tiempo.

Hispanizando el término

Parece sencillo traducir el término original responsive design por diseño responsivo. Pero consultando el diccionario de la RAE, me ha costado encontrar uno buena traducción que respete el espíritu del término original. Gracias a la buena gente en twitter encuentro buenas alternativas:

  • diseño web adaptable (@1984), con la puntualización de @isbl (diseño web adaptable a cualquier resolución de pantalla).
  • diseño web adaptativo (@iagor)
  • diseño web autoadaptable (@ala_747)

A mí personalmente me parece mejor la opción diseño web adaptativo, si hacemos caso al diccionario (definición de adaptativo en la RAE):

adaptativo
Perteneciente o relativo a la adaptación o a la capacidad de adaptación.

Esa capacidad de adaptación es lo que me parece más apropiado. Pero bueno, cuestión de opiniones: todas las argumentadas son bienvenidas.

¿Cómo funciona?

Tenemos una típica web con su código HTML, CSS, javascript (imprescindible una librería, como jquery y sus correspondientes plugins) y un buen puñado de imágenes. Todo ese código es el que se envía al navegador y le toca al potente ordenador de sobremesa (o al no tan sobrado de potencia teléfono móvil) procesarlo. Lo cuál equivale a descargarse todo, filtrar los estilos que le corresponden, ocultar los elementos invisibles (pero descargados) y mostrarlo en las pantallas de nuestros cacharros, ya sean grandes o pequeños, potentes o justitos. Siempre y cuando sepan interpretar el código…

Ahí hay un problema: se confía demasiado en el dispositivo de destino (velocidad de conexión y procesador, memoria, capacidad de comprender el código), y en ocasiones se le envía demasiados recursos, aunque no los muestre (y es una pérdida de tiempo y recursos que en ocasiones puede ser exagerado).

¿Es la mejor forma de crear una web móvil?

En palabras del que puso nombre a la técnica…

I think of responsive design as an alternative to mobile sites.

Ethan MarcotteEthan Marcotte on responsive web design

Lo considera una alternativa al diseño de una web específica para móviles. Y yo añado que no es la mejor alternativa. Sigo pensando que un buen trabajo de desarrollo en el servidor, con detección de dispositivos (mediante WURLF por ejemplo) y envío de contenido optimizado para dicho dispositivo, obtiene resultados mucho mejores que la técnica de diseño web adaptativo. Una muy buena explicación, la puedes encontrar en la presentación Why responsive design actually begins on the server a partir de la página 83.

¿Existen ocasiones en las que el diseño web adaptativo puede ser una alternativa razonable para ciertos proyectos web? Por supuesto, depende del tipo de web, de los recursos disponibles, del contenido que se muestra,… Una web ligera (no como esas de 5 megas), con pocos elementos multimedia, pocas imágenes, sobre todo texto, pocos recursos de tiempo y dinero, personal con conocimiento front pero no de lenguajes de servidor… es un proyecto ideal para poner en práctica la técnica de diseño web adaptativo. Al menos es algo.

Pero seamos sinceros: el diseño web adaptativo no deja de ser un truco de maquetadores con más o menos conocimiento de CSS y HTML para intentar que una web no se vea demasiado mal en ciertos teléfonos móviles. Es mejor que nada, pero dependiendo de la web, puede ser una chapuza o algo brillante.

Me permito recomendar dar un vistazo a la presentación Pragmatic responsive design. Me parece muy completa y un trabajo más que correcto. Un buen ejemplo a seguir.

Algunos consejos para diseño web adaptativo

Bueno, hablo en concreto de CSS3 Media Query.

  • Para teléfonos móviles no tiene sentido usar handheld o screen. Desde que el iPhone dejó de considerarse un dispisitivo handheld desde el punto de vista del CSS, ha sido el primero de una larga lista de dispositivos en considerarse similares a, por ejemplo, un iMac de 27″. Y no es lo mismo una pantalla de 3,5″ que una de 27″.
  • No tiene sentido tampoco tener en cuenta exclusivamente la resolución de pantalla. El teléfono móvil Samsung Galaxy Nexus tiene una resolución de 1280×720 px. Muchos netbooks tienen resoluciones de 1024×600. Es uno de los muchos factores a valorar.
  • Algo que casi nadie ha utilizado, que sepa, y que puede ser muy útil: tener en cuenta, no la resolución de pantalla, sino el tamaño de la pantalla en pulgadas. Ahí va una clasificación discutible: móviles menos de 6″, tablets entre 6″ y 10″, ordenadores… más de 10″ (la pena es que la resolución de 10″ es usada por tablets y ordenadores). Tras estar haciendo pruebas, creo que es un punto de partida razonable. Además, funciona. Con un extra importante…
  • Usar la resolución —desde el punto de vista de la densidad de pixels— para diferenciar la calidad de las pantallas. Ver donde se explica en Media Queries 4.11. resolution y en DPI Calculator / PPI Calculator para ver la resolución de pantalla de diversos dispositivos y una práctica calculadora.
  • Recuerda las televisiones: muchas pulgadas de pantalla pero forzosamente tienen que usar un tamaño de texto más grande: el móvil, la tablet o el ordenador lo tenemos como mucho a medio metro de distancia. Un televisor puede estar a dos, tres o más metros.

El contexto

Aunque ya está muy visto, es obligado recordar que cada proyecto se desarrolla en un contexto y factores como el presupuesto, el objetivo de la web, conocimientos técnicos, el contenido, los dispositivos,… y los teóricos usuarios de la web. Un sitio para ver estadísticas de internet es statcounter, por continentes, países, sistemas operativos, móviles,… Ignoro su fiabilidad, pero debería abrir los ojos a más de uno.

El factor Be Cool

Un par de asuntos recurrentes. Por decirlo de una manera suave, empiezo a estar bastante hasta las narices, de que en la teoría y en la práctica, los únicos dispositivos que se utilizan para hablar o aplicar el responsive design (o para esos dos o tres lectores de xposible “diseño web adaptativo”), son los de Apple. Vale que queda muy vistoso utilizar imágenes de los cacharros de Apple y optimizar el CSS para el iPhone y el iPad en vertical y apaisado, pero hay más dispositivos. No les fastidies.
Pero el colmo es suponer que todos los cacharros que se conectan a internet tienen el núcleo webkit. Usar prefijos “beta” e ignorar los equivalentes de otros núcleos (-moz, -khtml, -ms, -o) o directamente las recomendaciones del W3C cuando funcionan. Una falta de profesionalidad preocupante. Luego pasa lo que pasa: Is the fat lady singing for Vendor Prefixes?.

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.

CSS Reset

Hay gente que dice que es más peligroso un ignorante que un malo. Es una opinión. Y en el mundillo del desarrollo web “front” tiene bastante sentido. Así, entre nosotros, he de confesar que más de una vez he sido de los primeros.

Pero se supone que el asunto a tratar es el reseteo de todas o una buena parte de los atributos de los elementos de XHTML mediante unas cuantas reglas de CSS, e incluso un fichero, como parte de un framework más o menos extendido o particular. Personalmente, la mayoría de las veces he optado por algo muy básico y cuando hacía falta (lo típico del padding:0 y margin:0 y poco más). Lo de usar un fichero que te obligaba a definir todos y cada unos de los atributos de elementos de un sitio web me parece excesivo. Cuestión de opiniones y experiencia.

El caso es que la mejor manera para justificar el uso o no de alguna de las diferentes técnicas de reseteo de CSS es saber sus consecuencias – y porqué no, su origen – tal vez sea una buena idea dar un vistazo a los siguientes artículos:

Opera Web Standards curriculum traducido al castellano y al catalán

La UOC ha publicado dos traducciones de Opera Web Standards Curriculum en castellano y en catalán. Personalmente creo que es uno de los documentos más completos y elaborados sobre el desarrollo web. Muy útil para aprender y como material de consulta y referencia.
Disponibles en:

Como extra, otro documento muy útil para aprender sobre desarrollo web, front end de andar por casa, de mamuso.

Gracias a jsmanrique por la noticia en twitter (Spanish and Catalan translations of the Opera Web Standards curriculum).

Actualización (2013-07-17): los contenidos de Opera Web Standards Curriculum se han trasladado a webplatform.org.