Pixel Density, Demystified

…or “what you must know about designing for retina display and high-density screens”.

Pixel density it’s an often misunderstood subject: some people think that the solution it’s just to design everything at twice the size that they used to, but actually it’s a little simpler and more complicated than that… at the same time.

Be sure to also check the text version on Medium and remember:

  1. Design in vector shapes
  2. Design at “1x”

 

A Simple Device Diagram for Responsive Design Planning | Metal Toad Media

There are an ever-increasing number of devices with different screen resolutions to take into account with a responsive design, so we put together a simple but handy diagram that lists the most common device widths as of the present, along with overlays for potential device width ranges. A big shout out to creative partner Sisu for the inspiration to put this together.

Originally posted on April 11, 2012 at 06:05PM at A Simple Device Diagram for Responsive Design Planning | Metal Toad Media

Nueve pistas grotescas de que simplemente no entiendes el diseño web

Deambulando me he encontrado este entretenido post: Nine dead giveaways you just don’t get webdesign. Trataré de traducirlas:

  1. Pones botones de XHTML/CSS válido en el pie de página de tu sitio web. Esto te hace sentir como un standardista cuando vuelves a casa. Validar no es una meta, sólo está ahí para ayudarte.
  2. Tus bosquejos en Photoshop siempre son > 968 px. de ancho. Te preguntas porqué tus clientes siempre se quejan por las barras de desplazamiento horizontal cuando les envías bosquejos de diseños.
  3. El tamaño del body text de tu sitio web es de 10px. Tienes puntos extra si no se puede seleccionar (como en la mayoría de los sitios hechos con Flash) y está en una fuente pixel.
  4. Todavía usas @import para enlazar tus hojas de estilo.
  5. text-decoration:none; es lo primero que defines cuando das estilo a tus enlaces (para el body text). Preferentemente tu body text es casi del mismo color que tus enlaces.
  6. Te rehúsas a definir estilos :hover para menús y enlaces. ¿Qué es la interacción, de todos modos?
  7. Resientes profundamente los estilos en línea de este post [del post original, en realidad], ya que debía haber definido una clase para mi lista ordenada. Aun si esta es la única vez que una lista ordenada tiene esta cantidad de espacio como estilo.
  8. La fuente que usas en tu editor no es de ancho fijo, y utilizas espacio para indentar el texto. Tienes puntos extra si indentas tu HTML manualmente.
  9. Los editores de Smashing Magazine son tus dioses.

Aún río con la última… ¿acaso soy el único que cuando ve su sitio piensa “esto no es más que Copy + Paste“?