¿Que ancho elegir para una web responsive?
3 seguidores
Buenas, estamos en proceso de rediseñar el portal web donde trabajo , y nos han pedido que sea responsive.
Una diseñador gráfica externa nos pasó una maqueta inical a 1200px, pero creo que quizá pueda dar problemas con monitores más antiguos, que buena base de nuestros usuarios aún usan.
Mirando por internet veo referencias muy diversas, 960px, 1000px, 1024px, etc, etc, asi que no tengo muy claro cual puede ser la mejor opción de partida... aún teniendo en cuenta que luego habrá que hacer mínimo otro medida para tablets (768px?) y para moviles, con el 320 como referencia..
En fin, si teneis alguna sugerencia será bienvenida ;)
salu2
Usuario desconocido
No entiendo muy bien la pregunta, es contradictoria, si es responsive no tiene un ancho definido sino que se adapta a cualquier ancho como dices, desde un minimo de 320px para los moviles mas cutres hasta lo que quieras darle (1200, 1600, etc).
Ultimamente esta de moda el rollo "mobile first", por lo que se parte de la version movil y a partir de ahi se diseña la version de escritorio, pero no basta un unico diseño ya que la disposicion de los elementos (normalmente) cambia segun el ancho con el que se acceda, no es un simple escalado.
smalonso Mod
Como bien comenta @montaycabe mobile first ya no es que esté de moda, si no que es una buena práctica para el diseño de una web responsive. No sólo afecta al diseño de este, sino que cuando se plantea el desarrollo, la parte de código, también se debe empezar por mobile.
Si es responsive no tendrás problemas con las resoluciones que comentas, y menos aún si la web es líquida y marcas bien los breakpoints. Los anchos más elevados con los que suelo trabajar son: 1280px, 1600px y 1800px. Incluso a veces ni siquiera marco un max-width, depende de la web. Esto tiene sentido ya que hoy en día hay monitores de escritorio de 27", incluso independientemente del tamaño físico, puede ser retina y/o de 4k, 5k...y si el usuario tiene una resolución menor, pues no pasa nada, ya que por algo cuidareis el responsive. Eso sí, deberíais diseñar las resoluciones dónde los elementos cambien de estado, posición o comportamiento.
icaro2m
Me explique mal realmente....
Está claro que si el diseño está bien montando deberia irse adaptando con el css y media queries a los anchos de pantalla.
La duda era más bien que medida tomar de referncia para lo que se podría llamar escritorios antiguos, gente con pantalla 4:3 y demás...
Se que en el entorno del diseño grafico y demás los monitores y resoluciones son inmensos, pero nosotros tenemos un publico más "clásicorro", y de ahi el tomar una medida para este tipo de perfiles.
Es decir, buscar lo que llamaba samuel "break point" para este target.
Mirando referncias en la web llegué a aislar el tema en 4 plantillas, aunque había opciones con más, según lo fino que quieras hilar:
- 1200px
- 1000px
- 768px
- 320px
En fin, gracias por vuestros comentarios, iremos haciendo pruebas con el programador, a ver si puedo hacer que todo encaje bien.
salu2
Usuario desconocido
Es que eso ya no existe. Antes se podia prever unos anchos "tipicos", 800, 1024, 1200, etc, pero ahora con las tablets, los netbooks, los moviles etc., hay anchos de 960, 768, 840..., ya no hay unos saltos claros como antaño y la decision es mas bien arbitraria.
Si te sirve de referencia, bootstrap que es mas o menos un estandar, fija los saltos en 768, 990, y 1200, que vendrian a corresponder con los clasicos de 800, 1024 y 1260. Los que has puesto tambien servirian, quiza 990 mejor que 1000 para dar suficiente espacio para la barra de desplazamiento.
smalonso Mod
Unos breakpoints comunes según convenga son:
A partir de ahí otros superiores o inferiores.