cafeina digital studio 0d9ec944ee28f04b064a723f355bbd427515962ffa99371e4530e9af2e17e287
Búscanos en Linkedin - Páginas web El Salvador Danos like en Facebook - Páginas web El Salvador Síguenos en Twitter - Páginas web El Salvador Síguenos en Google Plus - Páginas web El Salvador

10 Herramientas y recursos para un excelente diseño web responsive

10 Herramientas y recursos para un excelente diseño web responsive

Probablemente ya sepas que es "Responsive design" (Diseño responsivo o diseño adaptable); pero si no es así, lo diremos fácil:

Diseño web responsivo es una filosofía de diseño y desarrollo cuyo objetivo es adaptar la apariencia de las páginas web al dispositivo que se esté utilizando para visualizarla.

 

La realidad es que en este preciso momento muchos sitios web - este no :) - aún necesitan mejorar la experiencia de los usuarios que utilizan diferentes dispositivos con disferentes tamaños de pantalla para navegar.

Dicho eso, hemos recopilado una lista con algunos recursos que podrían interesarte si ya tienes un sitio web que no es "responsive" o si pretendes comenzar a desarrollar tu página web con diseño adaptable desde cero.

 

1. Wirefy
Es un framework css de estructurado responsivo que te permite incorporar clases css predefinidas adaptables desde el principio. Muy parecido a Bootstrap pero más sencillo y por ende más liviano.

Wirefy

 

2. Rubber Cheese
Para los amantes de Illustrator, encontramos este archivo vector que contiene un template responsive creado por Rubber Chesse. Se adapta a tres diferentes tamaños de pantalla: 978px, 768px and 320px.

Rubber Cheese

 

3. UXPin
Es una herramienta colaborativa en línea. Este servicio es de pago, en lo personal no lo he probado pero quienes si lo han hecho, hablan muy bien de él.

UXPin

 

4. Gridset
Este servicio es genial. Te permite crear múltiples grids en un solo juego (un grid por cada break-point), aunque también es pagado, vale la pena probarlo.

Gridset

 

5. Jetstrap
Si no quieres leer la basta documentación de Bootstrap o si aún no eres muy diestro en cuanto a html y css, esta es la solución. Jetstrap es una especie de Dream Weaver 100% web que te permite arrastrar y soltar los elementos que necesitas para obetener un sitio web responsivo en minutos.

Jetstrap

 

6. RWD Wireframes
Esta es otra herramienta en línea, no te permite hacer páginas web responsivas directamente, pero te ayuda a posicionar tu contenido tomando en cuenta las dimensiones de la pantalla en varios dispositivos.

RWD Wireframes

 

7. PSD Photoshop grid templates
Para diseñadores, aquí encontrarán un maravilloso juego de plantillas listas para descargar. Todas vienen con el grid ya hecho, solo debes buscar la o las que te interesan y podrás comenzar a diseñar una excelente página web responsiva.

PSD Photoshop grid templates

 

8. Media Queries
Para que te inspires. Media Queries es una colección de sitios web que utilizan "media queries" y diseño web responsivo recopilada por Eivind Uggedal.

Media Queries

 

9. Resize my browser
Una pequeña herramienta que redimensionará tu navegador a diferentes tamaños predefinidos para que puedas probar cómo se verá tu sitio web en esas resoluciones.

Resize my Browser

 

10. Design Modo's test
Perfecto para ver cómo tus páginas web se visualizan en la mayoría de dispositivos. Solo tienes que ingresar la url de tu página web y seleccionar un dispositivo de la gran variedad que este servicio ofrece.

Design Modo's test