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.