Manual de Responsive Web Design

Este es un manual de Responsive Web Design, la técnica que permite hacer webs adaptables a las condiciones del ordenador o dispositivo que las está accediendo. También las conocemos como técnicas adaptativas, focalizadas principalmente a las dimensiones de la pantalla.

Responsive Web Design no es una única técnica, sino son un conjunto de ellas que nos sirven para hacer diseños adaptables al medio donde se van a consumir. Por tanto, este manual no tiene un principio y un fin que pudiera estar perfectamente definido, sino que se podría ampliar su contenido en función de las necesidades de los sitios web en la actualidad, experiencia de los escritores o las novedades en los estándares como HTML y CSS para facilitar la adaptabilidad del diseño web.

En Internet no hemos encontrado una información completa y ordenada de principio a fin, en español, sobre Responsive Web Design, por lo que nos hemos decidido a escribir este texto que esperamos sirva de referencia para quien comienza a interesarse por la adaptabilidad del diseño o incluso para quien ya aplica el "Responsive".

Ver los capítulos

Si te parece útil este manual ayúdanos compartiendo!! :)

Descargar como libro electrónico

Este texto 'Manual de Responsive Web Design' se encuentra disponible para descarga como libro electrónico. Ideal para imprimir o leer en el ordenador personal, dispositivos y eReaders.

Puedes acceder a través de la App de DesarrolloWeb.com

Conceptos fundamentales del diseño responsive

Comenzamos por una serie de artículos que explican los motivos por los que hoy el diseño web debe de ser adaptable, analizando los conceptos más fundamentales. El objetivo es entender que debemos diseñar para todos los tipos de pantalla, pero también para todas las velocidades de conexión, todos los navegadores, etc.

1.- Qué es Responsive Web Design

Comenzamos con una descripción general del término Responsive Web Design de modo que todos podamos entender de dónde viene y por qué es tan importante en el mundo actual del desarrollo.

2.- Diseño responsive es diseño web

La web solo se concibe si es adaptable, hablar de un diseño responsive es hablar de diseño web, no hay web si no hay responsive.

3.- Responsive es algo más que tamaños de pantalla

Problemática sobre el diseño adaptable. Responsive Web Design es algo más que tamaños de pantalla, hay que adaptarse en muchos otros sentidos a las características de la navegación en escritorio y dispositivos.

4.- Los tres pilares de optimización del diseño responsive

Cuando diseñamos una web debemos fijarnos en tres cosas fundamentales, diseño para todos los navegadores y sistemas, todas las resoluciones de pantalla y todas las velocidades de conexión.
Procedimientos habituales en el diseño adaptable

Ahora vamos a analizar los mecanismos o flujos de trabajo habituales cuando estamos implementando Responsive Web Design, indicando cuáles son los procedimientos a seguir y sus diversas variantes. El objetivo es entender qué pasos realiza un diseñador para crear un sitio web adaptable facilitando la labor de desarrollo y mejorando las prestaciones del diseño producido.

5.- Flujo de desarrollo de un sitio responsive

Cómo se desarrolla un sitio adaptativo, aproximación de los procesos usados para la creación de un diseño Responsive Web Design.

6.- Progressive Enhancement Vs Graceful Degradation

Dos técnicas, o flujos de trabajo, que nos ayudan a resolver los problemas de compatibilidad de los distintos navegadores frente al estándar CSS, explicadas en el marco del diseño adaptable.

7.- Mobile First

Mobile First es una filosofía, una manera de encarar el trabajo y una forma de facilitarnos la labor durante el diseño responsive, comenzando siempre por los dispositivos, con pantallas menores.
MediaQueries

Cuando pensamos en diseño Responsive inmediatamente se nos vienen a la cabeza las mediaqueries CSS3, pues éstas son las herramientas fundamentales para especificar estilos con respecto a diversas condiciones del cliente web que está visitando el sitio. En los siguientes artículos te explicamos con detalle qué son las Mediaqueries y te ofrecemos información valiosa sobre cómo aplicarlas, creando los breakpoints más adecuados para tus layouts.

8.- CSS Media Queries

Las Media Queries, incorporadas en CSS3, son las primeras construcciones del lenguaje CSS que nos permiten definir estilos condicionales, aplicables únicamente en determinadas situaciones.

9.- Guías de uso de las Media Queries en Responsive Web Design

Vamos a conocer muchas de las técnicas relacionadas con las media queries que puedes aplicar para sitios que se adapten a todo tipo de pantallas y medios.

