Las 10 leyes de Jorge para el diseño y desarrollo web
-
No desarrolles para la mayoría; no siempre tienen la razón y usualmente no saben lo que quieren.
<p> Aunque 60% de los usuarios utilicen<strong> Internet Explorer 6</strong>, eso no indica que debemos desarrollar aplicaciones que funcionen sólo en <strong>IE6</strong>; si todos saltan a un pozo ¿tú te lanzarías también? </p> -
Usa siempre un reseter CSS.
<p> Si tienes de 1 a 5 páginas simples y con formularios simples, basta con el reseter universal: </p> <pre><code class="language-css">* {<br /> margin: 0;<br /> padding: 0;<br />}
<p> Pero si tu proyecto es mayor, utiliza uno <a href="http://www.csslab.cl/2007/10/18/css-reseter/" title="Enlace en CSSLab a "CSS Reseter"">más completo</a>. </p> -
Mantén siempre la simplicidad en todo ámbito; tanto del diseño como del código fuente.
<p> Tatúatelo: <strong>Menos es más</strong> y aprovecha de medicarte contra la <em>divitis</em> y la <em>classitis</em>, y toda clase de abuso reiterativo innecesario en el codigo fuente. Estudia bien las <a href="http://www.csslab.cl/2007/12/06/la-descendencia-del-css/" title="Enlace en CSSLab a "La descendencia del CSS"">herencias de estilos</a>, la <a href="http://www.csslab.cl/2008/01/09/siendo-especfico/" title="Enlace en CSSLab a "Siendo específico"">especificidad</a> y <a href="http://www.csslab.cl/2008/09/10/maniatico-del-codigo/" title="Enlace en CSSLab a "Maniático del código"">cómo ordenar tu código fuente</a>. </p> -
Diseña siempre pensando en el usuario y que éste tenga la mejor experiencia posible dentro de tu proyecto web.
<p> <cite>"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…)"</cite>– <a href="http://www.csslab.cl/2008/11/20/nuestro-verdadero-cliente/" title="Enlace en CSSLab a "Nuestro verdadero cliente"">yo mismo</a>. </p> -
Siempre separa el contenido y estructura (HTML) del estilo gráfico (CSS) y el funcionamiento (Javascript); cada uno en su propio documento.
<p> Trata de linkear los estilos desde una hoja externa: </p> <pre><code class="language-markup"><link rel="stylesheet" href="style.css" type="text/css" media="screen" /></code></pre></p> <p> y los JS: </p> <pre><code class="language-markup"><script type="text/javascript" src="utils.js"></script></code></pre></p> -
Nunca, pero nunca uses una etiqueta vacía sólo porque no puedes resolverlo de otra manera.
<p> 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 <strong><div></div></strong>! </p> -
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!
<p> Actualmente la velocidad promedio de las conexiones permiten bastantes más lujos que antes. No te reprimas de usar <strong>PNG’s transparentes</strong> de más de <strong>100kb</strong>, pero con tal de que tengan un <a href="http://www.csslab.cl/2008/05/29/parallax-en-uso-real/" title="Enlace en CSSLab a "Parallax en uso real"">real uso práctico y estético</a>. </p> -
Esfuérzate para que tu diseño y desarrollo cumpla por lo menos con niveles básicos de usabilidad, accesibilidad y degradabilidad.
<blockquote> <p> <strong>Accesibilidad</strong>: 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). </p> </blockquote> <blockquote> <p> <strong>Usabilidad</strong>: en palabras de <em>Jakob Nielsen</em>: "atributo de calidad que mide lo fácil de usar una interfaz web". </p> </blockquote> <blockquote> <p> <strong>Degradabilidad</strong>: 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. </p> </blockquote> -
Fíjate y cuida de los detalles; lo que unos ven como pequeñeces, para otros son sutilezas que te diferenciarán del resto.
<p> – quedó bastante claro creo- </p> -
Todas las reglas están para ser rotas, menos las 9 anteriores.
<p> El análisis heurístico de <em>Nielsen</em>, la regla de primera lectura en pantalla, la lectura en ‘<em>Z</em>‘, que el logo debe ir SIEMPRE en el rincón superior derecho del diseño… <strong>¡Patrañas!</strong> 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 <a href="http://www.csslab.cl/category/ajax/" title="Enlace en CSSLab a "Categoría: AJAX"">AJAX</a>, <a href="http://www.csslab.cl/2008/01/30/ventana-modal-solo-con-css/" title="Enlace en CSSLab a "Ventana modal sólo con CSS"">ventanas modales</a>, validaciones de formularios por blur entre otros. ¡Atrévanse! </p>
Leer otros artículos