Diseño realmente fácil de responder
No es ningún secreto que muchos creen que la red receptiva es el futuro. Crear un sitio receptivo significa que es capaz de adaptarse a los diferentes navegadores y tamaños que están disponibles. Si quiero asegurarme de que mi sitio web que creé en mi escritorio se pueda ver en una tableta con desplazamiento minimo y zoom, me interesará crear un sitio receptivo.
Una de las razones por las que los sitios receptivos se han vuelto populares es porque simplemente tiene sentido. Es más barato que crear uno o más sitios extra para teléfonos móviles y tabletas. También se asegura de que haya una experiencia de visualización uniforme entre los dispositivos y las pantallas de escritorio. No es divertido tener que aumentar el tamaño de su ventana o desplazarse horizontalmente para ver todo un sitio web.
Si bien la creación de diseños web receptivos es cada vez más fácil, existen algunas maneras de hacerlo funcionar más rápido. Gracias a algunos CSS y HTML, podemos codificarlo directamente en nuestros sitios. Otros elementos requieren un poco más de trabajo. De cualquier forma, hemos creado una lista para ayudarlo a poner su sitio receptivo junto con el mínimo esfuerzo y los máximos resultados.
Complementos jQuery
Isótopo
Isotope es un plugin de jQuery que pretende crear diseños mágicos que de lo contrario no pueden ser creados por CSS y HTML. Tiene la capacidad de reorganizar elementos dentro de un contenedor para que quepan dentro de él a medida que cambia de tamaño. También puede usar Isotopo para filtrar y ordenar elementos por categorías y cosas por el estilo.
Breakpoints.js
Breakpoint se hizo con desarrolladores y diseñadores en mente. Es un complemento que le permite crear puntos de interrupción para diferentes tamaños de navegador. Cuando su navegador cambia de tamaño a uno de esos tamaños, los elementos pueden caber en la pantalla.
FitText.js
Este es uno de mis plugins jQuery favoritos porque es para fuentes. Con demasiada frecuencia, en el diseño web receptivo, las personas no toman en consideración que los titulares deben ser receptivos en lugar de aplastados en un cierto espacio. FitText le permite hacer exactamente eso, ¡pero recuerde usarlo solo para titulares!
Response.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 conocen jQuery mejor que CSS y HTML y necesitan crear sitios web receptivos. Utiliza sus puntos de interrupción, pero hay mucha más personalización, como el tamaño del dispositivo, las raciones de píxeles y la capacidad de cargar diferentes fuentes para diferentes tamaños.
TinyNav.js
TinyNav es un plugin jQuery ligero que le permite cambiar cualquier elemento del menú mediante listas para convertirlo en menús desplegables cuando cambia el tamaño del navegador. Puede especificar los tamaños y los menús que cambian. No es tan amplio en su función, pero es muy efectivo para lo que hace.
Sistemas y marcos populares
Sistema de rejilla receptivo
Este sistema pretende no ser un estándar o marco, sino solo un sistema para hacer que sus diseños sean receptivos. Parece ser uno de los más flexibles, ya que no lo restringe a un determinado tamaño o a un tamaño de gránulo determinado. Usan diferentes clases de CSS que pueden flotar y crear sus propias columnas.
Golden Grid System
El GGS es también un sistema, y no un 'marco'. Les gusta referirse a sí mismos como un lugar de partida o una guía para aquellos que desean usar una cierta cantidad de cuadrículas en su diseño web. Le dan 18 columnas en la pantalla, pero 16 para usar en su diseño. Usted hace sus propios anchos y canaletas para usar y esencialmente ir desde allí.
Sistema de rejilla 1140
Por un tiempo, muchos diseñadores usaban diseños web de 960px de ancho. Entonces eso se volvió pequeño y subieron. Ahora muchos diseños se están desarrollando con un ancho de 1140px. Este 1140 Grid System le permite crear 12 columnas para usar en un diseño web de ancho ancho.
Twitter Bootstrap
Bootstrap es uno de los marcos disponibles más populares. Se trata de un marco de 12 cuadrículas que se ha hecho utilizable entre navegadores (incluido Internet Explorer 7) y se puede utilizar de forma receptiva en dispositivos de mano. Viene con varios componentes de estilo, tipografía y JavaScript para usar y crear sitios elegantes e intuitivos.
SimpleGrid
SimpleGrid toma la idea de las grillas y la simplifica. Con la mayoría de los sistemas de cuadrícula y marcos, tiene estas clases desconocidas y columnas desconocidas. La grilla simple tiene clases que especifican qué columnas son la primera, la mitad y la última. Además, puede agregar diferentes "espacios" a las columnas para que parezca que hay más columnas. Es un marco muy simple y directo.
Otras herramientas receptivas
Hojas de bocetos de diseño web adaptable
Al igual que cualquier diseñador o desarrollador, probablemente diseñe sus diseños antes de que realmente los haga. Espero que lo hagas Si no es así, quizás debería comenzar utilizando estas hojas de bosquejo RWD. Vienen con diferentes dispositivos y tamaños de escritorio para que pueda planear todo.
Diseño Responsive Sketchbook
Si le gusta la idea de dibujar en papel, pero desea tener todos sus garabatos juntos, puede considerar obtener el cuaderno de bocetos de diseño receptivo. Viene con 50 páginas, en espiral con varios tamaños de pantalla en cada página. Todas las cuadrículas y las matemáticas ya están hechas para usted, por lo que esta es una gran herramienta para principiantes y expertos en diseño receptivo.
Azulejos de estilo
Este es un pequeño y agradable recurso para los diseñadores web, ya sea que estén buscando algo para un diseño receptivo o no. Es un PSD que le permite obtener la esencia de un sitio web al agregar encabezados (tipografía), logotipos, colores y otros elementos. La razón por la cual esto funciona para un diseño web receptivo es porque no implica ninguna dimensión, solo una idea digital sin restricciones.
Calculadora de respuesta
Hay un montón de matemáticas involucradas en la creación de diseños de respuesta perfecta de píxeles. Es necesario que tus cálculos sean correctos, porque lidiarás con diferentes porcentajes, anchos y tamaños de navegador. Para ayudar, aquí hay una calculadora que le da la matemática correcta y el CSS para ir junto con ella.
Conclusión
Es imperativo que tomemos nota de lo que está haciendo la web receptiva. Muchos clientes querrán tener sus sitios disponibles para una variedad de dispositivos, y es más rentable crear sitios receptivos. Además, la mayoría de sus marcos y otros recursos para un diseño receptivo realmente ayudan a cultivar sitios web organizados y de alta calidad.
¿Cuáles son sus formas favoritas de comenzar diseños receptivos? ¿Hemos perdido un recurso en el que confías? Háganos saber en los comentarios.