[Resuelto] Medidas apropiadas al crear skin para que se vea bien en todas las pantallas

¡Hola! por primera vez no tengo un problema con los códigos que rompo, sino, más bien, con la estructura del foro en general. En un canal de discord me dijeron que el foro que estoy diseñando, se ve del asco y aparece descuadrado por todos lados, con scroll horizontal y muchas movidas que realmente casi me hicieron llorar. Al hablar de una posible solución me dijeron que el foro debía medir no más de 990px, que debía ocultar los widgets si no quería que apareciera el scroll horizontal en pantallas más pequeñas o que debía utilizar Responsive Design.

Probé con la opción número 1, pero aún cuando el wrap mida 800px los widgets miden otros 100px y el márgen de la izquierda 200px por lo que ya se me fue al demonio el límite.

Pensé en la opción de quitar los widgets, pero eso significaría un montón de trabajo descartado y un poco de estética también.

Y por último le eché un ojo al Responsive Design, el cuál no entendí en absoluto, así que hoy vengo a preguntarles, ¿alguien sabe cuáles son las medidas más apropiadas para que el foro se vea bien en todas las pantallas? o ¿alguien ha encontrado una solución a lo de que el foro no se descuadre en pantallas más pequeñas?

¡Hola, Rainbow! Por lo menos yo no he encontrado una manera para que nada se me desacomode si cambio el tamaño del foro, por eso desde un principio que lo tengo bien definido y después de saber cuál medida quiero usar ya comienzo a formar cada una de las partes del foro (tamaño del perfil, subforos, etc.), para no tener problemas después. Lo que si sé es que, al menos en mi experiencia, poner todo en pixeles es muchísimo mejor que poner porcentajes pues los píxeles son más fijos que los otros.

Mi consejo personal sería el que tengas que editar cada uno de los códigos que tienes para que todos queden bien con el nuevo tamaño del foro, lamentablemente eso si tomara todo su tiempo D:

Como referencia, mis foros nunca los hago más de 900px, la mayoría son de 850-800px que creo es la mejor medida para que se vea bien en todo tipo de pantallas. También te recomiendo usar Screenfly que la puedes encontrar en google, esa te ayuda a ir probando como se vería tu foro en distintas pantallas. Así no te da tantos problemas en el futuro :3

Quería poner mi granito de arena aquí aunque no sea una solución verdadera, así que espero y alguien más si tenga una mejor idea para esto^^ <3

Hola hola, arcoiris:

Me parece que la mínima resolución de pantalla que puede tener la gente a estas alturas del siglo XIX es una que mida 1024px en cuanto a lo horizontal, así que intentaría no pasarme mucho de los 1000 píxeles de ancho en el wrap del foro. Aunque voy a serte sincero, en mi vida he visto quizás dos foros en los que me apareciera alguna vez la scrollbar horizontal, y llevo ya mis añicos en este mundillo. Aparte de esa indicación, realmente no hay medidas más o menos indicadas, y ni tienes que hacerle caso a esto. El wrap de este foro mide 1100px y pico y yo estoy trabajando en un skin con un wrap de 1050px.

Es posible que la gente que dijera lo del foro estuviera viéndolo mediante el móvil o la tablet, lo que es otra historia. Al mismo tiempo, foroactivo ofrece opciones para crear un skin utilizado en dispositivos móviles. Yo cuando miro foros con el móvil lo hago desde la versión web porque a mí me da igual hacer scroll y hacer zoom, seré raro (?)

Te recomiendo lo mismo que Himchan: utiliza píxeles. Es mucho más preciso que utilizar porcentajes, que en pantallas pequeñas pueden achatar demasiado el foro. No hace falta que elimines los widgets si no quieres hacerlo (con 990 píxeles tienes más que suficiente para los widgets), pero presta atención a las propiedades que has puesto en los códigos porque puede haber algo ahí que esté desconfigurándolo todo. Otra cosa que te recomiendo es que tengas cuidado con los elementos estáticos, como es el caso de la navbar de este foro, o los widgets flotantes que seguro has visto. En pantallas más pequeñas pueden dar problemas, y más si utilizas porcentajes a la hora de proporcionar el foro.

Si dejas el link al foro, quizá podamos echarle un vistazo a ver qué da problemas y ayudarte a solucionarlo.

¡Gracias por las respuestas chicos! Les comparto el link del foro en cuestión Aquí.
Ambos coincidieron en que el wrap debe estar en píxeles y a un ancho entre 800-1000, afortunadamente, es así como lo tenía, en 990px como tal, no con porcentajes. El problema básicamente surgió cuando pedí ayuda sabiendo que conocen de js en discord y fue entonces cuando poco más y se burlaron de la estructura del foro, incluso me dieron una captura como prueba de que justamente estaba totalmente descuadrado, cuando yo en mis dos pantallas y con mis cuatro ojos, lo veía perfecto.

Usando el screenfly que Himchan sugirió, noté que sí, en pantallas de 15" hacia arriba, se ve un espacio monumental en la parte derecha que activa el scroll horizontal, incluso se nota dónde el fondo hace mosaico y en pantallas de 13" hacia abajo, se corta, no aparece el scroll siquiera. , no sé si será algo que falla o realmente será necesario quitarle los widgets y reducir el ancho del wrap, así que si pueden echarle un vistazo y decirme si ustedes lo ven descuadrado o algo así los amaré eternamente.

PD para Eine: Don't worry, yo también prefiero la versión web en móviles, pero también fue algo que me señalaron, que debería implementar algo para el diseño móvil porque se muestra con el skin por defecto, al parecer somos pocos los raritos que preferimos batallar con el zoom y todo eso

