Categorías
CSS

simple.css el framework sin clases

Simple.css is a classless CSS framework that allows you to make a good looking website really quickly.

By classless I mean that there are no CSS classes anywhere in the CSS or the HTML. So your website can look just like this using plain old vanilla HTML.

simplecss.org

Hay ocasiones en las que lo simple, puede ser lo más versátil y efectivo. Personalmente creo que simplecss es un excelente punto de partida para empezar a desarrollar un framework CSS, o simplemente usarlo así, sin más, modificando algunas variables. Un framework CSS sin clases. Genial.

Tal vez se echen en falta más estilos como botones, textos especiales, contenedores, iconos, rejilla,… hablando de rejilla, es un momento oportuno recordar El CSS Grid mínimo: ungrid, una rejilla con dos clases.

Categorías
Accesibilidad web CSS

Tablas HTML maquetadas con CSS Grid: ¿Tiene sentido?

Hace algunas semanas maqueté una tabla en html usando los elementos propios de la tabla (table, caption, thead, tbody, th y td y no hubo tfoot porque la tabla no tenía).

— ¿Pero que has hecho?
— Hacer una tabla.
— Pero ya no se hacen así.

Y me recomendó la lectura del siguiente artículo: Responsive data tables with CSS Grid – Revisited. Resumiendo el argumento del artículo, para hacer una tabla accesible se usan elementos como div y span para luego añadir CSS usando las propiedades de CSS Grid display: grid; y grid-template-columns.

En Septiembre haré 20 años que llevo como desarrollador web, y hemos pasado de utilizar tablas para maquetar absolutamente todo (ojo, que todavía se hace y se encuentra código con esta técnica totalmente desaconsejada) a no usar tablas ni para maquetar datos tabulares.

Y la lista puede seguir con enlaces que parecen botones, textos que parecen títulos (¿os suena .h1?), y otras ocurrencias.

El avance que se ha producido en CSS con nuevas especificaciones y una gran velocidad de soporte por los principales navegadores, nos permite hacer auténticas virguerías con los estilos, y es algo genial. Pero no tenemos que olvidar algo esencial: las hojas de estilo CSS son para definir estilos, y el HTML define la estructura de una página web.

El viejo truco de desactivar los estilos, y plantearse otras formas de navegar (lector de pantalla, por ejemplo), nos pueden ayudar a decidir la opción más correcta.

Categorías
CSS

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 🙂

Categorías
CSS Estándares web Web móvil

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?.

Categorías
Citas CSS Web móvil

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.