Archivo de la etiqueta: css

Desenmascarando mitos sobre el rendimiento de sitios responsive

Eso mismo comentaba en dicho tweet al descubrir el proyecto eCSSential de Scott Jehl en github. Se trata de una solución mediante javascript cuyo objetivo es evitar que se descarguen archivos CSS cuando media query no lo ha evitado.

Por resumirlo brevemente, el argumento de Scott Jehl se basa en su prueba de carga, donde demuestra que el navegador carga primero todos los estilos y después aplica los valores de CSS para las reglas de medios definidas. En definitiva, según Jehl, estamos descargando archivos CSS, valga el chiste recurrente, “por encima de nuestras posibilidades”; excesivos para dispositivos móviles y tablets, sin contar que las reglas aplicadas a solucionar problemas mayores (como el asunto de las imágenes), se aplican a posteriori. He aquí su solución con este javascript:


    eCSSential({
        "all": "css/all.css",
        "(min-width: 20em)": "css/min-20em.css",
        "(min-width: 37.5em)": "css/min-37.5em.css",
        "(min-width: 50em)": "css/min-50em.css",
        "(min-width: 62.5em)": "css/min-62.5em.css"
    });

El argumento de Scott Jehl parece sólido —capturas de una prueba de carga ejercen un efecto “te lo juro por mi santa madre”—. La conversación generada en Twitter lo acompaña. Así que, por muy absurdo que vea solucionar problemas de CSS utilizando javascript, si tenemos algo de cintura y menos escepticismo, quizás eCSSential sería la solución ideal para gestionar eficientemente la carga en los diferentes medios.

Así lo pensaba hasta leer el artículo de Ilya Grigorik, “Debunking Responsive CSS Performance Myths” — chivatazo de @nobuti, gracias—, que aporta datos reales de cómo funciona y gestiona el browser la carga de dichos CSS según la consulta previa a la resolución con la que cuenta el cliente y el propio browser. Según Ilya Grigorik, el navegador sabe qué hacer en cada momento, lo que desmonta la teoría de Jehl, a pesar de su prueba de carga. Finalmente, Grigorik concluye animando a una metodología bastante clara:

Concatenate and compress your CSS, use media queries in your link tags and let the browser do its job.

Posteriormente en los comentarios del artículo de Ilya Gregorik, Scott Jehl mantiene con el autor un interesante debate, a ratos algo espeso y con pinceladas de trolleo ilustrado, que deberéis seguir si queréis algo más de luz sobre este asunto.

Y a vosotros ¿qué método os parece mejor?

Por qué sí puedes usar Garamond en la web

Garamond

David Kadavy escribió hace unos días un interesante artículo donde explicaba las complicaciones de usar una tipografía tan conocida como Garamond en nuestro diseños web. Extrapolando el mensaje de su artículo, se reformula la pregunta: ¿es recomendable usar tipografías con serifa en la Web?

El motivo que me anima a escribir este artículo es intentar completar el artículo de Kadavy con algunos detalles sobre metodología de trabajo. Si bien es cierto que existen una serie de normas que todos debemos acatar independientemente del medio, un diseñador web no debería trabajar la tipografía tal y como lo hace un diseñador gráfico.

Cuando un diseñador gráfico elabora un diseño para la imprenta se enfrenta a una serie de problemas que están íntimamente relacionados con la labor física y mecánica de la imprenta. Sin embargo, un diseñador web no debería entender la tipografía como algo estático, fijo, ni siquiera físico. Un diseñador web debe considerar la tipografía como un elemento dinámico en cuerpo y forma que depende del dispositivo del usuario. Esta es la diferencia, por lo tanto, entre un diseñador gráfico y un diseñador web que trabajan con la tipografía:

  • El diseñador gráfico entenderá la elección tipográfica como un ideal inamovible y procurará que ésta llegue al usuario, intentando solventar todos los inconvenientes técnicos sin dejar de vigilar la legibilidad de la misma.
  • El diseñador web debería entender la elección tipográfica como un conjunto de posibilidades condicionado por el dispositivo con el que navega el usuario.

