8 fragmentos de código para hacer que tu paginación destaque

La paginaci√≥n es una de esas peque√Īas necesidades de dise√Īo que a menudo se pasa por alto. Pero para los blogs y otros sitios con mucho contenido, proporciona un medio importante de navegaci√≥n. Un men√ļ bien dise√Īado puede alentar a los usuarios a explorar m√°s a fondo lo que tiene para ofrecer.

Lo creas o no, hay dise√Īadores que se atreven a llevar la paginaci√≥n al siguiente nivel. Aqu√≠ hay un vistazo a algunos fragmentos de c√≥digo muy creativos que puede usar para mejorar su propio sitio web.

Efectos de desplazamiento simples e intuitivos

Nuestro primer ejemplo muestra c√≥mo algunos efectos b√°sicos de desplazamiento pueden mejorar enormemente la paginaci√≥n est√°ndar. El subrayado ultra suave que sigue a su cursor lo convierte en una experiencia mucho m√°s intuitiva. Adem√°s, todo el men√ļ es muy f√°cil de leer. Esta es una manera simple de ayudar a los usuarios.

Cuenta en vivo

Una de las partes m√°s frustrantes de la paginaci√≥n puede ser c√≥mo los men√ļs manejan una gran cantidad de p√°ginas. Este fragmento utiliza jQuery para ajustarse autom√°ticamente para mostrar n√ļmeros de p√°gina adyacentes a medida que hace clic. Es un camino mucho m√°s f√°cil para profundizar en un sitio.

El lavabo de la cocina

Aqu√≠ hay un concepto muy interesante. Dise√Īado para ser receptivo y m√°s accesible, esta interfaz de usuario de paginaci√≥n contiene m√ļltiples formas de navegar, incluso a trav√©s del teclado. La barra similar a la l√≠nea de tiempo en la parte superior etiqueta claramente la p√°gina actual y ofrece una excelente visi√≥n general de todo lo disponible.

Deje que el Yeti se encargue de eso

Dicen que una buena ayuda es dif√≠cil de encontrar. Pero este fragmento proporciona la ayuda de un Yeti (al menos, la mano de un Yeti) al hacer clic en los n√ļmeros de p√°gina. Si bien Yetis puede no encajar con su motivo, este es un ejemplo de c√≥mo podemos agregar el elemento de diversi√≥n (y sorpresa).

Mejorado para pantallas móviles

En pantallas m√°s peque√Īas, la paginaci√≥n puede ser terriblemente dif√≠cil de usar. Los elementos de navegaci√≥n a menudo son demasiado peque√Īos y dif√≠ciles de leer. Este fragmento proporciona una excelente alternativa para dispositivos m√≥viles. Cada elemento es m√°s grande, ya que la navegaci√≥n se extiende verticalmente. El resultado es que los usuarios de dispositivos m√≥viles pueden moverse sin tener que entrecerrar los ojos o acercarse.

No se necesitan n√ļmeros

A veces, no necesitamos numerar cada elemento dentro de la paginaci√≥n. Este ejemplo es atractivamente m√≠nimo con el uso de puntos, en lugar de n√ļmeros. Es una buena soluci√≥n para presentaciones de diapositivas o para navegar por m√ļltiples paneles de contenido.

Toque amigable

La interfaz de usuario m√≥vil funciona mejor cuando reacciona al tacto de un usuario. Aqu√≠ tenemos una paginaci√≥n que permite al usuario deslizar para llegar al elemento siguiente o anterior. Esta peque√Īa conveniencia puede marcar la diferencia cuando se trata de usabilidad.

Combo de paginación / desplazamiento infinito

Los dise√Īadores a menudo usan el desplazamiento infinito para reemplazar la paginaci√≥n. Pero este es un concepto claro de c√≥mo se pueden combinar. La frustraci√≥n del desplazamiento infinito es que puede ser dif√≠cil regresar y encontrar ese elemento en particular en una larga lista. Este script agrega nuevos n√ļmeros de p√°gina a la navegaci√≥n a medida que contin√ļa desplaz√°ndose hacia abajo, lo que hace que retroceder sea un poco m√°s f√°cil.

Mover la paginación hacia adelante

Un gran dise√Īo web no ignora los diversos elementos que componen una p√°gina. Los profesionales anteriores muestran que la paginaci√≥n tiene m√°s que ofrecer cuando te esfuerzas por mejorarla. Por lo tanto, insp√≠rese en estos ejemplos y cree men√ļs de paginaci√≥n que se vean y funcionen mejor.