50 bibliotecas y recursos útiles para el diseño web receptivo

Hablemos del diseño web responsivo. Las personas dependen cada vez más de sus dispositivos móviles inteligentes, y es probable que una gran parte de los visitantes de su sitio web hayan utilizado su teléfono o tableta para acceder a él. En este artículo encontrarás 50 artículos, herramientas y recursos que te ayudarán a aprender qué es la capacidad de respuesta y cómo aplicar estas técnicas a tu sitio web actual. ¡Feliz aprendizaje!

Conceptos básicos

Comencemos con estos artículos que explican las ideas básicas de capacidad de respuesta.

1. Hazlo receptivo

"Make it Responsive" de Google es una excelente introducción al tema. Te llevará a los diseños web receptivos. Durante este curso, creará un sitio que funcione en varios tamaños de pantalla y tipos de dispositivos. También tienen otras guías útiles que recomendamos.

2. Tutorial de diseño web receptivo de MDN

Este es un buen artículo de MDN sobre algunas de las estrategias básicas que la gente usa para lograr la capacidad de respuesta, como diseños líquidos o fluidos, consultas de medios e imágenes fluidas. También han destacado enlaces útiles a recursos externos sobre diseño web receptivo.

3. 5 patrones de diseño web receptivo realmente útiles

El increíble artículo de DesignShack presenta muchos patrones de ejemplo que pueden ayudarlo a planificar su propio diseño de página. Algunos de los ejemplos son realmente simples y otros brindan ideas más imaginativas sobre cómo organizar los elementos HTML.

4. Tutorial de Diseño Web Responsivo

Shayhowe presenta una excelente serie de lecciones sobre diseño web. Uno de ellos te enseña cómo hacer que cualquier página sea compatible con dispositivos móviles. Comienzan desde la base de la capacidad de respuesta y avanzan hacia diferentes formas de hacer que cualquier página sea perfectamente visible en diferentes tamaños de pantalla.

5. 9 principios básicos del diseño web receptivo

Froont hizo este extraño artículo que nos muestra la diferencia entre las estrategias divergentes utilizadas en la creación de aplicaciones web receptivas. Obtienen puntos de bonificación por usar animaciones geniales para presentar las ventajas de cada técnica. Esta es una forma muy divertida de aprender cosas nuevas.

6. Tutorial de diseño web adaptable de A List Apart

Un artículo detallado sobre diseño receptivo que cubre temas como diseño fluido y consultas de medios. Encontrará algo que aprender en este excelente recurso, ya sea que sea nuevo en el desarrollo web de aplicaciones optimizadas para dispositivos móviles o que ya haya realizado algunos proyectos receptivos.

7. Diseño responsive en 3 pasos

Este tutorial está destinado a mostrarle los conceptos básicos del diseño receptivo. Es breve y se centra solo en los aspectos más importantes. Cuenta con una sección útil en la metaetiqueta de la ventana gráfica para que sus sitios se ajusten perfectamente a las pantallas.

8. Bosquejo de la interfaz

Esto no es una guía, pero es útil no obstante. Esta es una colección de plantillas de bocetos gratuitas para plataformas web, móviles y tabletas. Las plantillas están en PDF y contienen varias páginas y diseños. Simplemente descargue una plantilla, imprima las páginas que necesita y comience a esbozar su próximo diseño receptivo.

Marcos CSS

Escribir CSS receptivo a mano requiere mucha experiencia y la mayoría de las veces estará mejor usando un marco. Aquí hay una lista de algunos de los mejores.

9. Tinta

Cree rápidamente correos electrónicos HTML receptivos que funcionen en cualquier dispositivo y cliente. Incluso Outlook. Correo electrónico en cualquier lugar. En cualquier dispositivo. Cómo se suponía que debía leerse el correo electrónico HTML.

10. esqueleto

Skeleton es una pequeña colección de archivos CSS que puede ayudarlo a desarrollar rápidamente sitios que se vean hermosos en cualquier tamaño, desde computadoras de escritorio hasta dispositivos móviles. Este marco consta de una página html base que incluye el marcado inicial necesario, algunas hojas de estilo que pueden ayudarlo a diseñar su página y un conjunto de iconos incluido.

11. Columna

El sistema de cuadrícula Columnal CSS es una "remezcla" de un par de otros con un código personalizado incluido. Hace que la creación de prototipos receptivos sea un poco más fácil. Tiene 1140 píxeles de ancho, pero dado que es fluido, responderá al ancho de la mayoría de los navegadores.

12. Arranque

Bootstrap es el más popular y quizás el más poderoso de los marcos presentados aquí. Está hecho para personas de todos los niveles de habilidad, dispositivos de todas las formas y proyectos de todos los tamaños. También hay una gran cantidad de complementos de arranque que puede usar para extenderlo.

13. Marco Menos

