Krypton Solid

Diseño receptivo realmente fácil

Diseño receptivo realmente fácil

No es ningún secreto que muchos creen que la web receptiva es el futuro. Crear un sitio receptivo significa que puede adaptarse a los diferentes navegadores y tamaños disponibles. Si quiero asegurarme de que mi sitio web que he creado en mi escritorio se pueda ver en una tableta con desplazamiento y zoom mínimos, me interesará crear un sitio receptivo.

Una de las razones por las que los sitios receptivos se han vuelto populares es porque tiene sentido. Es más económico que crear uno o más sitios adicionales 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 un sitio web completo.

Si bien la creación de diseños web receptivos es cada vez más fácil, existen algunas formas de hacerlo aún más rápido. Gracias a algo de CSS y HTML, podemos codificarlo directamente en nuestros sitios. Otros elementos requieren un poco más de trabajo. De cualquier manera, hemos creado una lista para ayudarlo a armar su sitio receptivo con el mínimo de problemas y los máximos resultados.

Complementos de jQuery

Isótopo

Isotope es un complemento de jQuery que pretende crear diseños mágicos que de otra manera no se pueden crear con CSS y HTML. Tiene la capacidad de reorganizar los elementos dentro de un contenedor para que quepan dentro de él a medida que cambia de tamaño. También puede usar Isotope para filtrar y ordenar elementos por categorías y demás.

Breakpoints.js

Breakpoint se creó pensando en desarrolladores y diseñadores. Es un complemento que le permite crear puntos de interrupción para diferentes tamaños de navegador. Cuando se cambia el tamaño de su navegador a uno de esos tamaños, los elementos pueden caber en la pantalla.

FitText.js

Este es uno de mis complementos de jQuery favoritos porque es para fuentes. Con demasiada frecuencia, en el diseño web receptivo, las personas no tienen en cuenta que los titulares deben ser receptivos en lugar de comprimidos en un espacio determinado. FitText te permite hacer precisamente eso, ¡pero recuerda usarlo solo para titulares!

Response.js

Si le gusta la idea de Breakpoint.js pero desea 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 proporciones de píxeles y la capacidad de cargar diferentes fuentes para diferentes tamaños.

TinyNav.js

TinyNav es un complemento ligero de jQuery que le permite cambiar cualquier elemento del menú usando listas para convertirlo en menús desplegables cuando se cambia el tamaño del navegador. Puede especificar los tamaños y los menús que cambian. No tiene una función tan amplia, pero es muy eficaz para lo que hace.

Marcos y sistemas populares

Sistema de cuadrícula receptivo

Este sistema pretende no ser un modelo estándar o un marco, sino simplemente un sistema para hacer que sus diseños sean receptivos. Parece ser uno de los más flexibles, ya que no te restringe a un tamaño determinado ni a un tamaño de cuadrícula determinado. Usan diferentes clases de CSS que pueden flotar y crear sus propias columnas.

Sistema de cuadrícula dorada

El GGS también es un sistema y no un «marco». Les gusta referirse a sí mismos como un punto de partida o una guía para aquellos que quieren usar una cierta cantidad de cuadrículas en su diseño web. Tiene 18 columnas en la pantalla, pero 16 para usar en su diseño. Usted crea sus propios anchos y canaletas para usar y, esencialmente, va desde allí.

Sistema de cuadrícula 1140

Durante un tiempo, muchos diseñadores utilizaron diseños web de 960 píxeles de ancho. Entonces eso se volvió pequeño y subieron. Ahora se están desarrollando muchos diseños con un ancho de 1140px. Este sistema de cuadrícula 1140 le permite crear 12 columnas para usar en un diseño web de ancho amplio.

Bootstrap de Twitter

Bootstrap es uno de los frameworks más populares disponibles. Es un marco de 12 cuadrículas que se ha hecho utilizable en varios navegadores (incluido Internet Explorer 7) y se puede usar de manera 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 cuadrículas y la simplifica. Con la mayoría de los sistemas y marcos de cuadrícula, tiene estas clases y columnas desconocidas. La cuadrícula simple tiene clases que especifican qué columnas son la primera, la mitad y la última. Además, puede agregar diferentes ‘ranuras’ a las columnas para que parezca que hay más columnas. Es un marco muy simple y directo.

Otras herramientas receptivas

Hojas de boceto de diseño web receptivo

Al igual que cualquier diseñador o desarrollador, probablemente esbozará sus diseños antes de empezar a hacerlos. Ojalá lo haga. Si no es así, tal vez debería comenzar utilizando estas hojas de croquis de RWD. Vienen con diferentes tamaños de dispositivo y escritorio para que pueda planificar todo.

Cuaderno de bocetos de diseño receptivo

Si le gusta la idea de hacer bocetos 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, encuadernadas en espiral con varios tamaños de pantalla en cada página. Todas las cuadrículas y las matemáticas ya están hechas, por lo que esta es una gran herramienta para principiantes y expertos en diseño receptivo.

Azulejos de estilo

Este es un pequeño recurso agradable 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 agregando encabezados (tipografía), logotipos, colores y otros elementos. La razón por la que esto funciona para el diseño web receptivo es porque no implica ninguna dimensión, solo una idea digital sin restricciones.

Calculadora receptiva

Hay un montón de matemáticas involucradas en la creación de diseños que responden perfectamente a los píxeles. También es necesario que tus cálculos sean correctos, porque tendrás que lidiar con diferentes porcentajes, anchos y tamaños de navegador. Para ayudar, aquí hay una calculadora que le brinda las matemáticas correctas y el CSS para hacerlo.

Conclusión

Es imperativo que nos demos cuenta 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 el diseño receptivo realmente ayudan a cultivar sitios web estándar organizados y de alta calidad.

¿Cuáles son sus formas favoritas de iniciar diseños adaptables? ¿Hemos perdido un recurso en el que confía? Háznoslo saber en los comentarios.

Deja un comentario