Recursos y herramientas realmente útiles para el diseño web receptivo

Diseño web adaptable ha sido un tema de moda desde hace un tiempo, se han desarrollado muchas herramientas en torno a esta técnica para ayudar a los diseñadores y usuarios a aprovechar al máximo sus navegadores móviles y tabletas. Incluso si el diseño receptivo no se limita a los dispositivos pequeños, la mayoría de los recursos publicados hoy se dirigen al mundo de los dispositivos móviles y las tabletas y tratan de brindar formas fáciles de crear sitios web atractivos y flexibles. Cuando se trata de un diseño receptivo, lo primero en lo que piensan la mayoría de los diseñadores son las consultas de medios.

En este artículo, iremos mucho más allá de las consultas de los medios y mostraremos una lista de herramientas y recursos útiles todos podrían usar para mejorar la visualización de su sitio web para dispositivos móviles, tabletas y, por supuesto, navegadores de escritorio.

Recursos para el Diseño Web Responsivo

Tratar con eventos táctiles

Todo el mundo se ha dado cuenta ahora: no hay ratón con navegadores de móviles/tabletas. Por lo tanto, tratar el evento táctil se ha convertido en una parte muy importante de la adaptación del sitio web para los navegadores móviles. Algunos desarrolladores han creado complementos para facilitarnos la vida.

Martillo.JS
Una biblioteca de JavaScript para manejar eventos de gestos. Actualmente admite tocar, tocar dos veces, mantener presionado, arrastrar y transformar. Esta es una biblioteca independiente que no requiere nada más, pero está disponible como complemento de jQuery.

jGestos
Un complemento de jQuery para crear eventos de gestos como pellizcar, rotar, deslizar, tocar y detectar el cambio de orientación del dispositivo.

Quisquilloso
Una biblioteca de JavaScript muy pequeña (menos de 2 Kb) que ayuda a manejar eventos táctiles. Esta es una biblioteca independiente sin dependencias (como jQuery).

Creación de cuadrículas receptivas

El diseño de cuadrícula ha existido por un tiempo y, con el auge del diseño receptivo, han aparecido algunas herramientas nuevas para ayudar a los desarrolladores a crear cuadrículas flexibles.

Gridpak
Una herramienta en línea para crear cuadrículas flexibles personalizadas. Se puede cambiar el número de columnas, el relleno y el medianil, se pueden agregar algunos puntos de interrupción y se genera el CSS, listo para descargar. La ventaja de la herramienta: proporciona una plantilla de cuadrícula PNG que se puede usar para diseñar en Photoshop, por ejemplo.

FluidGrids
Otra herramienta que generará un CSS de diseño de cuadrícula receptivo.

Calculadora receptiva
Una herramienta en línea que lo ayudará cuando desee convertir el diseño de píxeles en porcentajes de respuesta.

Sistema de cuadrícula sensible
El Responsive Grid System no es un marco. Tampoco es un repetitivo. Es una forma rápida, fácil y flexible de crear un sitio web receptivo.

Creación de diseños flexibles y complejos de forma sencilla

Crear diseños que encajen en la página puede ser muy complicado sin la ayuda de algunas bondades de JavaScript. Aquí hay una lista de tres complementos que dominan la flexibilidad del diseño de cuadrícula.

Albañilería
Un complemento de jQuery para crear cuadrículas dinámicas y adaptables. El complemento reorganizará los elementos para que encajen en los lugares abiertos de la cuadrícula.

Isótopo
Otro complemento de JavaScript que hace la misma reorganización de los elementos en una cuadrícula, pero también proporciona una forma de filtrar esos elementos.

El complemento Wookmark jQuery
Un complemento de jQuery que organizará y organizará automáticamente los elementos en columnas en una cuadrícula.

Tratar con la navegación en el diseño receptivo

Cómo lidiar con la navegación en pantallas más pequeñas puede presentar una gran pregunta. Aquí hay algunos recursos y artículos que intentan responder a esta pregunta.

Patrones de navegación receptivos
No se trata de una herramienta ni de un script, sino de un artículo que todo diseñador debería leer y que resume las tendencias más comunes cuando se trata de navegación receptiva, con pros y contras para cada solución.

TinyNav
Un complemento jQuery, que simplemente convertirá las listas de navegación en menús desplegables seleccionados para pantallas más pequeñas.

Complemento jQuery de navegación móvil
Otro complemento que convertirá los enlaces de navegación en una lista desplegable para pantallas más pequeñas.

