> Manuales > 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".

Artículos
  • Artículos del manual

  • 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.

  • 8 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.

  • 9 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.

  • 10 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?

  • 11 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.

  • 12 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.

  • 13 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.

  • 14 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 <a href="http://www.desarrolloweb.com/css/">manuales de CSS en DesarrolloWeb.com</a>.

  • 15 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.

  • 16 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.

  • 17 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.

  • 18 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.