Less Framework es un sistema de cuadrícula CSS para diseñar sitios web adaptables. Contiene 4 diseños (predeterminado, tableta, móvil y móvil amplio) y 3 conjuntos de ajustes preestablecidos de tipografía, todos basados ​​en una sola cuadrícula. Las únicas medidas que cambian de un diseño a otro son la cantidad de columnas y el ancho de los márgenes exteriores.

14. CSS receptivo de Entomic

Diseñe sus páginas en minutos para crear sitios web con una excelente capacidad de respuesta en computadoras de escritorio, tabletas y teléfonos inteligentes. Un servicio que brinda la opción de crear el diseño de la página en función de los tamaños de pantalla populares. Simplemente cree cuadros y establezca su ancho, exporte el diseño y comience a usarlo.

15. susy

En un mundo de desarrollo ágil y super-tablet-multi-magic-laptop-teléfonos, los mejores diseños no pueden estar contenidos en un solo marco o técnica. Las bibliotecas CSS son un lío inflado de opiniones sobre cómo hacer su trabajo. ¿Por qué dejar que la sierra de mesa te diga dónde poner la cocina?

16. Cuadrícula sencilla

Simple Grid es otro marco de cuadrícula CSS. Se esfuerza por la simplicidad, por lo que si no necesita todas las funciones adicionales de algo como Bootstrap, este marco es una buena opción.

17. furato

Marco frontal ligero y amigable para hacer el trabajo. Ya sea que esté usando Scss o CSS, es realmente fácil comenzar un proyecto y hacer las cosas en poco tiempo.

Bibliotecas JavaScript y jQuery

También hay una serie de complementos y bibliotecas jQuery útiles que pueden brindarle a su sitio web la magia de respuesta adicional que necesita.

18. Intención

Intention.js ofrece una forma ligera y clara de reestructurar dinámicamente HTML de manera receptiva. ¿Cuáles deberían ser las clases de un elemento en dispositivos móviles y tabletas? ¿Dónde se debe colocar el marcado publicitario cuando se ve en un navegador de escritorio? ¿La página requiere un widget de presentación de diapositivas alternativo en dispositivos táctiles? Todos estos son escenarios que puede manejar Intention.js, modificando la página según los dispositivos de los usuarios.

19. JResponsivo

JResponsive organizará su contenido en un diseño eficiente, dinámico y receptivo. Se puede aplicar a un elemento contenedor y organizará a sus elementos secundarios en un diseño que haga un uso óptimo del espacio de la pantalla, al "empaquetarlos" con fuerza.

20. Restablecimiento

jQuery ReStable es un complemento jQuery muy simple y liviano (~ 1 Kb) que hace que las tablas respondan y las colapsen en listas ul.

21. Elementos receptivos

Los elementos responsivos hacen posible que cualquier elemento se adapte y responda al área que ocupa. Es una pequeña biblioteca de JavaScript que puede colocar en sus proyectos hoy.

22. Inquieto

Restive.JS es un complemento de jQuery que lo ayuda a agregar características a su sitio web de manera rápida y sencilla para permitirle responder y adaptarse a prácticamente todos los dispositivos habilitados para la Web. Utilizando una combinación de Detección de dispositivos, Gestión avanzada de puntos de interrupción y Gestión de orientación, Restive.JS le dará a su sitio web una capacidad asombrosa para mantenerse sólido frente a un panorama de dispositivos en constante cambio.

23. Ajustar texto

FitText hace que los tamaños de fuente sean flexibles. Use este complemento en su diseño fluido o receptivo para lograr títulos escalables que llenen el ancho de un elemento principal. Ah, y no se atreva a dejar que lo atrapemos usando FitText en el texto del párrafo. ¡Esto es solo para texto de visualización gigante!

24. Collage Plus

Este complemento para jQuery organizará sus imágenes para que quepan exactamente dentro de un contenedor. Esto crea un efecto similar a las páginas de perfil de Flickr o los álbumes de Google+. Este complemento para jQuery organizará sus imágenes para que quepan exactamente dentro de un contenedor. Esto crea un efecto similar a las páginas de perfil de Flickr o los álbumes de Google+.

25. Cartista

Puede pensar que esta es solo otra biblioteca de gráficos. Pero Chartist.js es el producto de una comunidad que estaba decepcionada con las capacidades proporcionadas por otras bibliotecas de gráficos. Por supuesto, hay cientos de otras grandes bibliotecas de gráficos, pero después de usarlas siempre había ajustes que hubieras deseado que no estuvieran incluidos.

26. Carrusel de BÚHO

Complemento jQuery habilitado para tocar que le permite crear hermosos controles deslizantes de carrusel receptivos. Puede agregar una cantidad ilimitada de imágenes que se pueden deslizar con una animación suave como la mantequilla.

27. Deslizar caja

