Foros del Web » Creando para Internet » Diseño web »

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

Estas en el tema de Diseño web adaptativo: tamaños de pantalla objetivo en el foro de Diseño web en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 03/05/2013, 07:24
 
Fecha de Ingreso: mayo-2013
Mensajes: 3
Antigüedad: 6 años, 5 meses
Puntos: 0
Diseño web adaptativo: tamaños de pantalla objetivo

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.
  #2 (permalink)  
Antiguo 03/05/2013, 07:37
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.023
Antigüedad: 16 años, 7 meses
Puntos: 1820
Respuesta: Diseño web adaptativo: tamaños de pantalla objetivo

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.
  #3 (permalink)  
Antiguo 03/05/2013, 10:36
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.483
Antigüedad: 17 años, 2 meses
Puntos: 2111
Respuesta: Diseño web adaptativo: tamaños de pantalla objetivo

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.
  #4 (permalink)  
Antiguo 03/05/2013, 10:58
Avatar de frandelarge  
Fecha de Ingreso: mayo-2009
Ubicación: Valparaíso
Mensajes: 116
Antigüedad: 10 años, 4 meses
Puntos: 2
Respuesta: Diseño web adaptativo: tamaños de pantalla objetivo

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!
__________________
www.frantv.tumblr.com
  #5 (permalink)  
Antiguo 04/05/2013, 11:34
Avatar de Tecna  
Fecha de Ingreso: enero-2010
Mensajes: 291
Antigüedad: 9 años, 9 meses
Puntos: 45
Respuesta: Diseño web adaptativo: tamaños de pantalla objetivo

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.
__________________
tecnawebs.es Diseño web y programación - Modelado 3D.

google plus
  #6 (permalink)  
Antiguo 06/05/2013, 09:34
 
Fecha de Ingreso: mayo-2013
Mensajes: 3
Antigüedad: 6 años, 5 meses
Puntos: 0
Respuesta: Diseño web adaptativo: tamaños de pantalla objetivo

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.
  #7 (permalink)  
Antiguo 07/05/2013, 07:20
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.023
Antigüedad: 16 años, 7 meses
Puntos: 1820
Respuesta: Diseño web adaptativo: tamaños de pantalla objetivo

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.
  #8 (permalink)  
Antiguo 08/05/2013, 04:36
 
Fecha de Ingreso: mayo-2013
Mensajes: 3
Antigüedad: 6 años, 5 meses
Puntos: 0
Respuesta: Diseño web adaptativo: tamaños de pantalla objetivo

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.
  #9 (permalink)  
Antiguo 08/05/2013, 08:12
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.483
Antigüedad: 17 años, 2 meses
Puntos: 2111
Respuesta: Diseño web adaptativo: tamaños de pantalla objetivo

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.

Etiquetas: diseño, objetivo, pantalla, tamaños
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:06.