Dejar de diseñar para la anchura de pantalla y diseñar para los contenidos

Modificado por última vez en Domingo, 11 Agosto 2013 00:50
(0 votos)

Debe aspirarse a establecer en porcentaje tantas de las dimensiones como sea posible

diseño sensible320, 768 y 1024. ¿significan estos números algo para ti?

No, no es el código Da Vinci, son los anchos de pantalla en píxeles que muchos diseñadores asocian con el móvil, tablet y los anchos de escritorio.

El problema que tengo con esto es que mi móvil no es de 320 píxeles de ancho, mi tableta no es de 768 píxeles de ancho y la pantalla de mi escritorio desde luego no es de 1024 píxeles de ancho. Hay cientos de diferentes tamaños de pantalla, hay en una variedad de dispositivos diferentes y sin embargo seguimos pensando en el diseño web sensible como 320, 768 y 1024.

¿Qué pasa con todos esos tamaños de pantalla que están en el medio?

He visto muchos sitios que utilizan estos tres puntos de ruptura para sus diseños y simplemente crean 3 diseños estáticos que estén más cerca de la media de la anchura.

Esto es mejor que tener un sitio estático pasado de moda sólo de escritorio, ya que tiene por lo menos una porción de una columna, la versión simplificada para móviles y una versión amigable para tabletas táctiles, pero... entonces ¿por qué abandonar todos los otros tamaños de pantalla al no tenerlos en consideración?

Seguro que el diseño seguirá funcionando en los otros tamaños, pero ¿qué pasa cuando tienes una tableta que es menor que 768? ¡Obtendrán la experiencia del móvil en la tablet! ¿Y cuando se visualiza en una pantalla de ordenador portátil más pequeña que 1024? Se le sirve el diseño de la tableta y se reirán de nosostros por no tener uno de los tres tamaños de pantalla que hemos considerado como dignos.

Se trata de porcentajes no de píxeles

Al crear los diseños amigables o sensibles (responsive layouts), siempre debe aspirarse a establecer en porcentaje tantas de las dimensiones como sea posible. Esto ayuda a asegurar que el contenido va a crecer y encogerse de manera uniforme a través de diferentes tamaños de pantalla y lo hará en proporción al dispositivo en que está siendo visto. Este enfoque también nos asegurará que el contenido llenará siempre el 90% (o el tanto por ciento  a determinar) de la pantalla en lugar de posiblemente el 50% de la pantalla, ya que el contenido se centra en un tamaño de pantalla que es unos pocos píxeles más pequeño que el nuevo punto de interrupción disponible.

El contenido es el rey

Al elegir los puntos de interrupción, siempre debemos tomar nuestras decisiones en función de donde se rompe el contenido y no de los anchos de pantalla del dispositivo. En lugar de crear un diseño y luego modificarlo para que se adapte a la pantalla del iPad con comodidad, deberemos averiguar dónde se empieza a interrumpir nuestro contenido.

Se puede comenzar con un diseño de ancho 1400 y poco a poco hacerlo más pequeño para el navegador hasta que una parte del contenido rompa el diseño o se acerque a ello. Eso determinará entonces el siguiente punto de interrupción. No importa si es en el 1200, 800 o 673, si el contenido todavía funciona, entonces ¿por qué cambiar el diseño?

Con esto nos encontraremos que el resultado final tendrá puntos de interrupción extraños, como 477 o 982 y que es posible que tengamos 2, 6 o 10 diferentes puntos de corte. La cuestión será decidir las interrupciones del contenido en lugar de los tamaños de pantalla en que estén destinados a ser vistos.

Con la gran variedad de diferentes dispositivos y tamaños de pantalla que se publican cada mes, es imposible determinar un conjunto de puntos de corte definidos para nuestros proyectos. La verdad es que mientras estamos usando una variable como la anchura de la pantalla para determinar nuestros diseños sensibles, lucharemos para servir a un diseño perfecto para cada tamaño diferente pero, siguiendo algunos de los consejos anteriores, podemos asegurar al menos que el contenido siempre se muestre de la mejor manera posible.


Comentarios (0)

No hay comentarios escritos aquí

Deja tus comentarios

  1. Publicar comentario como invitado. Regístrate o ingresaa tu cuenta
Archivos adjuntos (0 / 3)
Compartir su ubicación
close

Recibe gratis nuestros nuevos artículos!

Serás el primero en conocer las novedades y noticias que pasan en Internet, nuestros tutoriales, trucos y más.

Escribe tu email:

Se abrirá una nueva ventana deFeedBurner a la izquierda de la página y habrás de validar un Captcha.

Lee nuestras Política de privacidad & Política de cookies
Puedes darte de baja de la lista de correo electrónico en cualquier momento