Atrévete a crear el negocio de tus sueños

15 Tutoriales para Aprender A Diseñar un Sitio Web Responsive

responsive design

Con la aparición de toda la colección de dispositivos móviles, el responsive design está a la orden del día. Como ya dicen, en casa de herrero, cuchillo de palo, pues la web de eSandra a fecha de hoy todavía no es responsive, pero para eso os traigo una recopilación de tutoriales con los que juntos podremos aprender a diseñar sitios web basados en el resopnsive 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. Si prefieres un curso de calidad en español, puedes hacer el curso de diseño web responsive que organiza eSandra de más de 5 horas de duración.

Información del curso: http://www.esandra.com/curso/curso-diseno-web-responsive-con-html5-y-css3/

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

Adaptarse o morir. Tampoco tanto, pero sí dejar de ser competitivos. Si eres como yo, que aún no te has puesto con el tema por pereza, ya va siendo hora que nos pongamos las pilas, porque cada día son más los usuarios que navegan desde los dispositivos móviles. Pero bueno, nunca es tarde si la dicha es buena, así que aprovechemos la crisis y el paro para ponernos al día con estos temas.

mi firma
Sandra Guerrero Sanmarti
¡Atrévete a crear el negocio de tus sueños! Porque hay que #emprender hoy para tener resultados mañana:-) + ¿te apuntas?
Sandra Guerrero Sanmarti
Sandra Guerrero Sanmarti
Sandra Guerrero Sanmarti

Comentarios

  • Alejandro
    Responder

    Muy buen aporte. Saber diseñar páginas web puede ser muy conveniente teniendo en cuenta la gran disponibilidad laboral que tienen los profesionales en esta área hoy en día

  • Manel
    Responder

    Muy buenos recursos para tener en cuenta. Gracias Sandra!

  • GenteIdeasWeb
    Responder

    eSandra es una web es de visita obligada, donde siempre se encuentran temas importantes y de actualidad

  • Clara
    Responder

    ¡Me encanta! Ni conocía este blog ni había encontrado aún tutoriales sobre responsive design. Me lo guardo en favoritos y lo añado a mi formación, es una de las cosas que tengo pendiente a medio plazo. ¡Gracias por publicar tan buenos contenidos, chicos! :D

  • Germán Vaquer
    Responder

    Como siempre publicando temas interesantes y actuales, para ayudarnos a progresar dentro del mundo del diseño y maquetación web.
    Felicidades!

  • Toño
    Responder

    Sandra, que gran blog para los que vamos iniciando en nuestra profesión de diseñador web, gracias por tu aporte inspirador. Desde San Luis Potosí, México.

  • Diseño web pymes
    Responder

    Muchas gracias por este valioso material. Estoy realizando un estudio autodidacta sobre “responsive” para mejorar mis servicios y esto me es tremendamente útil. Me he afiliado a tu Rss y te sigo en Facebook, porque considero que tus contenidos son de gran aporte.

  • manolo
    Responder

    Muchas gracias, por este buen material que nos facilitas, muchas gracias
    saludos desde RD

  • Antonio
    Responder

    Muy buenos enlaces Sandra, enhorabuena. Estoy viendo responsive desde hace unos días y aunque ya he hecho alguna web con más que aceptables resultados, me surge una duda que quizás puedas aclararme:
    - Tanto en el libro de Ethan Marcotte como en varios tutoriales he visto que añaden márgenes y paddings proporcionales con %, pero personalmente, creo que el resultado de que se redimensionen los márgenes cada vez que vas modificando la resolución, genera un efecto bastante feo a mi modo de ver. Lo que estoy haciendo es dejar los márgenes y paddings superiores e inferiores fijos y los laterales si hacerlos proporcionales, no se cómo lo ves o si entiendes lo que trato de decir.

    Saludos ;)

    • Sandra

      Otra opción es que utilices CSS Media Queries y especifiques los márgenes en píxeles para cada ancho de pantalla..

  • carolina
    Responder

    excelente los tutoriales Sandra, felicitaciones !!!!! nos son de muchísima utilidad para personas como yo que somos autodidactas. muchas gracias y un abrazo grande. GENIAAAAA !!!!!!!!!!!!!!


¿Y tú qué opinas? Deja un comentario...