Diseño web adaptativo: tamaños de pantalla objetivo

[avicario]

Buenas. Aunque técnicamente no conozco en detalle todavía el diseño web adaptativo (responsive web design), vamos a externalizar en mi empresa un proyecto el cual quisiéramos que tuviese esta estructura.

Se que en este tipo de proyectos la web se transforma cuando la resolución de la pantalla pasa por determinados límites establecidos. Mi pregunta es, cuales son los límites más usados?, no quisiera ni quedarme corto ni pecar de demasiados "layouts" diferentes.

Gracias.

[Rafael]

Primero que nada ¡Bienvenido!
Y se me hace una pregunta excelente. Espero que haya bastante participación, así que pongo una opinión inicial.

Yo separaría 3 categorías. Resolución (ancho), densidad de pixeles y en ciertos límites, la orientación.

En el caso de resolución (ancho) pondría a la mitad de mis reglas 1024, y tambiién una al rededor de 854. Pero hay un juego delicado ahí, ya que 854 puede ser una tablet vertical, pero también puede ser un celular. Habría que preparar una regla combinada con densidad de pixeles.

Quizá hacia arriba uno de 1600. Pero todo esto depende del diseño.

También lo combinaría con una detección, en el servidor, del dispoitivo.

Solo aviento ideas.

[pzin]

En cuanto a tamaños se refiere, hay ciertas normas no escritas, costumbres o cierto consenso general.

Lo habitual suele ser encontrarte con estos tamaños:

• 320
• 480
• 768
• 1024

De todas formas, luego siempre va a existir una dependencia del propio diseño. No hay ninguna norma escrita.

Dejo un enlace donde aparece un listado con los dispositivos generalmente más usados y sus medidas.

[frandelarge]

Hola,
Lo que yo sé, es usar estas grillas donde les pones el número de columnas y te lo saca automáticamente, te dejo un link donde salen las más conocidas:

http://www.creativasfera.com/los-mej...ponsive-design


Saludos!

[Tecna]

Buenas,

mi opinión es que precisamente por existir tantos posibles factores a tener en cuenta, ( y como siempre ) la mejor solución es la más simple, es decir que sea el propio diseño líquido el que se adapte independientemente del tamaño que tenga el dispositivo desde donde se vea. También me llama la atención que todos los ejemplos de media queries que se encuentran por la red sean en pixeles con los problemas que esto acarrea al ser una medida relativa al dispostivo, en lugar de en una medida física como los puntos que nos permite tener siempre el control pues es identica para cualquier dispositivo .

En cuanto a distinciones por tamaño yo sólo haría dos: una básica para dispositivos de tamaño reducido de hasta 480px ( o su equivalente en pt ) que sería la que cargaria por defecto y otra para el resto. Muchas veces se carga todo el contenido y luego se esconde para la versión reducida cuando lo lógico es hacerlo al revés. Otra cosa importante es que el contenido sea idéntico, que todo lo importante esté disponible en las dos versiones. y que los botones y demás zonas interactivas estén bien identificados y tengan un tamaño mínimo para que sea fácil pulsar sobre ellos. Para esto existen las normas de estilo. La letra también es importante, en general el uso de medidas relativas para que el diseño se adapte y así los cambios de una versión a otra son mínimos.

[avicario]

Muchas gracias por vuestras respuestas!

Una de mis principales dudas estaba relacionada precisamente por lo que dice Tecna, sobre lo de medir el ancho/alto del dispositivo por pixeles. Por ejemplo, mi monitor del trabajo es de 24", y lo tengo a 1920px de ancho, y por otro lado veo que el Samsung Galaxy S4 tiene la misma resolución en el en ancho. Y entre una pantalla de 24" y otra de 5", cómo demonios se calcula correctamente el tamaño de fuentes, menús, imágenes y demás?

Entonces lo ideal es averiguar de alguna forma la densidad de pixeles, pero no sabía que existiese una función universal para averiguar eso. Realmente todos los navegadores permiten averiguar ese dato?

Con respecto a los tamaños miraré lo de los frameworks (cuya existencia desconocía).

Gracias de nuevo y un saludo.

[Rafael]

Creo que las unidades físicas. cm, pulgadas, etc. actualmente sirven para un pepino. Dependen de la densidad de pixeles. Esto depende de que el dispositivo lo declare. La realidad es que de eso tengo que investigar más.

[avicario]

Bueno, después de leer un montón por ahí parece que lo que hay que hacer es montar el diseño basado en em, en vez de px. De esta forma nos adaptamos según el tamaño con el que se muestra la fuente en pantalla y nos olvidamos de la densidad de pixeles y demás.... realmente, como no me dedico al diseño puro de webs no tengo claro al 100% lo que digo, pero la verdad es que me suena todo muy lógico. Echad un ojo a esta web:

[URL="http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/"]http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/[/URL]

He aprendido también bastante sobre los "breakpoints", los límites en los que el diseño debe cambiar. Parece que lo recomendable es diseñar primero el layout más pequeño, e ir expandiendo hasta que veamos que nos pide un cambio (cuando todo queda demasiado estirado, marcado sobre todo por el ancho de la columna de texto), entonces marcar ahí un breakpoint, y así sucesivamente, hasta un límite en el que no podamos meter más cosas en horizontal, momento en el que empezaremos a meter espacios en blanco en los laterales.

En fin, sigo aprendiendo sobre teorías. Si llego a alguna conclusión más os lo haré saber.

[pzin]

Si de medidas va la cosa, aquí un artículo interesante de Chris Coyier: http://css-tricks.com/the-lengths-of-css
Está más o menos fresco, de hace un par de meses.