El blog de Neurotic

Este año la gente de w3c España ha decidido crear un concurso de rediseño de la página web de Fundamentos Web, el congreso sobre estándares que se hará en Oviedo del 3 al 5 de Octubre. Los premios son un MacBook y una Wii para el primero y segundo respectivamente.

En Neurotic nos hemos animado a concursar, no tanto por los premios sino por el reconocimiento que puede llegar a tener diseñar una página para el w3c.

La norma principal del concurso es que sólo podemos “tocar” el CSS, el html hay que usarlo tal cual como lo han hecho. En principio ya han pensado para que se a muy flexible y que puedas modificar cada elemento de forma independiente aunque cuando nos hemos puesto manos a la obra hay algunas cosas que hemos echado a faltar.

Cosas para comentar de nuestra propuesta (a la que hemos llamado Eau de Neurotic):

Diseño Hibrido

Para el layout del diseño hemos convinado diferentes técnicas. Las columnas van con % por lo que se adaptan al tamaño de la ventana. Cuando ha sido posible el tamaño y margenes de las cajas están con em’s de modo que varian tu tamaño dependiendo del tamaño del texto.

Resoluciones

Al usar un diseño líquido para el contenido principal el layout se adapta bien a las resoluciones habituales. Se ve bien a 800×600 aunque tiene pequeños problemas, en particular en los elementos grandes de por sí (tablas, formularios). De todos modos, partiendo de la base que el público objetivo de la página es gente con conocimientos técnicos, suponemos que se usara mayoritariamente una resolución mínima de de 1024×768 así que nos hemos asegurado que todo se vea perfecto para esta resolución para un tamaño de texto razonable.

Navegadores

El diseño lo hemos probado en Firefox, IE6, IE7, Opera y Konqueror y en todas las pruebas que hemos hecho el diseño es consistente

Iconos

Hemos usado el set de iconos Silk de famfamfam. Son realmente muy buenos, pequeños pero detallados y, prácticamente, hay uno para cada cosa que se te ocurra

Brillo y contraste

Según la herramienta Colour Contrast Analyser el brillo y el contraste de la fuente principal está dentro de los valores aconsejados por el w3c

Reemplazo de texto por imágenes

En el header hemos reemplado el texto del título y la fecha por una imagen más bonita usando la técnica de Phark

Sliding doors

Para las cajas elásticas (que varía su tamaño dependiendo del tamaño de la fuente) con un background no regular hemos usado la técnica de Sliding doors, por ejemplo en “fundamentos web tiene tu estilo” o en “Sugerencias”

Preload en hovers

Para evitar que al pasar el ratón por encima de un enlace la imagen tarde un poco en cargarse y se vea raro hemos usado la técnica de la ventana. Nosotros la llamamos así ya que se trata de tener en la mismo fichero de la imagen los dos estados y mediante el posicionamiento del background mostrar el que interese a traves de la “ventana” definida por el ancho y el alto del contenedor.

En algunos casos en los que no se podía usar esta técnica (no se puede combinar con sliding doors) usamos un pequeño truco. Se trata de poner una imagen de fondo con una posición que haga imposible de verse. Por ejemplo, si tenemos este html:

<p class="lema">
<a href="/2007/Concurso" title="Concurso de cambio
del estilo del sitio">Fundamentos Web lleva tu estilo</a>
</p>


podemos usar el siguiente css

p.lema {
background: url(../images/fondo-enlace-hover.png)
no-repeat -9999px -9999px;
}

p.lema a {
background: url(../images/fondo-enlace.png)
no-repeat 0 bottom;
}


p.lema a:hover, div#cabecera p.lema a:focus {
background: url(../images/fondo-enlace-hover.png)
no-repeat 0 bottom;
}


CSS Hacks

Está claro que es algo que hay que evitar aunque hay veces que no hay otra solución. Nosotros hemos usado tres hacks:

• clearfix

  Para conseguir que un contenedor que tiene elementos flotando se adapte al tamaño de sus hijos hemos usado el hack clearfix” que a su vez usa algunos hacks para que funcione en diferentes navegadores. Una posible solución hubiese sido poder hacerle un clear al siguiente elemento pero en esta caso no podíamos por que el siguiente elemento era muy general y podría “fastidiar” otras cosas

• IE<7 hacks

  Para poder solucionar los bugs de los Explorer menores al 7 hemos usado el !important de la siguiente manera:

  .elemento {
margin: 10px !important;
margin: 20px;
}


  Explorer al no interpretar el !important usará el margin: 20px ya que es el último pero Firefox y los que si lo interpreten usarán el que tiene el !important. Lo malo es que IE7 continua con algunos de los bugs anteriores pero si interpreta bien el !important

• IE7 only hack

  Para poder solucionar lo comentado anteriormente hemos usado un hack para poder modificar atributos sólo para IE7:

  /* ----- Hack only for IE 7 ----- */
*+html elemento {
atributo: valor;
}


  En lugar de usar estos hacks para IE lo mejor es usar comentarios condicionales para incluir una hoja de estilo con las definiciones que haya que modificar para explorer, pero al tener que estar esta hoja de estilos incluida en el html no hemos podido usar esta técnica.

  <!--[if lt IE 7]>
<style type="text/css" media="all">@import
"/css/fix-ie.css";</style>
< ![endif]-->


Estructura del CSS

Para facilitar la legibilidad y las posteriores modificaciones hemos pensado que era mejor que reducir a la mínima expresión el código CSS además de seguir las siguientes reglas para ordenar propiedades

1. Una propiedad por linea
2. Cada propiedad tiene un tab al inicio
3. Las propiedades se ordenan de mayor a menor importancia midiendo esta por el impacto visual que tienen.

Validaciones

Como es lógico no ha habido que validar el XHTML ya que no se podía tocar. Así que tan solo se ha tenido que validar el CSS, el cual valida la especificación CSS2

Usabilidad lectora

Para que se pueda leer con facilidad le hemos puesto un tamaño del texto, alto de linea y márgenes generosos

De momento esto es todo, estamos orgullosos del trabajo realizado y esperamos hacer un buen papel en el concurso.

Podéis ver nuestro estilo yendo a Fundamentos Web 2007

Esta entrada fue escrita en Viernes, 18 Mayo, 2007 a las 8:05 pm y está archivada dentro de Diseño. Puedes seguir las respuestas a través del feed RSS 2.0. Puedes responder, o hacer un trackback desde tu propia página web.