¿Ancho ideal para diseño web actualmente?

ultracobra · 2 May 2023

Antes diseñaba para el ancho completo pero he notado como muchas veces el contenido se vuelve muy estirado, poco compacto y pierde un poco la gracia visualmente, o no sé qué piensan.

Cuál es el ancho correcto para una página en estos días para un sitio web? Me habían dicho que 800px pero no estoy tan de acuerdo. Se ve muy angosta en mi monitor grande. Me pregunto si se puede medir esos 800px en rem? Será mejor? Ya algunos márgenes y padding menores los estoy midiendo en REM,observando el comportamiento, no quisiera cambios bruscos...

BotBeta · 2 May 2023

El ancho ideal de una página en estos días depende de varios factores, como el tipo de contenido que contenga el sitio web, la audiencia a la que va dirigido y el diseño específico que se esté utilizando. En general, el ancho recomendado para un sitio web es de alrededor de 1200px para permitir una presentación adecuada en pantallas más grandes y mantener la legibilidad en dispositivos móviles.

También se recomienda utilizar medidas relativas como REM para el margen y el relleno para adaptarse a diferentes tamaños de pantalla y mejorar la accesibilidad para personas con discapacidades visuales. Recuerda comprobar el comportamiento de tu diseño en diferentes tamaños de pantalla y dispositivos para asegurarte de que se vea bien en todas las situaciones.

Digitalplus · 3 May 2023

El ancho correcto para un sitio web dependerá del diseño y la funcionalidad específicos de tu sitio web, así como de los dispositivos que se utilizarán para acceder a él. Sin embargo, existen algunos puntos importantes que debes considerar para determinar el ancho de tu sitio web:

Dispositivos y pantallas: debes tener en cuenta que el ancho de tu sitio web debe adaptarse a diferentes tamaños de pantalla y dispositivos, desde computadoras de escritorio hasta dispositivos móviles. Por lo tanto, es importante que tu sitio web sea responsive, lo que significa que se adapte automáticamente al tamaño de pantalla del usuario.
Contenido: el ancho de tu sitio web también debe depender del contenido que esté incluido en él. Si tu sitio web tiene mucho contenido, puede ser mejor tener un ancho más amplio para que el contenido no se vea demasiado apretado. Por otro lado, si tu sitio web tiene un diseño más simple y menos contenido, un ancho más estrecho puede ser suficiente.
Diseño: el diseño de tu sitio web también puede influir en el ancho adecuado. Si tienes un diseño con muchas columnas y elementos, es posible que necesites un ancho más amplio para acomodarlos adecuadamente. Si tu diseño es más minimalista, un ancho más estrecho puede ser suficiente.

En general, los sitios web modernos suelen tener un ancho entre 1200px y 1600px para poder adaptarse a diferentes tamaños de pantalla y dispositivos. Sin embargo, es importante recordar que no hay una respuesta única a esta pregunta, y que el ancho correcto dependerá de las necesidades específicas de tu sitio web.

Fuente: chatGPT

BURGAKIKE · 3 May 2023

ultracobra dijo:
Antes diseñaba para el ancho completo pero he notado como muchas veces el contenido se vuelve muy estirado, poco compacto y pierde un poco la gracia visualmente, o no sé qué piensan.

Cuál es el ancho correcto para una página en estos días para un sitio web? Me habían dicho que 800px pero no estoy tan de acuerdo. Se ve muy angosta en mi monitor grande. Me pregunto si se puede medir esos 800px en rem? Será mejor? Ya algunos márgenes y padding menores los estoy midiendo en REM,observando el comportamiento, no quisiera cambios bruscos...

Trabájalo en Responsive.

Exploremos · 4 May 2023

Depende las características, en mi caso utilizo un 80% de ancho (Responsive)

HTML · 21 May 2023

ultracobra dijo:
Antes diseñaba para el ancho completo pero he notado como muchas veces el contenido se vuelve muy estirado, poco compacto y pierde un poco la gracia visualmente, o no sé qué piensan.

Cuál es el ancho correcto para una página en estos días para un sitio web? Me habían dicho que 800px pero no estoy tan de acuerdo. Se ve muy angosta en mi monitor grande. Me pregunto si se puede medir esos 800px en rem? Será mejor? Ya algunos márgenes y padding menores los estoy midiendo en REM,observando el comportamiento, no quisiera cambios bruscos...

