1. 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&oacute;lo en <strong>IE6</strong>; si todos saltan a un pozo &iquest;t&uacute; te lanzar&iacute;as tambi&eacute;n?
    </p>
    
  2. Usa siempre un reseter CSS.
    <p>
      Si tienes de 1 a 5 p&aacute;ginas simples y con formularios simples, basta con el reseter universal:
    </p>
    
    <pre><code class="language-css">* {&lt;br />
    margin: 0;&lt;br />
    padding: 0;&lt;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 &quot;CSS Reseter&quot;">m&aacute;s completo</a>.
    </p>
    
  3. Menos es más tatuado en mi frente

    Mantén siempre la simplicidad en todo ámbito; tanto del diseño como del código fuente.
    <p>
      Tat&uacute;atelo: <strong>Menos es m&aacute;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 &quot;La descendencia del CSS&quot;">herencias de estilos</a>, la <a href="http://www.csslab.cl/2008/01/09/siendo-especfico/" title="Enlace en CSSLab a &quot;Siendo espec&iacute;fico&quot;">especificidad</a> y <a href="http://www.csslab.cl/2008/09/10/maniatico-del-codigo/" title="Enlace en CSSLab a &quot;Mani&aacute;tico del código&quot;">c&oacute;mo ordenar tu c&oacute;digo fuente</a>.
    </p>
    
  4. 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&ntilde;ar experiencias, provocar emociones y quiz&aacute;s cambiar comportamientos al momento de utilizar la web; que &eacute;sta no sea una herramienta, sino una verdadera experiencia (como surfear para un surfista, esquiar para un esquiador, cocinar para un chef&hellip;)"</cite>&#8211; <a href="http://www.csslab.cl/2008/11/20/nuestro-verdadero-cliente/" title="Enlace en CSSLab a &quot;Nuestro verdadero cliente&quot;">yo mismo</a>.
    </p>
    
  5. 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">&lt;link rel="stylesheet" href="style.css" type="text/css" media="screen" /&gt;</code></pre></p> 
    
    <p>
      y los JS:
    </p>
    
    <pre><code class="language-markup">&lt;script type="text/javascript" src="utils.js"&gt;&lt;/script&gt;</code></pre></p>
    
  6. 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&oacute;mate unos minutos de descanso, sal al aire libre por un momento y luego vuelve con la cabeza m&aacute;s fr&iacute;a. Tambi&eacute;n es buen recurso compartirlo con otras personas aver qu&eacute; otros puntos de vista tienen sobre la misma situaci&oacute;n pero &iexcl;no m&aacute;s <strong><div></div></strong>!
    </p>
    
  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!
    <p>
      Actualmente la velocidad promedio de las conexiones permiten bastantes m&aacute;s lujos que antes. No te reprimas de usar <strong>PNG&#8217;s transparentes</strong> de m&aacute;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 &quot;Parallax en uso real&quot;">real uso pr&aacute;ctico y est&eacute;tico</a>.
    </p>
    
  8. 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&aacute;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&aacute; igual, pero debiera comportarse similar.
      </p>
    </blockquote>
    
  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.
    <p>
      &#8211; qued&oacute; bastante claro creo-
    </p>
    
  10. Todas las reglas están para ser rotas, menos las 9 anteriores.
    <p>
      El an&aacute;lisis heur&iacute;stico de <em>Nielsen</em>, la regla de primera lectura en pantalla, la lectura en &#8216;<em>Z</em>&#8216;, que el logo debe ir SIEMPRE en el rinc&oacute;n superior derecho del dise&ntilde;o&#8230; <strong>&iexcl;Patra&ntilde;as!</strong> Debes tener la capacidad de innovar y poder mantener la cautividad y atenci&oacute;n del usuario principalmente mediante el dise&ntilde;o. Si crees que el men&uacute; principal debiera ir a la derecha de la pantalla, dis&eacute;&ntilde;alo para que la atenci&oacute;n del usuario se dirija a ese lado y justif&iacute;calo. Si sigui&eacute;ramos esas reglas siempre, nunca habr&iacute;an innovaciones tales como <a href="http://www.csslab.cl/category/ajax/" title="Enlace en CSSLab a &quot;Categor&iacute;a: AJAX&quot;">AJAX</a>, <a href="http://www.csslab.cl/2008/01/30/ventana-modal-solo-con-css/" title="Enlace en CSSLab a &quot;Ventana modal sólo con CSS&quot;">ventanas modales</a>, validaciones de formularios por blur entre otros. &iexcl;Atr&eacute;vanse!
    </p>