El proceso utópico en el desarrollo de un website sigue una serie de pasos tan marcados que podríamos designar grupos de tareas a un perfil profesional específico. Lo utópico es complicado de alcanzar, especialmente cuando las estimaciones de tiempo de producción se acortan en favor de un mejor servicio. Y es ahí donde nacen perfiles mixtos (diseñador de interacción/diseñador web; diseñador web/maquetador; maquetador/desarrollador).

A su vez, estos perfiles mixtos provocan que el desarrollo de una tarea pase por varias manos —en este caso, la creación de la Hoja de Estilos—. ¿Quieres ahorrarte más de un mail o reunión con tus propios compañeros? ¿Quieres hacer el trabajo más fácil a lo demás y obtener ese detalle de vuelta? Os dejo aqui algunas ideas que he experimentado en los últimos años y que harán el trabajo mucho más fluido cuando el código baila de un editor de texto a otro:

Crea un arsenal de estilos genéricos

¿Cuantas veces has tenido que crear una clase nueva porque, en una sección determinada, la caja necesitaba un padding superior de 10 pixels? ¿Cuántas veces has tenido que añadir otra clase para pintar de una manera especial un único texto específico? ¿Cuántas veces has necesitado modificar el alto de un contenedor con la llegada, a última hora, de una caja diferente?

Todo esto provoca ruido en tu Hoja de Estilos y hace que lo que comenzaste creando de manera ordenada se transforme en un gallinero de clases específicas para un sólo elemento. Esa no es la idea: ya sabes que una clase debe aportar valor a un cojunto de elementos similares, sino estaríamos hablando de un identificador. ¿Cómo preverlo? Crea un arsenal de clases con valores genéricos:

/* VALORES GENERICOS */

/* limpiar flotacion */
.clear {clear:both;}

/* flotacion */
.flota-izquierda {float:left;}
.flota-derecha {float:right;}

/* textos */
.alineacion-derecha {text-align:right;}
.alineacion-izquierda {text-align:left;}
.justificado {text-align:justify;}
.centrado {text-align:center;}
.subrayado {text-decoration:underline;}
.tachado {text-decoration:line-through;}

/* disposicion */
.disponer-bloque		{display:block;}
.disponer-linea		{display:inline;}
.oculto			{display:none;}

/* padding 5  (repetir con padding 10, 15, 20, etc...) */
.padding-5 {padding: 5px !important;}
.padding-top-5 {padding-top: 5px !important;}
.padding-right-5 {padding-right: 5px !important;}
.padding-botom-5 {padding-bottom: 5px !important;}
.padding-left-5 {padding-left: 5px !important;}

/* margin 5 (repetir con margin 10, 15, 20, etc...) */
.margin-5 {margin: 5px !important;}
.margin-top-5 {margin-top: 5px !important;}
.margin-right-5 {margin-right: 5px !important;}
.margin-botom-5 {margin-bottom: 5px !important;}
.margin-left-5 {margin-left: 5px !important;}

/* anchos genericos (agregar mas si necesitas) */
.width150 {width:150px !important;}
.width140 {width:140px !important;}
.width130 {width:130px !important;}
.width120 {width:120px !important;}
.width110 {width:110px !important;}
.width100 {width:100px !important;}

/* alturas genericas  (agregar mas si necesitas) */
.height150 {height:150px !important;}
.height140 {height:140px !important;}
.height130 {height:130px !important;}
.height120 {height:120px !important;}
.height110 {height:110px !important;}

Justificando el uso de !important;

Es cierto que se abusa en esta propuesta del valor !important;. La idea es anteponer estos valores a cualquier otro indicado a un elemento HTML. Teniendo presente que estos valores genéricos se deberían situar al principio de nuestra Hoja de Estilos, la propiedad !important lo que hará es luchar contra la herencia provocada por la cascada.

Modo de empleo

De esta manera si tuviéramos que modificar valores en una caja ya creada, del tipo:

Lorem ipsum dolor sit amet

Ut eget urna dui, in iaculis augue.
Más información

Podríamos hacerlo cómodamente con los valores de nuestro “arsenal”:

Lorem ipsum dolor sit amet

Ut eget urna dui, in iaculis augue.
Más información

Notas

• La idea es nombrar las clases con la propiedad que contienen para comunicar al compañero los últimos cambios aportados al elemento a través de la maquetación . Leyendo el código podemos averiguar qué modificaciones se han realizado
• Insisto: el motivo de crear el arsenal es agilizar las correcciones de última hora o indicar salvedades en cajas y otros elementos. Aunque podríamos construir una página completa con un buen arsenal de estilos, no lo aconsejo. Para maquetar normalmente se ha de seguir los conceptos generales en el desarrollo de las Hojas de Estilo (cascada y herencia).

El el siguiente artículo veremos otras metodologías que nos facilitarán el trabajo y desarrollo en equipo de las Hojas de Estilo.

Parece que el plugin Syntax Highlighter provoca algunos fallos de presentación en el código CSS propuesto. Si quieres copiarlo, utiliza la vista de texto plano por favor. Disculpa las molestias.

Relacionados

• 10 Agosto 2010
  Definición de CSS (meme)
• 6 Agosto 2009
  Cantidad de bocetos para un diseño web
• 11 Marzo 2009
  Diseño de comentarios en Wordpress
• 9 Abril 2008
  CSS Naked Day: ¡Destapa tu web!
• 8 Abril 2008
  Camiseta CSS

¿Se te va la pinza? ¿Si te pones a imaginar cosas, te flota la cabeza? Eres un cabeza de globo.

Autorretrato

Relacionados

• 14 Agosto 2008
  Las Diavlas de Charley
• 30 Noviembre 2009
  La nariz naranja
• 26 Agosto 2008
  Colores a mi alrededor
