No es ningún secreto que muchos creen que la red de respuesta es el futuro. La creación de un sitio web con capacidad de respuesta significa que puede adaptarse a los diferentes navegadores y tamaños disponibles. Si quiero estar seguro de que mi sitio web que he creado en mi escritorio se puede ver en una tableta con mini desplazamiento y zoom, estaré interesado en crear un sitio web atractivo.
Una de las razones por las que los sitios web con capacidad de respuesta se han vuelto populares es porque tienen sentido. Es más barato que crear una o más páginas adicionales para teléfonos móviles y tabletas. También garantiza una experiencia de visualización coherente entre los dispositivos y las pantallas de escritorio. No es divertido aumentar el tamaño de la ventana o desplazarse horizontalmente para ver un sitio entero.
A medida que la creación de diseños web receptivos se hace más y más fácil, hay algunas maneras de ponerlo en marcha más rápido. Gracias a algunos CSS y HTML podemos incorporarlo directamente en nuestras páginas. Otros elementos requieren un poco más de trabajo. De cualquier manera, creamos una lista para ayudarle a crear su sitio sensible con el mínimo esfuerzo y los máximos resultados.
Resumen de el Contenido
Plugins de jQuery
Isótopo
Isotope es un plugin de jQuery que pretende crear diseños mágicos que de otra manera no podrían ser creados con CSS y HTML. Tiene la capacidad de reordenar los elementos dentro de un contenedor para que quepan en el contenedor cuando se cambie su tamaño. También puede utilizar isótopos para filtrar y clasificar elementos por categoría y similares.
Puntos de ruptura.js
Breakpoint fue desarrollado pensando en desarrolladores y diseñadores. Es un plugin que le permite crear puntos de ruptura para diferentes tamaños de navegador. Si su navegador está configurado en uno de estos tamaños, los elementos pueden caber en la pantalla.
FitText.js
Este es uno de mis plugins favoritos de jQuery porque es para fuentes. Demasiado a menudo en el responsive web design, la gente no se da cuenta de que los titulares deben ser sensibles en lugar de apretarse en un espacio determinado. FitText le permite hacer justamente eso, ¡pero recuerde utilizarlo sólo para los titulares!
Respuesta.js
Si te gusta la idea de Breakpoint.js, pero quieres más personalización, Response.js es la respuesta. Es realmente genial para aquellos que necesitan saber jQuery mejor que CSS y HTML y crear sitios web con capacidad de respuesta. Usted utiliza sus puntos de interrupción, pero hay muchas más opciones de personalización como el tamaño del dispositivo, la proporción de píxeles y la capacidad de cargar diferentes tipos de letra para diferentes tamaños.
TinyNav es un plugin ligero de jQuery que le permite cambiar todos los elementos del menú usando listas para convertirlos en menús desplegables cuando el tamaño del navegador cambia. Puede ajustar los tamaños y cambiar los menús. No es tan amplia en su función, pero es muy efectiva para lo que hace.
frameworks y sistemas populares
Sistema de cuadrícula de reacción
Este sistema afirma que no es una caldera o un marco, sino sólo un sistema que puede utilizar para resolver sus proyectos. Parece ser uno de los más flexibles porque no lo limita a un tamaño específico o a un tamaño de trama. Se utilizan diferentes clases de CSS que pueden flotar y crear sus propias columnas.
Rejilla dorada
GGS es también un sistema y no unmarco”. Les gusta referirse a sí mismos como un punto de partida o guía para aquellos que quieren utilizar un cierto número de grillas en su diseño web. Tiene 18 columnas en la pantalla, pero puede utilizar 16 de ellas en su diseño. Se juntan los anchos y las canaletas y se parte esencialmente de ahí.
1140 Sistema de cuadrícula
Durante algún tiempo, muchos diseñadores utilizaron diseños web con un ancho de 960px. Luego se hizo muy pequeño y subieron. Ahora se están desarrollando muchos proyectos con un ancho de 1140px. Este sistema de cuadrícula 1140 le permite crear 12 columnas que puede utilizar en un diseño web.
Twitter Bootstrap
Bootstrap es uno de los frameworks más populares disponibles. Es un framework de 12 redes que se ha convertido en un cross-browser utilizable (incluyendo Internet Explorer 7) y que puede ser implementado en dispositivos portátiles de una manera altamente sensible. Viene con varios estilos, tipografía y componentes JavaScript para crear sitios web elegantes e intuitivos.
SimpleGrid
SimpleGrid toma la idea de las rejillas y la simplifica. Con la mayoría de los sistemas y estructuras de cuadrículas, usted tiene estas clases y columnas desconocidas. Simple Grid tiene clases que especifican qué columnas son primera, media y última. También puede añadir diferentes ‘Slots’ a las columnas para dar la impresión de que hay más columnas. Es un marco muy simple y sencillo.
Otras herramientas de respuesta
Hojas de croquis de diseño web con capacidad de respuesta
Como cualquier diseñador o desarrollador, es probable que dibujes tus diseños antes de crearlos. Eso espero. Si no es así, es posible que desee empezar a utilizar estas hojas de croquis de RWD. Vienen con diferentes tamaños de dispositivos y escritorios, para que pueda planificar todo.
Cuaderno de bocetos de diseño con capacidad de respuesta
Si le gusta la idea de dibujar en papel, pero quiere tener todos sus garabatos juntos, podría considerar la posibilidad de obtener el sketchbook de diseño sensible. Viene con 50 páginas, encuadernadas en espiral con diferentes tamaños de pantalla en cada página. Todas las cuadrículas y las matemáticas ya están hechas para usted, así que esta es una gran herramienta para principiantes y expertos en diseño de respuesta.
Estilo de azulejos
Esta es una pequeña y agradable característica para los diseñadores web, ya sea que estén buscando algo para un diseño sensible o no. Es un PSD que permite obtener la esencia de un sitio web añadiendo cabeceras (tipografía), logotipos, colores y otros elementos. La razón por la que esto funciona para un responsive web design es porque no implica ninguna dimensión, sólo una idea digital sin limitaciones.
Calculadora de reacción
Hay muchas matemáticas involucradas en la creación de diseños con precisión de píxeles y con una respuesta perfecta. Es importante que tus matemáticas sean correctas, porque estás tratando con diferentes porcentajes, anchos y tamaños de navegador. Para ayudarle, aquí tiene una calculadora que le proporciona la matemática y el CSS correctos.
Conclusión
Es esencial que tomemos nota de lo que puede hacer una red receptiva. Muchos clientes querrán tener sus sitios web disponibles en una variedad de dispositivos, y simplemente es más rentable crear sitios web con capacidad de respuesta. Además, la mayoría de sus frameworks y otras características de diseño realmente ayudan a mantener los sitios web estándar organizados y de alta calidad.
¿Cuáles son sus formas preferidas de lanzar proyectos con capacidad de respuesta? ¿Hemos perdido algún recurso en el que pueda confiar? Háganoslo saber en los comentarios.