CSSLab

Las 10 leyes de Jorge para el diseño y desarrollo web

1. No desarrolles para la mayoría; no siempre tienen la razón y usualmente no saben lo que quieren.

   Aunque 60% de los usuarios utilicen Internet Explorer 6, eso no indica que debemos desarrollar aplicaciones que funcionen sólo en IE6; si todos saltan a un pozo ¿tú te lanzarías también?

2. Usa siempre un reseter CSS.

   Si tienes de 1 a 5 páginas simples y con formularios simples, basta con el reseter universal:

   * {
       margin: 0;
       padding: 0;
   }

   Pero si tu proyecto es mayor, utiliza uno más completo.

3. 

   Mantén siempre la simplicidad en todo ámbito; tanto del diseño como del código fuente.

   Tatúatelo: Menos es más y aprovecha de medicarte contra la divitis y la classitis, y toda clase de abuso reiterativo innecesario en el codigo fuente. Estudia bien las herencias de estilos, la especificidad y cómo ordenar tu código fuente.

4. Diseña siempre pensando en el usuario y que éste tenga la mejor experiencia posible dentro de tu proyecto web.

   "Me gusta diseñar experiencias, provocar emociones y quizás cambiar comportamientos al momento de utilizar la web; que ésta no sea una herramienta, sino una verdadera experiencia (como surfear para un surfista, esquiar para un esquiador, cocinar para un chef…)"- yo mismo.

5. Siempre separa el contenido y estructura (HTML) del estilo gráfico (CSS) y el funcionamiento (Javascript); cada uno en su propio documento.

   Trata de linkear los estilos desde una hoja externa:

   <link rel="stylesheet" href="style.css" type="text/css" media="screen" />

   y los JS:

   <script type="text/javascript" src="utils.js"></script>

6. Nunca, pero nunca uses una etiqueta vacía sólo porque no puedes resolverlo de otra manera.

   Si te encuentras entrampado y no hay caso de solucionar tal o cual problema, tómate unos minutos de descanso, sal al aire libre por un momento y luego vuelve con la cabeza más fría. También es buen recurso compartirlo con otras personas aver qué otros puntos de vista tienen sobre la misma situación pero ¡no más <div></div>!

7. No te asustes en hacer un sitio pesado, con imágenes PNG en alta calidad y con un elegante preloader que indique cuánto falta para la precarga, pero ¡HAZ QUE VALGA LA PENA!

   Actualmente la velocidad promedio de las conexiones permiten bastantes más lujos que antes. No te reprimas de usar PNG’s transparentes de más de 100kb, pero con tal de que tengan un real uso práctico y estético.

8. Esfuérzate para que tu diseño y desarrollo cumpla por lo menos con niveles básicos de usabilidad, accesibilidad y degradabilidad.

   Accesibilidad: Facilidad con la que algo puede ser usado, visitado o accedido por todos los usuarios. La accesibilidad web indica la capacidad de acceso a la web y sus contenidos por todas las personas, independiente de las limitaciones propias del usuario (discapacidad).

   Usabilidad: en palabras de Jakob Nielsen: "atributo de calidad que mide lo fácil de usar una interfaz web".

   Degradabilidad: principio en el cual un desarrollo realizado en determinado tiempo y para determinado medio se comporte de manera similar en ambientes paralelos o menos actualizados, vale decir: tu sitio hermoso y bien construido debiera comportarse similar si un browser no soporta estilos CSS ni Javascript o en un celular, por ejemplo. No se verá igual, pero debiera comportarse similar.

9. Fíjate y cuida de los detalles; lo que unos ven como pequeñeces, para otros son sutilezas que te diferenciarán del resto.

   - quedó bastante claro creo-

10. Todas las reglas están para ser rotas, menos las 9 anteriores.

    El análisis heurístico de Nielsen, la regla de primera lectura en pantalla, la lectura en ‘Z‘, que el logo debe ir SIEMPRE en el rincón superior derecho del diseño… ¡Patrañas! Debes tener la capacidad de innovar y poder mantener la cautividad y atención del usuario principalmente mediante el diseño. Si crees que el menú principal debiera ir a la derecha de la pantalla, diséñalo para que la atención del usuario se dirija a ese lado y justifícalo. Si siguiéramos esas reglas siempre, nunca habrían innovaciones tales como AJAX, ventanas modales, validaciones de formularios por blur entre otros. ¡Atrévanse!