15 Tutoriales para Aprender A Diseñar Sitios Web Responsive

Con la aparición de toda la colección de dispositivos móviles, el responsive design está a la orden del día. Aquí les traigo una recopilación de tutoriales con los que juntos podremos aprender a diseñar sitios web basados en el responsive design. Los tutoriales están en inglés, por lo que es necesario entender el idioma para poder sacar el máximo partido de los recursos aquí recopilados.

Responsive Design

1. Beginner’s Guide To Responsive Web Design

Esta es una guía básica de introducción al diseño responsive. En ella aprenderás el espectro de tamaño de pantallas y resoluciones que hay en el mercado, así como que el crear una versión diferente de una página web para cada dispositivo no es una buena idea. Este es el problema que el diseño responsive aborda y soluciona.

2. Responsive Design en 3 Pasos

Si eres de los que les gusta ponerse rápido manos a la obra, seguro que este tutorial te encantará, sólo necesitas saber CSS. Te mostrará en tres pasos como adaptar tus diseños al responsive design.

3. Qué Es el Responsive Design y Cómo Utilizarlo

Excelente tutorial de Smashing Magazine para entender que es el responsive design y cómo utilizarlo.

4. Técnicas de Responsive Design

Este tutorial de Webdesigner Depot te muestra algunas técnicas que puedes aplicar a tus diseños responsive.

5.Media Queries de CSS3 para Crear Versión Móvil de una Web

Otro tutorial de Smashing Magazine que nos explica como utilizar los media queries de CSS3 para crear una versión móvil de una página web.

6. Cómo Convertir Cualquier Diseño Web en Responsive

Tutorial de Vandelay Design que nos va a enseñar a convertir cualquier diseño web a su versión responsive.

7. Guía Visual del Responsive Design

Si eres de los que te cansas de leer texto, este tutorial te gustará, pues se trata de una guía visual al responsive design. Es un tutorial de Nettuts+ muy bien valorado, por lo que te recomiendo echarle un vistazo.

8. Scalable Navigation Patterns In Responsive Web Design

Este post habla de la experiencia del autor trabajando en un proyecto de responsive web design a amplia escala. Es una buena manera de mirar detrás del escenario y aprender de la experiencia del autor.

9. Layouts Adaptables con Media Queries

Tutorial de la revista .Net que explica como utilizar layouts flexibles o adaptables con media queries de CSS. Propone un ejercicio para aprender a adaptar tu diseño tanto para el iPhone como para el iPad.

10. Convierte un Menú en Desplegable para Pantallas Pequeñas

Excelente artículo de Chris Coyier que te enseña a convertir un menú de navegación web en un desplegable si la pantalla es de un dispositivo móvil.

11. Qué es el Responsive Web Design

Si eres de los que te gusta saber el por y el por qué de todo, seguro que este tutorial de A List Apart te encantará, pues entra en el tema a fondo, como todos los artículos de esta web.

12. Crea una Plantilla Web Responsive

Muy buen tutorial de OneExtraPixel que te enseñará a crear una plantilla web responsive que podrás utilizar para tus futuros trabajos basados en el responsive web design.

13. Crear Sitios Web Rápidos y Responsive

Otro tutorial de la revista .Net que nos explica no sólo como crear sitios web responsive, sino también que sean rápidos.

14. Tablas de datos responsive

Otro tutorial de gran calidad de Chris Coyier, en el que nos explica como crear tablas de datos responsive. Muy interesante.

15. Cómo Crear una Galería de Imágenes Responsive

En este tutorial aprenderemos a crear una galería de imágenes totalmente responsive.

Conclusión

Ya es hora de ponerse las pilas con este tema, porque cada día son más los usuarios que navegan desde los dispositivos móviles, superando en muchos países a la navegación a través del PC.

Deja una respuesta