Diseño web

Comenzando a ver cada vez más ’sitios HTML5′ espectaculares… que hacen que un ordenador de gama media se arrastre como con el peor Flash :-S

Esta cita es un twitteo de César Córcoles que leí gracias a elecash. Y no puedo estar más de acuerdo. Porque por lo mismo que se demonizaba el uso de flash parece que curiosamente también está pasando con HTML5, javascript y CSS a saco. A ver si al final va a ser que no es la tecnología sino el usuario con su uso el que va a tener la culpa…

En fin, al grano. HTML5 please me parece un acierto realmente destacable en forma de página web en la que se nos sugieren, recomiendan o comentan algunas de las características disponibles a día de hoy en la variedad de navegadores existentes. Qué compatibilidad ofrecen, si es mejor optar por ofrecer retrocompatibilidad… Una chuleta a la que echarle un vistazo al menos un par de veces. Y fijaos que de regalo y si no la conocíais también crearon CSS3 Please!.

HTML5 Please [en] + CSS3 Please! [en]

En Twitter sigo a unos cuantos forofos de Fireworks y eso me permite mantenerme al tanto día a día de las novedades más jugosas en relación al programa. Y últimamente parece pegar con fuerza la llegada de Specctr.

Specctr es un añadido para Fireworks que facilita enormemente la tarea de documentación del diseño. Generalmente en mi caso, no suelo meter la pezuña en el código en primera instancia ya que se encargan mis compañeros. Luego yo hago un repaso y vamos limando asperezas. Quizá con Specctr nos ahorraríamos tiempo de ese proceso final al permitirme a mí el poder mostrar muy rápidamente todas las propiedades de los objetos, los textos, distancias…

Es algo que podría hacer actualmente pero no de manera tan automatizada y eso es precisamente la ventaja de Specctr:

Lo voy a probar sin duda porque tiene muy buena pinta. Podéis solicitar una demo simplemente introduciendo los datos y así trastear con él durante dos semanas. A partir de ahí ya es cosa de cada uno valorar si merece la pena la inversión. Yo mañana lo comentaré en el estudio :)

Specctr, blueprints for the web [en]

Preguntaba hace no mucho en Twitter por alguna librería javascript para “tunear” elementos de formulario como los dropdowns. Hasta el momento ya conocía alguna como Uniform [en] pero no ofrecía el grado de personalización necesaria.

El bueno de Marcio Barrios sugirió una solución que a priori tiene muy buena pinta: DropKick. Este plugin jQuery permite modificar la apariencia al completo, con lo que el grado de “tuneo” es mayor que Uniform. Y como quizá alguno llegue a necesitar algo parecido, aquí va el linkito:

DropKick [en]

Creo que os he mencionado que últimamente me lo paso en grande buceando por Slideshare [en], ese rinconcito donde subir presentaciones y documentos y donde terminan subiéndose gran cantidad de datos de lo más variopinto.

Es por eso que me dedico a buscar documentación sobre Fireworks o diseño y me encuentro material bastante potable (os dejaba hace poco el enlace a Aprende a diseñar (un poco) en 13 minutos y ahora os dejo por ejemplo Controlling Web Typography [en].

En un principio puede parecer información totalmente descontextualizada pues suelen ser en su mayoría diapositivas que sirven de base en una charla o un taller. Pero si lo miramos por otro lado, nos deshacemos del envoltorio para quedarnos simplemente con los puntos fuertes o destacables (sin desmerecer en absoluto la charla relacionada por supuesto!). Y es que muchas veces me encuentro con artículos muy buenos pero de una densidad que no me permite una cómoda lectura con el tiempo del que dispongo. Y a estas pequeñas pildoritas les encuentro hueco fácilmente :)

La última que he encontrado (y que enlacé también en el pajarito) se titula Pragmatic responsive design y araña la superficie de lo que se nos viene encima con el diseño multidispositivo o conceptos como el enriquecimiento progresivo [en]. Buff, podría estar horas leyendo sobre esto. Ahí os va el linkito!

Pragmatic responsive design [en]

El vídeo que podréis ver justo aquí arriba muestra la continua evolución que ha sufrido la página de entrada de 37signals [en] a lo largo de los últimos meses. Un buen ejemplo de cómo se va adaptando la estética y el contenido en función de las necesidades del momento o en base a intentar mejorar la captación. Se ven cambios totales, pequeñas realineaciones, cambios de claims…

Evolution of a homepage [vimeo] (Se lo vía a Jcorrea).

De la misma manera que nos encontramos recursos y patrones de diseño web recomendables, también es bueno saber que tenemos documentado justo lo contrario.

Design Anti Patterns, How to Design a Poor Web Experience es un extenso documento de diapositivas en las que Bill Scott [en] nos muestra una serie de patrones que se suelen repetir en muchos casos a la hora de proyectar una web…y que no terminan de funcionar del todo bien.

Lo recomiendo como una lectura para tomar con calma porque son más de 100 diapositivas. Se le puede echar un vistazo rápido pero la ocasión bien merece dedicarle unos minutos extra para sacarle jugo.

Design Anti Patterns, How to Design a Poor Web Experience [en]

El otro día estaba en el estudio buscando cosillas y llegué de casualidad hasta jQuery Masonry:

Masonry is a dynamic grid layout plugin for jQuery. Think of it as the flip-side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically, positioning each element in the next open spot in the grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.

Como una imagen vale más que mil palabras echadle un ojo a un ejemplo [en] y probad a redimensionar la ventana. Todo un recurso de gran utilidad que va para la saca. Y ojo con su creador, David DeSandro [en] porque tiene otros proyectos que también vale la pena explorar.

jQuery Mansonry [en]

De un tweet de Tosete a una densa presentación en PDF titulada Grids are good.

Son 152 páginas en las que Mark Boulton [en] y Khoi Vinn [en] nos hablan sobre el uso de la retícula a lo largo de la historia, especialmente, ahora en el diseño web.

Yo no negaré que siempre empiezo de un archivo en blanco de Fireworks con la rejilla 960 [en] (generalmente la de 12 columnas) y que eso te asegura un balanceo correcto de pesos. Pero hay que recordar que no siempre hay que ceñirse a estructuras de este tipo y romper también se puede hacer de una manera armoniosa. En Awwwards [en] hay grandes ejemplos.

Grids are good [en] + descarga alternativa que he subido en Box.net

A la Tabla comparativa de navegadores con soporte html5 y demás vengo a sumar esta otra tabla que acabo de encontrar y en la que se comparan los diferentes players de video actuales que podemos encontrar en la red y que podemos emplear en nuestros proyectos. Muy útil si no estamos muy puestos o dudamos de si el que estamos empleando es la mejor opción.

Tabla comparativa reproductores de video HTML5 [en]

Muchas veces me voy guardando información para tenerla recopilada y preparar un post potable. En esta ocasión versaba sobre el uso de media queries y frameworks o utilidades que ayudan en el desarrollo web multidispositivo. Hablo de cosas como 320 and up [en] o Skeleton [en].

Pero el tiempo ha ido pasando y en Smashing Mag han sacado un artículo muy (MUY) destacable sobre este tema, con un montón de recursos y enlaces super útiles que os llevarán por la senda correcta. Rara vez un recopilatorio de estos me ha parecido tan bueno y sólo puedo agradecer al autor su publicación. Ahí os va el link.

Responsive web design techniques [en]