Por ello, la cuestión de la tipografía en la web no se ha de reducir a serifa sí, serifa no. La cuestión es tomar como epicentro del diseño al mismo usuario, que condicionará el resultado gráfico final:

  1. Las tipografías deberán tener tamaño porcentuales en relación al tamaño de la pantalla y así mismas (%, em, small, medium, large, etc)
  2. Podemos forzar la elección de un juego tipográfico (Google Font Directory, @font-face), pero ser flexibles con los cambios en nuestro diseño, según el dispositivo de navegación, nos asegurará una audencia mayor
  3. La elección no se ha de limitar a un único juego tipográfico. Podemos agrupar posibilidades dependiendo de las tipografías con las que cuente el usuario en su dispositivo
  4. Las hojas de estilos deberán detectar el dispositivo y ofrecer una alternativas tipográfica en relación al medio utilizado.

En relación a este último punto, podemos ayudar a usuarios cuyo dispositivo tenga una pantalla de menor tamaño (dispositivo móvil, principalmente) —donde leer un texto con serifa es, obviamente, una dificultad—. Para ello debemos detectar los medios a través de los que accede un usuario a nuestro sitio:

 

Y en la Hoja de Estilos de dicho medio ofrecer las alternativas tipográficas (u otros valores relacionados con el diseño):

p {font-family: sans-serif;}

Además de todo esto, actualmente el diseñador web cuenta con el apoyo de un gran soporte de la regla @font-face, así como una colección de navegadores para distintos dispositivos que apuestan por un suavizado (antialiasing) a la hora de renderizar CSS.

Por lo tanto, un diseñador gráfico y un diseñador web comparten la raiz de los problemas tipográficos, pero no la metodología de trabajo, ni mucho menos las soluciones, por las condiciones de cada medio.

Definición de CSS (meme)

Acid2 Test

Hace una semana que Pedro de CSS Blog inició un meme que consiste en definir en un frase (muy ingeniosa y creativa) el significado de CSS. El mensaje ha ido saltando a los blogs de amigos y conocidos, como Cristian Eslava, Andrés Nieto entre otros… Ángeles Portillo es la que me hace llegar el testigo. No es la primera vez que escribo de CSS en otro tono, sobre todo con un poco de humor.

Creo que es imposible escapar del conjunto diseño-funcionalidad. No sólo debemos ser exquisitos diseñando, también debemos ofrecer el producto o información de manera accesible, usable, sencilla. La base debe ser transparente y sin maquillaje, sino el diálogo resultará estrictamente superficial, centrado sólo en lo estético. En definitiva, queremos hacer bonitas faldas, sobre todo, para piernas que sostengan un mensaje auténtico ;-) He aquí, por tanto, la definición:

CSS es la falda que tu sitio ha de llevar para que el usuario adivine unas piernas que lo enamoren.

Reenvio el testigo memero a @dcalderon, @gruncho y @proyecto con idea de que lo continúen, sea vía blog, twitter, Facebook o cualquier otro, a gusto del consumidor :)

Diseño de comentarios en WordPress

Add you comment

Screenshot de premassagar

Aunque parezca extraño, una de las cosas que más me ha costado diseñar en este sitio personal han sido los comentarios. Muchas son las preguntas que debes hacerte antes de ponerte manos a la obra.

Lo bueno de un sistema de gestión de contenidos como WordPress es que te facilita muchísimo esta labor. Ya sabes que la mayoría de las plantillas (templates) que están a tu disposición cuentan con la integración de comentarios con avatares (leídos desde Gravatar) o el cebreado de color para los mismos (comentarios par, comentarios impar y comentarios del autor). Solventados estos problemas las principales cuestiones que has de plantearte a la hora de diseñar tus comentarios son:

Uso y tamaño de los avatares