• 6 Agosto 2008
  27 póster de películas de 2008
• 19 Mayo 2010
  42 revistas online para diseñadores

David Kadavy escribió hace unos días un interesante artículo donde explicaba las complicaciones de usar una tipografía tan conocida como Garamond en nuestro diseños web. Extrapolando el mensaje de su artículo, se reformula la pregunta: ¿es recomendable usar tipografías con serifa en la Web?

El motivo que me anima a escribir este artículo es intentar completar el artículo de Kadavy con algunos detalles sobre metodología de trabajo. Si bien es cierto que existen una serie de normas que todos debemos acatar independientemente del medio, un diseñador web no debería trabajar la tipografía tal y como lo hace un diseñador gráfico.

Cuando un diseñador gráfico elabora un diseño para la imprenta se enfrenta a una serie de problemas que están íntimamente relacionados con la labor física y mecánica de la imprenta. Sin embargo, un diseñador web no debería entender la tipografía como algo estático, fijo, ni siquiera físico. Un diseñador web debe considerar la tipografía como un elemento dinámico en cuerpo y forma que depende del dispositivo del usuario. Esta es la diferencia, por lo tanto, entre un diseñador gráfico y un diseñador web que trabajan con la tipografía:

• El diseñador gráfico entenderá la elección tipográfica como un ideal inamovible y procurará que ésta llegue al usuario, intentando solventar todos los inconvenientes técnicos sin dejar de vigilar la legibilidad de la misma.
• El diseñador web debería entender la elección tipográfica como un conjunto de posibilidades condicionado por el dispositivo con el que navega el usuario.

Por ello, la cuestión de la tipografía en la web no se ha de reducir a serifa sí, serifa no. La cuestión es tomar como epicentro del diseño al mismo usuario, que condicionará el resultado gráfico final:

1. Las tipografías deberán tener tamaño porcentuales en relación al tamaño de la pantalla y así mismas (%, em, small, medium, large, etc)
2. Podemos forzar la elección de un juego tipográfico (Google Font Directory, @font-face), pero ser flexibles con los cambios en nuestro diseño, según el dispositivo de navegación, nos asegurará una audencia mayor
3. La elección no se ha de limitar a un único juego tipográfico. Podemos agrupar posibilidades dependiendo de las tipografías con las que cuente el usuario en su dispositivo
4. Las hojas de estilos deberán detectar el dispositivo y ofrecer una alternativas tipográfica en relación al medio utilizado.

En relación a este último punto, podemos ayudar a usuarios cuyo dispositivo tenga una pantalla de menor tamaño (dispositivo móvil, principalmente) —donde leer un texto con serifa es, obviamente, una dificultad—. Para ello debemos detectar los medios a través de los que accede un usuario a nuestro sitio:

Y en la Hoja de Estilos de dicho medio ofrecer las alternativas tipográficas (u otros valores relacionados con el diseño):

p {font-family: sans-serif;}

Además de todo esto, actualmente el diseñador web cuenta con el apoyo de un gran soporte de la regla @font-face, así como una colección de navegadores para distintos dispositivos que apuestan por un suavizado (antialiasing) a la hora de renderizar CSS.

Por lo tanto, un diseñador gráfico y un diseñador web comparten la raiz de los problemas tipográficos, pero no la metodología de trabajo, ni mucho menos las soluciones, por las condiciones de cada medio.

Relacionados

• 1 Agosto 2010
  Sogesan
• 15 Julio 2010
  Becas Talentia
• 21 Mayo 2010
  El futuro de la tipografía en la web
• 15 Julio 2009
  Mapa Recursos Tecnológicos de Andalucía
• 1 Abril 2009
  Portal de la Red Social Guadalinfo

Hace una semana que Pedro de CSS Blog inició un meme que consiste en definir en un frase (muy ingeniosa y creativa) el significado de CSS. El mensaje ha ido saltando a los blogs de amigos y conocidos, como Cristian Eslava, Andrés Nieto entre otros… Ángeles Portillo es la que me hace llegar el testigo. No es la primera vez que escribo de CSS en otro tono, sobre todo con un poco de humor.

Creo que es imposible escapar del conjunto diseño-funcionalidad. No sólo debemos ser exquisitos diseñando, también debemos ofrecer el producto o información de manera accesible, usable, sencilla. La base debe ser transparente y sin maquillaje, sino el diálogo resultará estrictamente superficial, centrado sólo en lo estético. En definitiva, queremos hacer bonitas faldas, sobre todo, para piernas que sostengan un mensaje auténtico ;-) He aquí, por tanto, la definición:

CSS es la falda que tu sitio ha de llevar para que el usuario adivine unas piernas que lo enamoren.

Reenvio el testigo memero a @dcalderon, @gruncho y @proyecto con idea de que lo continúen, sea vía blog, twitter, Facebook o cualquier otro, a gusto del consumidor :)

Relacionados

• 31 Agosto 2010
  Trabajando CSS en equipo (I)
• 11 Marzo 2009
  Diseño de comentarios en Wordpress
• 9 Abril 2008
  CSS Naked Day: ¡Destapa tu web!
• 8 Abril 2008
  Camiseta CSS
• 16 Agosto 2010
  Por qué sí puedes usar Garamond en la web

Diseño web para tema de Drupal del sitio corporativo de la agencia Sogesan, Soluciones Informáticas.

www.sogesan.com

Relacionados

• 15 Julio 2010
  Becas Talentia
• 15 Julio 2009
  Mapa Recursos Tecnológicos de Andalucía
• 1 Abril 2009
  Portal de la Red Social Guadalinfo
• 15 Marzo 2009
  Portal Web de Sandetel
• 1 Marzo 2009
  Ayuntamiento de Puertollano