Traes un tema muy interesante a la mesa, en mi experiencia no hay una forma linda de hacer un skin responsivo en foroactivo y que en todas las resoluciones te quede el mismo lindo resultado. He llegado a ver un par de foros responsivos lindos pero en mi resolucion (1920x1080) no se ven tan bien como se verían en un resolución original.

Ya te lo comentaron pero lo mejor es usar pixeles y no porcentajes y sobre el ancho... pues eso depende mucho, puedes desde hacer un sondeo en tu foro para ver las resoluciones que tienen o confiar en las estadísticas y elegir una resolución. Usualmente yo me baso en estas estadísticas w3schools Browser Display Statics pero hay una gran consideración que debemos de tomar, que es tu audiencia en este caso dire que son hispano hablantes. Si nos vamos solo por las estadísticas si hicieras un foro de 1920 de ancho muchos deberían ser capaces de verlo lo cual es mentira para Latioamerica ya que en mi experiencia la mayoría aun tiene resoluciones entre 1280 y 1366 px de ancho y como dijo Eine algunos aun manejan el 1024px ya sea por uso de una PC vieja o solo usar una tablet.

Sin mas rollo que agregar, coincido que lo mejor es manejar un ancho entre 950 y 1000px para que el 100% de tus usuarios puedan visualizar tu foro, a como veo tu foro lo diseñaste para una resolución de 1366 y creo que lo que mas complica la navegación en tu foro en resoluciones menores es la barra de widgets (por cierto, en screenfly asegúrate que tienes activada la opción para ver el scroll que viene desactivada por default). En mi opinion con tu foro hay 3 opciones, si es un numero considerable de usuarios los que tienen potencial de batallar con tu foro entonces cambia el diseño, si son pocos usuarios puedes decirles que lamentablemente tu skin es de un mínimo de resolución de X tamaño (el que necesites) o acomodar el foro para adaptarlo a resoluciones mas pequeñas.

Y sobre la version web, pues hay muchas formas de arreglarlo, con CSS, en templates o un JS que force a todos los usuarios a usar la version web. Todo depende de la necesidad de tu foro

Hola hola:

Me he paseado por tu foro un ratejo y no he tenido problemas con el scroll horizontal. De hecho, solo lo he visto una vez me puse a jugar con el zoom (aunque también soy de resolución grande xD). Mi consejo es que ignores a los de ese otro Discord que no parecen ser gente muy maja si se burlan de tu foro, y que sigas codeando como te gusta a ti.

Se nota que estaba medio dormida cuando te conteste hay un CSS que te puede ayudar con ciertas resoluciones

Código:

@media only screen and (min-width : 360px) and (max-width : 1024px) {
  #algunID o .clase{

  }
}

Ese css te puede ayudar que depende de ciertas resoluciones algún elemento va a tener algún comportamiento. Es decir, con una resolución pequeña puedes ocultar la barra de widgets o poner un margen forzoso al wrap para que no se encime con tu barra de widgets

Y como dijo Eine, hay muchos trolls por ahí. A todos nos puede pasar que algún elemento de nuestros skins no se vean bien pero hay formas de decirlo y dudo que burlándose o decir que se ve del asco.

Tsukirii escribió:Se nota que estaba medio dormida cuando te conteste hay un CSS que te puede ayudar con ciertas resoluciones

Código:

@media only screen and (min-width : 360px) and (max-width : 1024px) {
  #algunID o .clase{

  }
}

Yo ya he probado ese código anteriormente cuando intentaba hacer un foro totalmente responsivo, pero pues prácticamente tiene que hacer un skin doble, porque no todas las partes del foro se pueden adaptar a medidas generales, y con una pizca que la pantalla sea más grande o más chica que esa medida impuesta de "minimo" entonces todo se va al carajo porque se desacomoda de nuevo.

Como opinión en este tema, concuerdo con Tsukirii, desafortunadamente foroactivo no es una plataforma que te permita hacer un foro 100% responsivo, pero al menos puedes mantener una misma medida si utilizas tamaños en pixeles y no en porcentajes (como tambien ya mencionaron antes), así no importa si la pantalla mide 1400 o 900 las medidas de tu foro se van a mantener iguales.

Mi recomendación es que revises de nuevo parte por parte con el inspector de elementos (y luego guardes los cambios en tu CSS) para que vuelvas a acomodar todo con una medida fija. ¡Suerte!

Si es complicado de usar pero de cierta forma si son elementos muy concretos si te los puede corregir, por ejemplo en mis foros lo tengo para que me mantenga la font del mismo tamaño ya que no se porque en algunos dispositivos moviles me hacia la font mas grande y me arruinaba varias cosas por lo que uso

Código:

@media only screen and (min-width : 768px) and (max-width : 1024px) {
  body{
    -webkit-text-size-adjust: none;
  }

También por ejemplo, si en una resolución de... digamos 1024px tu barra de widgets se encima con el wrap entonces le puedes poner un margin-left o una posición al wrap. Pero si es manipular muchos elementos, como dice Roshio, es hacer un segundo skin que es mucho problema.

Well, entonces después de revisar todas las soluciones, al parecer dejarlo en 990px de ancho, ponerle los márgenes en auto y mover el widget de últimos temas a un tablón de anuncios ha sido la mejor opción. Muchas gracias a todos los que respondieron y si alguna vez alguien descubre alguna receta mágica para poder hacerlo responsive no olviden que hay un Lucifer que todo lo ve y si no comparten la receta, el foro estará maldito (?