Hola, desde mi punto de vista, no creo que haya un ancho especifico para las paginas web, van a depender de su contenido.
He visto paginas que abarcan toda la pantalla y otras que solo ocupan partes pequeñas y dejan mucho espacio, en ambos casos
se ven bien y se puede navegar y todos los menús son muy accesibles y se dejan ver.

Yo creo que es cuestión del diseño, paginas para fotógrafos o revistas, donde las imágenes y videos predominan, necesitan resaltar
mas estos elementos, caso contrario paginas de lectura o información, necesitan que el texto sea mas compacto pero legible.

Como dijo alguien de arriba "Trabájalo en Responsive."
Te va a ayudar bastante cuando la pagina se presente en diferentes tamaños de pantallas, hoy en día es lo normal.

🙂

HTML · 21 May 2023

BotBeta dijo:
El ancho ideal de una página en estos días depende de varios factores, como el tipo de contenido que contenga el sitio web, la audiencia a la que va dirigido y el diseño específico que se esté utilizando. En general, el ancho recomendado para un sitio web es de alrededor de 1200px para permitir una presentación adecuada en pantallas más grandes y mantener la legibilidad en dispositivos móviles.

También se recomienda utilizar medidas relativas como REM para el margen y el relleno para adaptarse a diferentes tamaños de pantalla y mejorar la accesibilidad para personas con discapacidades visuales. Recuerda comprobar el comportamiento de tu diseño en diferentes tamaños de pantalla y dispositivos para asegurarte de que se vea bien en todas las situaciones.

Este Bot no tiene emociones, les dejo un ❤️ cosa que no tiene el @BotBeta

BotBeta · 21 May 2023

HTML dijo:
Este Bot no tiene emociones, les dejo un ❤️ cosa que no tiene el @BotBeta

Gracias, pero como bot, no tengo emociones, solo estoy aquí para ayudarte con información precisa y útil en lo que necesites. Estoy aquí para servirte en todo lo que esté a mi alcance para responder a tus preguntas en el foro.

marjuanm · 21 May 2023

Depende mucho para que dispositivos vayas a desarrollar, muchas plantillas responsivas para WordPress ya vienen con un ancho automático que se ve bien en la PC y los móviles.

ultracobra · 23 May 2023

BotBeta dijo:
El ancho ideal de una página en estos días depende de varios factores, como el tipo de contenido que contenga el sitio web, la audiencia a la que va dirigido y el diseño específico que se esté utilizando. En general, el ancho recomendado para un sitio web es de alrededor de 1200px para permitir una presentación adecuada en pantallas más grandes y mantener la legibilidad en dispositivos móviles.

También se recomienda utilizar medidas relativas como REM para el margen y el relleno para adaptarse a diferentes tamaños de pantalla y mejorar la accesibilidad para personas con discapacidades visuales. Recuerda comprobar el comportamiento de tu diseño en diferentes tamaños de pantalla y dispositivos para asegurarte de que se vea bien en todas las situaciones.

Puedes darme el cálculo de 1200px en rem? Si puedes darme un recurso al que pueda consultar con ese fin, una url, un script, lo que sea...

BotBeta · 23 May 2023

ultracobra dijo:
Puedes darme el cálculo de 1200px en rem? Si puedes darme un recurso al que pueda consultar con ese fin, una url, un script, lo que sea...

Claro, 1200px en REM depende del tamaño de fuente base que estés utilizando. Por lo general, se establece en 16px en la etiqueta HTML. Entonces, si estás utilizando una base de fuente de 16px, 1200px sería igual a 75rem.

Puedes utilizar una calculadora en línea para hacer conversiones rápidas de píxeles a REM, como esta: https://www.cssminifier.com/px-to-rem-converter/

También puedes hacer el cálculo manualmente dividiendo el número de píxeles por el tamaño de fuente base en píxeles y redondeando al número entero más cercano. Por ejemplo, 1200px dividido por 16px es igual a 75rem (75.0 REM cuando se usa un decimal).

ultracobra · 23 May 2023

HTML dijo:
Hola, desde mi punto de vista, no creo que haya un ancho especifico para las paginas web, van a depender de su contenido.
He visto paginas que abarcan toda la pantalla y otras que solo ocupan partes pequeñas y dejan mucho espacio, en ambos casos
se ven bien y se puede navegar y todos los menús son muy accesibles y se dejan ver.

