El blog para emprendedores

9 Útiles herramientas para hacer Responsive Web Design

Publicado por Alejandra el 25 - Sep - 2012

El Responsive Web Design, es la nueva forma de hacer diseño web, una forma que proporciona una correcta visualización tanto para todo tipo de ordenadores como para tablets y móviles.

En un artículo anterior te contábamos con más exactitud qué es el Responsive Web Design ahora queremos profundizar más en este tema que cada vez es más demandado por los clientes.

Si estás pensando en adentrarte en este apasionante mundo no te asustes, los talentosos desarrolladores web de todo el mundo han vuelto de nuevo para rescatarnos, diseñando herramientas útiles para ayudarte a construir y adaptar fácilmente una web al Responsive Web Design.

Actualmente existen valiosas herramientas que te ayudarán a diseñar prototipos y generar código para que no te hagas un lio y planifiques tu RWD desde el wireframe. En este artículo te mencionamos algunas de estás prácticas herramientas:

1. Diseños Responsive, Responsively Wireframed:
Basándose en las cajas del wireframe, esta es una demostración de como se vería la web en ordenador o su versión en dispositivo movil. ¡Es muy útil a la hora de hacer un wireframe!

2. Less Framework 4: Te permite diseñar sitios web adaptativos. Contiene 4 diseños y 3 juegos de tipos de tipografía, todo ello basado en una única tabla. Esta herramienta te será muy útil con el código.

3. Media Queries: ¡Es perfecto para inspirarse! Es una colección de diseños de páginas web que usan media queries y responsive web desing que te dará una idea de cómo lo han hecho los demás para hacer una web correctamente adaptada a las diferentes pantallas.

4. FitText: Es un plugin para hacer tipografías flexibles. Es perfecto para hacer títulos escalables con el ancho de la pantalla.

5. Fluid Grids: Es una muy buena herramienta para generar el código CSS según tu diseño. Es cómo un juego de números, introduces el número de columnas y el espacio entre ellas en su calculadora y aparecerá el código CSS que necesitas para hacer tu diseño fluido para las diferentes pantallas.

6. 1140 grid: Encaja perfectamente en un monitor de 1280 y en monitores más pequeños hace que el diseño se adapte de forma fluida según a anchura del navegador. Puedes descargarte su plantilla de photoshop para hacer más fácil el esquema del diseño y además, te explica un código HTML para que tu diseño se adapte sin problemas.

7. Multi-Device Layout Patterns: Te explica, de manera muy acertada los diferentes tipos de adaptaciones que puedes hacer con tu diseño.

8. Responsivepx: Funciona fácilmente, ingresas la url de tu sitio web (local o online) y podrás usar los controles para ajustar la anchura y altura hasta encontrar las medidas perfectas para hacer el código y lograr una web fluida en todas las plataformas.

9. Screenfly y The responsinator: Te ayudarán a hacer un test de tu web en las diferentes tipos de pantallas, así te será más fácil ver como quedaría en cada una de ellas, sus fallos y aciertos.

Esta es una pequeña muestra de la cantidad de herramientas que encontrarás online para trabajar.  Ahora, más que nunca el diseño debe ser fluido y adaptable, estamos diseñando para todo tipo de usuarios y pantallas. Un diseño web debe estar acorde al comportamiento de los usuarios, por lo que se hace imprescindible trabajar pensando en todas las formas posibles.

Deja tu comentario