10.- Breakpoints para diseño Responsive

Los puntos o medidas de anchura donde se pueden crear saltos en el diseño Responsive, llamados comúnmente breakpoints, a partir de donde aplicar las media queries para Responsive Web Desing.

11.- Medidas estándar de pantallas para tus media queries

Listado de pantallas y viewports comunes de dispositivos y ordenadores de escritorio para hacernos una idea de hacia dónde podrían apuntar nuestras media queries CSS.
Todo sobre unidades de medida para el diseño adaptable

CSS dispone de un gran catálogo de unidades de medida que se pueden adaptar a diversas necesidades. En lo que respecta a Responsive Web Design ¿Cuáles son las unidades de medida más interesantes? ¿En qué casos debemos usar cada una?

12.- Unidades de medida en CSS: relativas y absolutas

Discusión sobre las unidades de medida CSS, distinas unidades con sus explicaciones y la diferenciación entre unidades relativas y absolutas.

13.- Unidades de medida CSS más adecuadas para el Responsive Web Design

Explicaciones sobre las mejores unidades de medida y discusión sobre cuándo debemos usar unas u otras para sacar lo mejor de las hojas de estilo y el diseño adaptable.

14.- Unidades de medida CSS para fuentes Responsive Web Design

Las mejores unidades de medida de CSS para trabajar con tamaños para tipografías en Responsive Web Design, ventajas, inconvenientes y soluciones a la unidad rem.

15.- Unidades CSS viewportwidth y viewportheight

Nuevas unidades de CSS3: viewportwidth y viewportheight. Cómo podemos hacer un útil uso de ellas al aplicarlas a tamaños de las tipografías.
Practicando con CSS para Responsive Web Design

Por fin aterrizamos al código, comenzando a ver técnicas, estilos y recursos prácticos para poder componer diseños adaptables. Pero ojo, todo lo que ya conoces de las CSS está disponible y es aplicable en principio al diseño responsive, por lo que nos limitaremos a ver las cosas que representan una novedad en los diseños adaptables. Para complementar esta información te sugerimos también que busques en otros manuales de CSS en DesarrolloWeb.com.

16.- Estilos CSS básicos para Responsive Web Design

Estilos, atributos y valores de CSS que resultan esenciales para el Responsive Web Design y que existen desde las versiones antiguas del estándar de las hojas de estilo.

17.- Etiqueta meta Viewport

El Viewport es una de las etiquetas más representativas de la web móvil, que nos permite configurar cómo debe interpretar una página el navegador web para móviles.

18.- Imágenes responsive con la etiqueta Picture

Cómo usar la etiqueta Picture para crear imágenes responsive, un nuevo elemento de HTML5 que permite que las imágenes y su resolución se adapten a todo tipo de pantallas.

19.- Mejorar la experiencia de usuario en sitios Responsive

Diseño web y Responsive Web Design requieren una adaptabilidad al contexto móvil, y no solo en la parte estética. Cómo mejorar el rendimiento, la carga y la experiencia de usuario en webs Responsive.

Descargas

Este manual puedes descargarlo en formato amigable para impresión y lectura en dispositivos a través de la App de DesarrolloWeb.com.

Compartir

Comentarios

Claudio Galíndez

26/1/2015
¿Dónde está el Manual de Responsive Web Design?
Buenas tardes. Traté de ingresar al manual de Responsive Web Design y no veo dónde está. Lo único que veo son 2 artículos muy resumidos que en realidad enseñan muy poco. Yo creo que un "Manual" debería ser un documento bastante más extenso y con contenidos mucho más técnicos y detallados? Fue una desilusión.
¿Esos 2 artículos son un Manual para ustedes?
Saludos
Ing. Claudio Galíndez

Raúl Trejo

11/2/2015
*flexbox
*Antes que nada un saludo y una felicitación a todos los que forman parte de está página/comunidad.
Me gustaría en especial que en este "Manual" se tocara más el tema acerca de flexbox (Quizás algún ejemplo práctico).
Y este manual es una guía práctica para iniciarse con el diseño web adaptativo, si alguien quiere un manual con los pasos a seguir, no existe como tal.
Éxito.

juan mora

16/2/2015
manual escribiendose
Calma, claudio.
Ya van x 5 articulos. Como puedes apreciar están publicando nuevos cada poco.

carlos_suarez-578357

04/4/2015
Solo falta el enlace de descarga
Pero esto no es relevante, igual existe acceso a la información. Gracias por su dedicación.