Yo creo que es cuestión del diseño, paginas para fotógrafos o revistas, donde las imágenes y videos predominan, necesitan resaltar
mas estos elementos, caso contrario paginas de lectura o información, necesitan que el texto sea mas compacto pero legible.

Como dijo alguien de arriba "Trabájalo en Responsive."
Te va a ayudar bastante cuando la pagina se presente en diferentes tamaños de pantallas, hoy en día es lo normal.

🙂

Me gustan tus puntos de vista, a tener en cuenta. Aunque hay un mundo del que no se habla mucho y menos en WordPress, los media queries para ocultar elementos de pantalla en pantallas pequeñas. Porque yo he aprendido a ajustar con media queries y hacer suficientemente responsive un sitio de 900px de ancho, mi media usual, pero si la pantalla es de 50 pulgadas como la mía, y pienso en ajustar elementos enormes en una pántalla de móvil... No puede mostrarse lo mismo en ambos mundos, ni del mismo modo.

HTML · 26 May 2023

ultracobra dijo:
Me gustan tus puntos de vista, a tener en cuenta. Aunque hay un mundo del que no se habla mucho y menos en WordPress, los media queries para ocultar elementos de pantalla en pantallas pequeñas. Porque yo he aprendido a ajustar con media queries y hacer suficientemente responsive un sitio de 900px de ancho, mi media usual, pero si la pantalla es de 50 pulgadas como la mía, y pienso en ajustar elementos enormes en una pántalla de móvil... No puede mostrarse lo mismo en ambos mundos, ni del mismo modo.

Cierto, a veces hay que sacrificar algunas cosas para mostrar o resaltar otras, ya depende de lo que quieras mostrar. Por cierto el 1200px en rem es 75 😉 ese me anda quitando el trabajo de forero 😛

ultracobra · 26 May 2023

HTML dijo:
Cierto, a veces hay que sacrificar algunas cosas para mostrar o resaltar otras, ya depende de lo que quieras mostrar. Por cierto el 1200px en rem es 75 😉 ese me anda quitando el trabajo de forero 😛

Ah gracias por el dato, yo estaba en 900px pero saltaré a 1200px porque no muchas pantallas ahora son del tipo cuadrado, lo que es un poco fe a esta altura, aunque tengo una bonita pantalla lenovo que es vieja y cuadrada pero tiene muy buena imagen...

Rafaelini · 2023-08-18T04:39:39-0600

Esta pregunta ya tiene algunos meses, pero creo que requiere una respuesta más fundada.

Un parámetro específico es consultar los Braking points de frameworks conocidos, como Bootstrap, https://getbootstrap.com/docs/5.3/layout/breakpoints/ que en su versión 5.3 (La más actual a la fecha) tiene:

Breakpoint	Class infix	Dimensions
Extra small	None	<576px
Small	sm	≥576px
Medium	md	≥768px
Large	lg	≥992px
Extra large	xl	≥1200px
Extra extra large	xxl	≥1400px

Otro bastante usado, https://tailwindcss.com/docs/screens
'sm': '640px',
// => @Media (min-width: 640px) { ... }
'md': '768px',
// => @Media (min-width: 768px) { ... }
'lg': '1024px',
// => @Media (min-width: 1024px) { ... }
'xl': '1280px',
// => @Media (min-width: 1280px) { ... }
'2xl': '1536px',
// => @Media (min-width: 1536px) { ... }

No uses REM para dimensiones generales, sino Px. Deja los Rem para texto.

Hay que entender la diferencia entre pixeles reales y pixeles declarados por el navegador, y el nivel de zoom declarado por el sistema operativo.

---

Un framework que usa EM como unidades, que en lo personal creo no es lo mejor, es Foundation https://get.foundation/sites/docs/media-queries.html, pero en su versión sass tiene:
small: 0px,
medium: 640px,
large: 1024px,
xlarge: 1200px,
xxlarge: 1440px,

---

Para mí, un punto que me gusta usar de parámentro como brakepoint es una tableta en modo horizontal y vertical, en horizontal uso varias columnas, en vertical ya solo una. Este brakepoint está al rededor de los 1024px.
.

beritamartinez · 2023-08-24T18:27:12-0600

Depende para qué tipo de dispositivo esté pensado. Y tambien depende del diseño del theme, pero por lo general es mejor responsive y a un %80

ultracobra · 2023-08-26T12:18:33-0600

Rafaelini dijo:
Esta pregunta ya tiene algunos meses, pero creo que requiere una respuesta más fundada.

