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

12/feb/2009 12
  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. 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.

    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!

Comentarios

  1. juan [#]

    hahahaha, no que
    “no importa el peso o si necesita tener preloader. MIENTRAS VALGA LA PENA”, era la ley nº 6 de jorge?

    Excelente post, muy útil. Gracias por todo

  2. seba [#]

    Excelente… (léase con tono Mr. Burns)

  3. Boozox » Las 10 leyes de Jorge y archivos MO [#]

    […] Lo primero es un artículo de CSSLab, que explica las 10 leyes de Jorge para el diseño Web. […]

  4. rafa [#]

    Para un diseñador/desarrollador romántico, las 10 reglas aplican como anillo al dedo.

    Para un diseñador/desarrollador que lo hace para vivir, uf…

    sería interesante ver las 10 reglas aplicadas en un ambiente comercial. Donde tu cliente está dentro del 60% de explorer 6, donde tu cliente quiere que el sitio sea funcional y rápido. Donde le interesa que el sitio esté listo lo antes posible y le importa un bledo la herencia del no se qué

    excelente.
    saludos.

  5. Jose Mª [#]

    saludos! para los que tenemos poca idea de todo esto.. por mucho que nos lo pongan facil… no sabes ni hacer la “O” con un canuto. El hecho es que queria crear mi propia web sobre mi negocio, y estaba buscando algo adecuado. Encontre un sitio de desarrollo web y estoy pensandomelo, ya que es una inversion y quiero hacerlo bien. Tienen buen pinta y me he informado y parece que trabajan bien. Vosotros que pensais?? son de aqui de bilbao con lo que me parece mas facil a la hora de acercarme y explicarles lo que quiero.
    A ver si me dejais vuestras opiniones :)
    Un saludo.

  6. Jorge Epuñan [#]

    @rafa: tienes razon, me considero bastante romantico en mi trabajo pero es algo con q puedo equilibrar con el trabajo asalariado. Sobre la regla 1 no quiero decir q dejes de desarrollar para IE6, sino q dejes de hacer sitios SOLO para plataformas q soporten IE (aun hay muchas…) y q no funcionen en FF por ejemplo. Si sigues la regla 2 y la dominas, podras crear y armar sitios q funcionen bien en todos los browsers, y asi con el resto de las reglas. la idea es q sean ayudas a tu trabajo y nunca un estorbo. Te recomiendo crees las tuyas y apuesta por ellas; solo comparto las mias q me han ayudado bastante a lograr un alto dominio en lo q hago.

    Saludos!

  7. stock [#]

    jajajajajaja… me gustó la descripción del punto 9.

    “- quedó bastante claro creo-”

    saludos

  8. inyaka [#]

    muy buenas las reglas, aunque estoy en un mini desacuerdo con la 6, no creo que sea un crimen usar especificamente la etiqueta ya que esta esta justamente creada por no tener carga semantica, osea, para casos en que por ejemplo visualmente tenga que crear un cuadradito por que falta para rellenar en tal lado, o para redondear una esquina, por que quiero poner la imagen a traves del css, etc…

  9. Jessy [#]

    Me parece exelente el heho de que alguien se preocupe por darle un poco de estructura a algo con tanta variedad de puntos de vista como lo es el maquetar un sitio web, dadas las opciones… por lo menos a mí que soy algo novata en el asunto de css estas simples 10 leyes marcan una grán diferencia entre mis maquetados antiguos y los nuevos. Felicidades y gracias por iluminar mentes. saludos

  10. Silene [#]

    muy bueno!, grax
    8)

  11. CSSLab - Las 10 leyes de Jorge para el diseño y desarrollo web [#]

    […] Excerpt from: CSSLab – Las 10 leyes de Jorge para el diseño y desarrollo web […]

  12. Cerrando pestañas de diseño en el navegador | Autonomía digital y tecnológica [#]

    […] Las 10 leyes de Jorge para el diseño y desarrollo web. Estoy de acuerdo con todas, excepto una: No te asustes en hacer un sitio pesado. […]

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab