Si las páginas web estuvieran hechas de madera, la veta correría hacia arriba y hacia abajo. Vertical es el flujo natural del diseño web. Cuando los elementos de la página llegan al borde derecho de la ventana del navegador y pasan, el flujo por defecto “envuelve” ese elemento en la siguiente línea. Cuanto más contenido hay en la página, más alta se vuelve, no más ancha. ¿Por qué es esto? Porque tiene sentido. Nuestros ojos están acostumbrados a leer líneas de texto bastante cortas, por lo que si viéramos un párrafo de texto en una línea recta larga, sería doloroso leerlo. Los párrafos deben tener saltos de línea para que sean legibles (de ahí el término “bloques” de texto). Seguro que no queremos codificar saltos de línea en el marcado nosotros mismos. Obviamente, no tenemos que hacerlo, el navegador hace este ajuste por nosotros. De ahí la expansión vertical.
Este flujo natural ha dado lugar a convenciones en el diseño de páginas web e incluso en el propio hardware. Observe cuántos ratones de computadora (¿ratones?) Tienen un desplazador especial exclusivamente para el desplazamiento vertical. Pero las páginas web están equipadas con barras de desplazamiento tanto verticales como horizontales, ¿verdad? Si somos responsables con nuestro diseño web, podemos ir “contra la corriente” y crear páginas web que utilicen principalmente el desplazamiento horizontal e incluso se pueden expandir horizontalmente a medida que agregamos más contenido. Quizás un ligero golpe a la “usabilidad”, ¡pero seguro que puede ser un toque creativo genial!
La mejor manera de hacerlo
Voy a arriesgarme aquí y decir que Creo que una tabla es la mejor técnica de diseño para un sitio de desplazamiento horizontal.
Actualización: este es un artículo bastante antiguo. El núcleo de esto era solo que con una tabla puedes colocar las cosas en una fila que sigue y sigue sin saltos de línea. Podrías lograr eso hoy con display: flex; en un padre mucho más fácil, aunque la UX de esto es bastante cuestionable.
Antes de explicar por qué, veamos un par de otras técnicas posibles:
- Establezca un ancho estático realmente amplio. Quizás la forma “más rápida y sucia” de comenzar un diseño horizontal es simplemente establecer un ancho estático realmente amplio en el elemento de la carrocería. Digamos, 10000px. Anímate y pruébalo, seguramente obtendrás una barra de desplazamiento horizontal. Si bien esto funciona, es un poco inflexible. Las páginas web son lugares dinámicos y debemos estar preparados para la capacidad de expansión, sin limitarnos a anchos estáticos. Piense en los sitios habituales de desplazamiento vertical. No andas estableciendo alturas estáticas en tus páginas, ¿verdad?
- Flotadores + Espacio en blanco. Pasé un tiempo jugando con el
float propiedad y la white-space propiedad para ver si podía encontrar una manera de luchar contra el ajuste automático del navegador, pero no tuve mucha suerte. Los elementos de página que flotan pero no tienen ancho exhiben una propiedad en la que se expanden al ancho del contenido dentro de ellos. Pensé que tal vez si ponía un montón de elementos flotantes dentro de eso, podría seguir expandiéndose más allá del ancho de la ventana del navegador. No dados. También hay una white-space: nowrap; propiedad en CSS que pensé que podría ser explotada para combatir el ajuste automático, pero solo funciona para elementos de texto, no bloques o cualquier cosa vieja que establezca en línea. Oh bien. - Utilice JavaScript para establecer un ancho. JavaScript claramente tiene la capacidad de manipular elementos de la página y realizar cálculos sobre la marcha. Podríamos usar esto para crear un entorno que se comporte en extensibilidad. Sin embargo, se consideró un mal mo-jo manejar el diseño de página con JavaScript. Estoy de acuerdo con esto en general, pero creo que puede usar JavaScript de esta manera siempre que lo haga de manera discreta y tenga cuidado de asegurarse de que la página vuelva a tener un diseño utilizable con JavaScript desactivado.
El método
Lo que necesitamos es un elemento de página que pueda expandirse horizontalmente según sea necesario y nunca “ajustarse”. Una fila de celdas de tabla encaja perfectamente aquí. Las celdas de la tabla se expandirán para adaptarse a cualquier contenido que esté dentro de ellas por su naturaleza, y nunca se ajustarán hasta que se inicie una nueva fila. Perfecto.
Supongamos que estamos tratando de distribuir una serie de publicaciones de blog una tras otra de forma horizontal. Necesitaríamos usar una estructura de página como esta:
<table>
<tr>
<td>
.. blog post #1
</td>
<td>
.. blog post #2
</td>
<td>
.. blog post #3
</td>
</tr>
</table>
¡Qué asco, verdad? Nunca se siente bien usar un marcado como ese, no solo porque es una tabla, sino también por lo poco semántico que es. Aquí estamos usando un montón de etiquetas que son exclusivamente para presentaciones y no tienen nada que ver con el contenido.
Idealmente, la estructura de nuestra página sería así:
<article class="post">
.. blog post #1 ..
</article>
<article class="post">
.. blog post #2 ..
</article>
<article class="post">
.. blog post #3 ..
</article>
¡Con jQuery, podemos tener fácilmente lo mejor de ambos mundos!
Escriba el marcado que queremos, obtenga el marcado que necesitamos
Vamos a usar jQuery para permitirnos el marcado que queremos (la estructura div) y manipularlo para obtener el marcado que necesitamos para el desplazamiento horizontal (la estructura de la tabla). Debería tener pequeñas alarmas en su cabeza aquí sobre el uso de JavaScript para el diseño, pero esté tranquilo, nos aseguraremos de que sin JavaScript habilitado el diseño sea perfectamente utilizable. Como beneficio adicional, el diseño también se podrá utilizar con CSS habilitado o sin él, y cualquier combinación.
Primero pensemos en lo que queremos que suceda:
- Envuelva TODAS las publicaciones en una sola etiqueta de tabla y una sola etiqueta de fila
- Envuelva CADA publicación en una etiqueta de celda de tabla
Ahora incluyamos jQuery en nuestra página en la sección de cabecera y escribamos el jQuery que necesitamos para hacer esto.
<script src="https://css-tricks.com/how-to-create-a-horizontally-scrolling-site/js/jquery.js"></script>
<script>
$(function() {
$("#page-wrap").wrapInner("<table cellspacing='30'><tr>");
$(".post").wrap("<td>");
});
</script>
¡Deberias hacer eso! Observe cómo el espacio entre celdas se agrega como un atributo en línea al elemento de la tabla. Normalmente podríamos aplicar relleno a las celdas con CSS, pero queremos asegurarnos de que cada bloque de publicación de blog sea lo más legible posible incluso con CSS desactivado. Sin esto, los bloques chocarían entre sí, lo que los haría difíciles de leer.
El archivo CSS completo para este ejemplo es muy, muy simple:
* {
margin: 0;
padding: 0;
}
body {
font-size: 62.5%;
font-family: 'Lucida Grande', Helvetica, sans-serif;
background: #121212;
color: #999;
padding: 20px;
}
tr {
vertical-align: top;
}
.post {
width: 500px;
}
p {
font-size: 1.2em;
margin: 0 0 15px 0;
}
h1 {
font-family: Sans-serif;
font-size: 4.0em;
letter-spacing: -1px;
color: #ccc;
}
h2 {
font-family: Sans-Serif;
font-size: 3.0em;
letter-spacing: -1px;
color: #ccc;
}
Solo algunas cosas dignas de mención. El ancho estático en .post div controla el ancho de cada bloque. La propiedad de alineación vertical en la fila de la tabla mantiene cada uno de los bloques alineados con la parte superior de las celdas de la tabla. Este valor predeterminado es medio, por lo que es necesario.
Los resultados
Con CSS y JavaScript activados (99% de los usuarios), tendremos un sitio de desplazamiento horizontal bien ejecutado. Con CSS y JavaScript desactivados (lectores de pantalla), la estructura de las publicaciones de blog individuales gobierna la página, asumiendo que están marcadas semánticamente, la página se verá genial. La única peculiaridad aquí es que si JavaScript está activado y CSS desactivado (RARO), la página se ve un poco extraña.
Ver la pluma
Publicaciones en una fila horizontal por envoltura de tabla por Chris Coyier (@chriscoyier)
en CodePen.
Otras técnicas de desplazamiento horizontal
Expandir literalmente el ancho de su página y usar barras de desplazamiento para navegar es solo una forma de lograr el efecto de desplazamiento horizontal. Los controles deslizantes de Javascript son otra ruta que puede tomar, que simula el efecto. Flash sería otra posibilidad. Cuando se trata de diseño web, ¡siempre hay muchas formas!
(Visited 1 times, 1 visits today)