Aunque por defecto los avatares se presentan en la mayoría de los sitios con unas medidas “estándar” (unos 48×48 pixel), nunca descartes la posibilidad de presentarlos a un tamaño mayor o, incluso, no presentarlos. Por ejemplo:

  • En un sitio web dedicado al diseño pueden participar diseñadores que tendrán, supongamos, bonitos avatares. Si aumentas el tamaño se verán más atractivos y complementarán el diseño de tu sitio con toques de diseño, color y creatividad.
  • Sin embargo, en un sitio web con formato blog que genere comentarios largos (debates), los avatares podrían robarle mucho espacio al principal protagonista de tu sitio: el texto. En casos extremos no es descabellado prescindir de ellos.

Estructura visual del comentario

En resumen, los comentarios de tu sitio contienen tres partes:

  • Autor (nick, sitio web y avatar)
  • Metadatos (enlace, hora y fecha de la publicación)
  • Comentario (el comentario en sí)

No necesariamente los metadatos tienen que presentarse junto al nombre del autor. Recuerda que tu intención es maquetar con la ayuda de tu hoja de estilos una presentación mejorada y usable de los comentarios. Concibe los datos a presentar como las capas que dispones para crear en tu modelo y juega un poco con ellas. Te propongo algunos ejemplos de wireframes para comentarios:

comentario_modelo1
comentario_modelo2
comentario_modelo3

Seguro que con un poco de imaginación puedes sacar decenas de modelos.

Diseño gráfico de los comentarios

Una vez decidas el boceto (wireframe) de tus comentarios, te será mucho más fácil diseñarlos y posteriormente maquetarlos. Para la labor de diseño debes empaparte de los blogs que más te gustan para anotar acabados y tener en cuenta varios factores además de todo lo señalado:

  • Tipografía

    Si sueles obtener comentarios cortos, considera la opción de ofrecer una tipografía de mayor tamaño para que luzca mejor. Si sueles obtener comentarios extensos, trabaja las propiedades de interlineado (line-height) y espacio entre letras (letter-spacing) para que la lectura no resulte agotadora. En cualquier caso siempre procura que sean legibles y que la tipografía contraste lo suficiente con el color de fondo.
  • Formato

    Procura que tu formulario de comentario permita el uso de etiquetas HTML para enriquecer los textos: los usuarios con más experiencia sabrán valorarlo. Testea y prepara todas estas etiquetas desde tu hoja de estilos para evitar sorpresas posteriores.
  • Mensajes

    Enriquece la estructura de tus mensajes en los comentarios (error, moderación) con hoja de estilos.

CSS con humor

Cuando manejas un lenguaje específico o técnico y, además, trabajas con gente con un grandísimo sentido del humor, salen propuestas que te sacan una sonrisa. Una de ella es float:center; como nueva propiedad a CSS.

Muchos nos hemos preguntado alguna vez por qué estas propiedades no existen en CSS (quizás tras algunas tediosas horas de maquetación en las que no sale el resultado deseado). Pero si lo pensamos fríamente, son valores redundantes. Flotas algo (o grupo de algos) a la derecha o a la izquierda. Y centras con mágenes laterales. Sin prentender entrar en un debate técnico, prosigo con el humor de este post que es a lo que yo venía. Float:center; es algo que soltamos con humor en nuestras conversaciones. Otra nueva opción que queremos proponeros sería:

#selector{display:poco;}

#menu{display:poco 60%;}

Agregar la propiedad “poco” a opciones de disposición para ocultar o transparentar cajas. Sería confuso al principio porque aquí hablamos del 60% de poco (transparencia). Es decir, un 40% de mucho (opacidad). Pero si le cogiste el rollo a las flotaciones, esto está hecho.

En castellano

#menu{
ancho:300px;
alto:130px;
margen: 10 auto;
fuente: Arial, Helvetica, sin-serifa 0.7em gorda;
texto-adornado:subrayado;
flotacion:izquierda;
interlineado:0.9em;
espacio-entre-letritas:0,3em;
disponer:poco 60%;
}

Aunque CSS se cimenta en un inglés básico de las montañas, nosotros queremos apostar por la comunidad hispana en el mundo del diseño web. Así que queremos que os unáis para proponer CSS en castellano:

Seguro que a vosotros se os ocurren algunas más ¿Alguna propuesta? :)