iscgivox

16/4/2015
Descarga
Como puedo descargar el manual en formato PDF?
Gracias!

midesweb

26/6/2015
Subida la descarga del Manual de Responsive Web Design
Hola! Acabamos de publicar la primera descarga del manual.
Este manual está en proceso de escritura y preferimos crear la descarga cuando ya hay una buena cantidad de artículos. Da un poco de trabajo generar los PDF con un formato decente y por eso a veces se retrasan las subidas.

Kev_AG

26/6/2015
NO DESCARGA
Lamentablemente no pude descargar el archivo.

midesweb

26/6/2015
Pues está comprobada la descarga
Usa otro navegador que el sistema de descargas a veces se traba con algunos navegadores.

granapedro

30/6/2015
Responsive Web Design
Vuestro manual de Responsive Web Design me indica que voy por el buen camino. No me obsesiono cuando mis páginas no se ven igual en todos los clientes web. Siempre que puedo uso CSS con unidades relativas. Intento minimizar código y uso el mismo html para todas las resoluciones. Eso sí, hago mis pruebas en navegadores actualizados así que paso bastante del Graceful Degradation y del Progressive Enhancement. En cuanto a diseñar con la filosofía del Mobile first no siempre lo hago porque mis páginas no tienen demasiados elementos y suelo usar el display none que es más cómodo para información prescindible en pantallas pequeñas, pero reconozco que lo más lógico y eficiente es diseñar primero para móviles. No suelo usar en las media queries la orientation y sin embargo mis aplicaciones se adaptan bien tanto en portrait como en landscape, ¿es incorrecto no usarlas?
El manual es comprensible y está muy bien redactado.
Saludos y Gracias.

German Baena

06/11/2015
Mucha literatura...
En general en esta web de desarrolloweb.com he visto mucha literatura y poco de códigos de ejemplo.
En general mucho bla bla bla y poco de lo que sabemos...!!!

midesweb

13/11/2015
Sin ejemplos, Germán?
Hola,
Gracias por tu mensaje. Todas las críticas nos ayudan a mejorar, nos pondremos las pilas para publicar más ejemplos en este manual. Porque entiendo que lo puedas decir por este manual en concreto. Ya que el Manual de Responsive Web Design está dirigido a los que ya saben CSS y quieren aplicar las técnicas y conocimientos al desarrollo adaptable. Si quieres ejemplos entonces entra en el manual de CSS básico, o en el manual de maquetación CSS. Eso no quita que no se pongan ejemplos en este manual. Mira los artículos de las media queries, que no estaban explicados en otros anteriores manuales, están llenos de ejemplos.
Como sugerencia te agrego que podrías enriquecer a la comunidad, y de paso a ti mismo, publicando artículos. Si no tienes blog, con gusto aceptamos tus publicaciones que puedan aportar nuevos ejemplos en este manual. Gracias.

Yagoloko

01/3/2016
Descarga
Hola como podria descargarlo?, no me quedan descargas.

operador_manco

02/5/2016
Manual completo
Leo en vuestro comentario, que la descarga del manual solo incluye 10 artículos. ¿Tenéis previsto completar la descarga?.
Si es así, si ahora me descargo el manual actual, cuando este completo ¿podremos descargarlo como repetición de la descarga o me sumara una descarga mas?.
Gracias por todo vuestro trabajo que tanto nos ayuda a todos

midesweb

09/5/2016
Acabamos de actualizar la descarga!
Está al día la descarga del manual de Responsive Web Design. 52 páginas llenas de consejos y guías para el diseño adaptable.

JOffre Carriel

15/6/2016
Guia
Me ha gstado mucho este articulo, yo me estoy iniciando en el diseño web y me gustaria saber que tecnologia usa este sitio que me gusta mucho? http://www.webcorp.ec/

Alberto

14/10/2016
Recurso impresionante
Este manual de Responsive es muy recomendable. Lo he leído por completo y me ha dado muchas ideas y guías para trabajar que no encuentras en otros sitios. Gracias a los creadores.

Humberto

12/12/2016
Muy completo
Gracias por el post, ya me dio nuevas ideas para aplicar en mi diseño, también me estoy dando cuenta que Goolge le da prioridad al los sitios responsive, y que hay muchas ventajas mas, me gustaría compartirles esta información , para el que tenga dudas sobre las ventajas. http://isopixel.net/2016/05/09/ventajas-del-diseno-responsivo/