Controles deslizantes receptivos (sin deslizar)

Tener una buena presentación de diapositivas realmente puede agregar algo de interactividad en un sitio web, es una buena manera de mostrar el trabajo en una cartera, productos o simplemente imágenes. Se han desarrollado algunas buenas soluciones para permitir que los usuarios de dispositivos móviles también tengan buenas presentaciones de diapositivas.

Control deslizante CSS3 receptivo
Un control deslizante CSS3 que se adaptará al tamaño del navegador. El buen truco con este control deslizante es que las flechas van dentro de la presentación de diapositivas en pantallas más pequeñas. Dado que es CSS3, no se necesita JavaScript (pero se proporciona una corrección de JavaScript para los navegadores que no admiten CSS3).

ResponsiveSlides
Un pequeño JavaScript basado en jQuery que creará un pequeño control deslizante receptivo, utilizando listas desordenadas.

Arándano
Otra presentación de diapositivas basada en JavaScript jQuery que se adaptará al tamaño del navegador.

Panorámica
Un complemento de JavaScript que permitirá a los diseñadores web crear hermosos controles deslizantes, con imágenes y contenido de texto personalizables.

Controles deslizantes táctiles

Los controles deslizantes receptivos son excelentes, pero un poco frustrantes en un dispositivo móvil o tableta cuando la mayoría de los usuarios están acostumbrados a deslizar la aplicación nativa entre las galerías de imágenes. Entonces, algunos desarrolladores han creado algunos controles deslizantes que funcionarán con el gesto de “deslizar”.

Deslizar JS
Un complemento deslizante de JavaScript muy simple que permite al usuario deslizar entre diferentes paneles. Puede poner imágenes, texto y cualquier HTML en esos paneles.

Control deslizante Sutunam
Este control deslizante viene en una versión de control deslizante y control deslizante de pantalla completa. Los usuarios pueden deslizar o usar las flechas para navegar.

Deslizar foto
El complemento de JavaScript más conocido para crear galerías de imágenes y controles deslizantes que funciona en dispositivos móviles, este complemento está inspirado en la galería nativa de iOS, pero también es compatible con Android y BlackBerry.

Soluciones de imagen para dispositivos con pantalla Retina

Con la nueva pantalla retina del iPad 3, brindar imágenes de calidad a los dispositivos que pueden mostrarlas se ha vuelto cada vez más importante. Las siguientes herramientas brindan soluciones fáciles para apuntar a esos dispositivos de retina y brindarles imágenes de mejor calidad.

Imágenes adaptables
Una solución basada en JavaScript que puede detectar el tamaño de la pantalla del visitante y mostrar la imagen correcta, sin necesidad de cambiar el código. Este script requiere acceso htaccess.

Imágenes de retina
Una solución basada en JavaScript que cambiará la imagen actual por una @2x si se proporciona cuando el usuario tiene un dispositivo de pantalla retina. Aquí nuevamente, no es necesario cambiar el código HTML.

Retina.js
Otra solución de JavaScript que cambiará las imágenes por @2x para usuarios con dispositivos retina. Este script también viene con MENOS integración.

Prueba del diseño

Tener excelentes recursos con los que trabajar es excelente, pero no todos tienen dispositivos móviles y tabletas para probar el diseño, por lo que terminaré esta presentación con algunas herramientas útiles para las pruebas receptivas.

Marcador de cambio de tamaño
Este es un bookmarklet para arrastrar y soltar en la barra de marcadores, que luego creará un menú desplegable, con funcionalidades de navegador móvil y tamaños de pantalla.

pantallaqueri.es
Una herramienta bastante nueva que le permite probar diseños utilizando una interfaz de píxeles perfectos y algunos tamaños de navegador predeterminados para dispositivos móviles y tabletas.

Responsivepx
Esta es una herramienta para ayudarlo a encontrar el punto de interrupción complicado que ha estado buscando.

Conclusión

Eso es todo por hoy, ya no tienes excusa para no adaptar tu sitio web a diferentes tamaños de pantalla, ya sea móvil, tablet, escritorio o incluso más grandes, quién sabe.

Por supuesto, esta es una lista no exhaustiva puramente subjetiva y basada en las herramientas que más uso. Le recomiendo encarecidamente que comparta con nosotros las herramientas que utiliza en la sección de comentarios a continuación.

0 Shares:
Te Recomendamos