Swipebox es un complemento "lightbox" de jQuery para computadoras de escritorio, dispositivos móviles y tabletas.

28. Diapositivas

SlidesJS es un complemento de presentación de diapositivas receptivo para jQuery (1.7.1+) con características como transiciones táctiles y CSS3.

29. Deslizar

Glide.js es un control deslizante jQuery sensible y táctil. Basado en transiciones de CSS3 con respaldo de JS para navegadores más antiguos. Es simple, ligero y rápido. Diseñado para deslizarse, ni más ni menos.

30. Placa parpadeante

Un genial complemento de jQuery que te permite hojear el contenido. También es totalmente sensible y táctil.

31. Desplazamiento de una página

Cree un sitio web de desplazamiento de una página similar a Apple (sitio web de iPhone 5S) con el complemento One Page Scroll.

32. Control deslizante flexible

FlexSlider es un increíble conjunto de herramientas de control deslizante de jQuery totalmente receptivo.

33. Control deslizante real

RoyalSlider es una galería de imágenes y un complemento de control deslizante de contenido.

34. Cámara

La presentación de diapositivas de la cámara es un proyecto de código abierto, basado en la presentación de diapositivas de Diapo, pero mejorado mucho.

35. Deslizar foto

PhotoSwipe es una biblioteca de JavaScript independiente que se puede integrar fácilmente en sus sitios web móviles.

36. Diapositivas adaptables

ResponsiveSlides.js es un pequeño complemento de jQuery que crea un control deslizante receptivo utilizando elementos dentro de un contenedor.

37. Control deslizante maestro

¡Todo lo que siempre quisiste en un control deslizante de imágenes y contenido animado, todo empaquetado en un complemento increíble!

38. Ventana emergente magnífica

Magnific Popup es una secuencia de comandos de cuadro de diálogo y caja de luz receptiva que se centra en el rendimiento y brinda la mejor experiencia para un usuario en cualquier dispositivo.

39. Justificado

Este es un complemento de jQuery que organiza las fotos en una cuadrícula perfectamente espaciada, compensando los diferentes tamaños de las fotos. Vea una demostración en vivo aquí.

40. Toca dos veces para ir

Este es un concepto para un menú de navegación de varios niveles que funciona en dispositivos móviles. Para compensar la falta de un evento de desplazamiento real, las opciones del menú se activan al tocar dos veces.

41. Menú-Apuntar

Menu-Aim es un complemento de jQuery para menús desplegables que puede diferenciar entre un usuario que se desplaza sobre un elemento desplegable e intenta navegar en el contenido de un submenú.

42. Menutrón

Menutron transforma sus menús de navegación de una lista a un menú de selección al cambiar el tamaño de su navegador. Esto es especialmente útil para el menú de navegación con muchas opciones.

43. SlickNav

SlickNav transforma sus menús de navegación en un menú de hamburguesas al cambiar el tamaño de su navegador.

44. Sidr

Complemento jQuery para crear menús laterales receptivos. Se pueden mostrar desde el lado izquierdo o derecho.

45. Tobogán grande

BigSlide es un minúsculo complemento de jQuery (~1kb comprimido) para crear paneles deslizantes de navegación fuera de la pantalla.

46. FitVids

Un complemento jQuery liviano y fácil de usar para incrustaciones de video de ancho fluido. FitVids automatiza el método de proporción intrínseca de Thierry Koblentz para lograr videos de ancho fluido en su diseño web receptivo y es realmente fácil de usar.

47. Borde de Adobe

Probar diseños móviles es una molestia. Para ayudarlo, Adobe ha creado Edge Inspect. Es una aplicación esencial para desarrolladores y diseñadores web que necesitan obtener una vista previa de su contenido en varios dispositivos móviles.

48. ¿Puedo usar...?

No todas las funciones de CSS están disponibles en dispositivos móviles. Para asegurarse de que no falte ninguna funcionalidad en los dispositivos móviles, puede utilizar caniuse, que es el sitio web al que acudir para consultar las tablas actualizadas de soporte del navegador.

49. ¿Soy receptivo?

"¿Soy receptivo?" le ayuda a ver si su sitio web responde o no. También es una excelente manera de tomar una captura de pantalla rápida con su página en varios dispositivos a la vez.

50. Modo de dispositivo y emulación móvil

Google también ha desarrollado una forma de probar diseños móviles. Si usa Google Chrome, puede probar el modo Dispositivo y la emulación móvil directamente desde sus herramientas de desarrollador, o incluso probar la depuración remota en un teléfono inteligente Android conectado a su computadora.

Conclusión

¡Esperamos que encuentre útiles todos estos complementos y recursos receptivos! Le brindarán un gran comienzo en el diseño receptivo y muchas herramientas para crear su próximo diseño increíble. ¿Nos perdimos algo? Cuéntanos en la sección de comentarios :)