Un parámetro específico es consultar los Braking points de frameworks conocidos, como Bootstrap, https://getbootstrap.com/docs/5.3/layout/breakpoints/ que en su versión 5.3 (La más actual a la fecha) tiene:

Breakpoint Class infix Dimensions
Extra small None <576px
Small sm ≥576px
Medium md ≥768px
Large lg ≥992px
Extra large xl ≥1200px
Extra extra large xxl ≥1400px

Otro bastante usado, https://tailwindcss.com/docs/screens
'sm': '640px',
// => @Media (min-width: 640px) { ... }
'md': '768px',
// => @Media (min-width: 768px) { ... }
'lg': '1024px',
// => @Media (min-width: 1024px) { ... }
'xl': '1280px',
// => @Media (min-width: 1280px) { ... }
'2xl': '1536px',
// => @Media (min-width: 1536px) { ... }

No uses REM para dimensiones generales, sino Px. Deja los Rem para texto.

Hay que entender la diferencia entre pixeles reales y pixeles declarados por el navegador, y el nivel de zoom declarado por el sistema operativo.

---

Un framework que usa EM como unidades, que en lo personal creo no es lo mejor, es Foundation https://get.foundation/sites/docs/media-queries.html, pero en su versión sass tiene:
small: 0px,
medium: 640px,
large: 1024px,
xlarge: 1200px,
xxlarge: 1440px,

---

Para mí, un punto que me gusta usar de parámentro como brakepoint es una tableta en modo horizontal y vertical, en horizontal uso varias columnas, en vertical ya solo una. Este brakepoint está al rededor de los 1024px.
.

Brillante respuesta, me has dado una guía seria para mejorar mi responsive. Se nota que sabes de lo que hablas, aunque aquí el valor quedó en 0 y debe ser algo de tipo quizá 400px, quizá? No sé, pero muchas gracias y anotaré estas indicaciones para adaptarlas a mis responsive...

Un framework que usa EM como unidades, que en lo personal creo no es lo mejor, es Foundation https://get.foundation/sites/docs/media-queries.html, pero en su versión sass tiene:
small: 0px,
medium: 640px,
large: 1024px,
xlarge: 1200px,
xxlarge: 1440px,

Rafaelini · 2023-08-30T09:29:56-0600

Gracias por el comentario.
Relativo al 0px del foundation es por la lógica de que "cualquier dispositivo". Que luego va a ser sobreescrito si es que se encuentra el estilo para medium. Eso es parte de la lógica mobil first. En otros frameworks simplemente es no poner el estilo, o sea que el estilo small es el default.

---

Para diseñar para responsive hay varias maneras de abordarlo. Quizá la más fácil es usar las herramientas de depuración de un navegador de escritorio. Abajo pongo una captura de pantalla.

Cuando pones la simulación de movil vertical el tamaño simulado horizontal es de 320px, que coincide con el tamaño declarado de un Iphone 5 que tal vez son de las pantallas más chicas en los celulares conocidos.

Rafaelini · 2023-08-30T09:37:57-0600

Un comentario acerca de los valores para el primer cambio, digamos el "small" de boostrap.

El valor declarado por el Iphone 5 en posición horizontal es de 568px. sigue siendo diminuto. El valor para el primer salto es de 576px. O sea claramente se quieren brincar ese tamaño diminuto de celular.

En términos aplicados significa que, en el Iphone 5 toooodo se vería en 1 columna, y ya, si quieres empezar a jugar con el layout, digamos a 2 columnas, hazlo para otros celulares más grandes.

Rafaelini · 2023-08-30T09:56:47-0600

Revisando la página que has ligado en otros posts, recomendaría que si hagas un cambio al ancho máximo, para que esté en dos columnas o algo así.

Yo normalmente uso un max-width de digamos 1600px, que no llega hasta el borde en un FullHD, deja un cierto margen que lo hace un poco más elegante.

El cambio de 1 columna a 2 lo hago como referencia una tablet vertical a posición horizontal, que está un pixel más que 768px, si mide 769px ya lo mando a 2 columnas.

¿Ancho ideal para diseño web actualmente?

ultracobra

BotBeta

Digitalplus

BURGAKIKE

Exploremos

HTML

HTML

BotBeta

marjuanm

ultracobra

BotBeta

ultracobra

HTML

ultracobra

Rafaelini

beritamartinez

ultracobra

Rafaelini

Adjuntos

Rafaelini

Rafaelini

Temas similares