soy Kseso y esto EsCSS

Deja ya de codificar para aparatos y hazlo para tu diseño

Olvida marcas y aparatos en el uso de las media queries. piensa en sencillo y en el diseño de cada página. Todo será más sencillo, más divertido y mucho más gratificante.

Deja ya de codificar para aparatos y hazlo para tu diseño

·Por Kseso ✎ 3

muestrario de aparatejosQue la toma de conciencia y la responsabilidad generalizada de diseñar teniendo en cuenta a todos los cacharros existentes y sus circustancias es cosa buena, nadie lo duda.
Que la evolución de Css en su formulación, el aumento del soporte por los navegadores a sus aspectos más novedosos y revolucionarios y el uso cada día más extendido de propiedades avanzadas por los codificantes es de agradecer y celebrar también.

Mucho mérito tienen quienes desde su posición y el crédito del que gozan difunden, nos explican y ejemplifican los conceptos, las tendencias y los descubrimientos para mejorar la web cada uno según sus posibilidades.

Los fabricantes de aparatejos con su constante evolución y mejora tienen una cuota nada despreciable en la optimización de las páginas y en la mejora de la experiencia del usuario al navegar.

Todo el conjunto anterior se ha concretado en la filosofía que hay en la base del RWD (responsive web design). Y todo esto es posible hacerlo de forma sencilla y fácil usando las @medias queries con sus media tags y sus propiedades que permiten discriminar por tamaños y características del dispositivo que accede a la página. Si estas propiedades te resultan desconocidas o farragosas puedes comenzar por este artículo.

El árbol que oculta el bosque

sólo a efectos ilustrativos

El monopolio Apple

Y parejo al desarrollo de todo lo anterior y también reactivo que lo aceleró fue la aparición de Apple con sus dispositivos. La revolución que supuso el i-phone también afectó al campo del diseño web. De hecho, son legión quienes diseñan pensando en sus medidas a las que han sido convertidas en pseudoestándar.

Son muchos los diseños realizados pensando en los dispositivos apple. Hechos en photoshop y perfectamente encajados para ellos. Pero que se rompen al abandonar ese mundo.

Y tras el i-phone el i-pod y el i-pad y gracias a su disparidad de pantallas la lista de puntos de cambio en las medias queries por viewport se fue ampliando: 320px, 480px, 768px, 960px... y haciendo difícil lo sencillo.
Y ahora podemos dar gracias por la llegada del mini.

Pero resulta que hay más vida más allá y fuera de la manzana.

La tiranía de los aparatos

Y a la lista se sumó todo el resto del mundo. Llegó android y multitud de fabricantes, cada uno con sus disparidades. Y también blackberry y su productos hetergonéneos.
Y ha sido una suerte y ha hecho posible que te des cuenta de que algo está mal.

Así que la respuesta más general ha sido añadir y añadir puntos de cambio a las medias queries. De tal manera que la lista es inabarcable e impracticable de todo punto.

Y esta es una de las inquietudes recurrentes de quienes piensan en aparatos a la hora de diseñar. Son demasiadas, cada día más, las preguntas sobre la "anchuras de las pantallas de móviles". Y dependiendo de quién responda, la lista es más o menos extensa. Más o menos imposible de cubrir.

Lo que parecía una buena idea es un suplicio. Lo que nació como solución se ha vuelto tormento.

¿Hay solución? ¿Podemos recobrar la cordura o es una utopía y batalla perdida el cubrir todos y cada uno de los achiperres que hay y que vendrán?

Posíblemente, pero habrá que cambiar las formas de pensar.

Piensa en tu diseño, olvida los aparatos

imagen sólo ilustrativaAntes de seguir una pregunta: ¿tiraste muy lejos la idea y práctica del diseño adaptable, porcentual, líquido... o como quieras llamarlo? Pues levántate y recógelo, por favor, que te hará falta.

Creo que ha llegado la hora de dejar de hacer webs diseñando en el programa de edición de imágenes y pensando en aparatos. Vuelve al navegador y fíjate sólo en lo que estás haciendo. En tu diseño particular de ese momento.
Piensa en sencillo.

Saca del RWD todos los aparatos y vuelve a meter sólo la página que estás haciendo y la idea de que se adapte y se vea bien a lo que tiene disponible. Diseño "responsive" y adaptable. No es lo mismo que tengas entre manos tres columnas que dos, un menú de 50 opciones que cuatro, nada que ver que sea texto el contenido principal que una galería con miniaturas de... no siempre una grilla de 960 es la solución ideal o un sistema de 1140. Cada proyecto es único y requiere de soluciones particulares para él.

Céntrate sólo en el trabajo que tienes entre manos. Abre el navegador y observa en qué punto al redimensionar la ventana tu diseño, ese que ahora estás haciendo y no otro, se rompe o pierde su gracia o la usabilidad. Y en esos píxeles que pide tu diseño, y no en otros impuestos de antemano, crea el punto de ruptura en las medias queries.

Posíblemente si te liberas de las tiranías de marcas y sus aparatos y vuelves la vista y tu atención sólo a lo que estás haciendo todo se vuelva más sencillo. Más sencillo, más divertido y mucho más gratificante.

Dígote Juan para que me entiendas, Pedro.

Consejos vendo y para mi no tengo. Antes que nadie me lo diga, ya lo escribo yo. Porque recuerda, quien esto escribe y lo que escribe es:

Soliloquios de un poeta,
solo y loco tras la reja.

Adenda

Dos Tres artículos [Ing] descubiertos tras escribir este artículo:

  1. The Infinite Grid por Chris Armstrong en A List Apart.
  2. Stop designing for fixed viewports! por Dan Eden en Netmagazine.
  3. Becoming Device-Agnostic por Patrick Cox en Codrops

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso