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".
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
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
2.- Diseño responsive es diseño web
3.- Responsive es algo más que tamaños de pantalla
4.- Los tres pilares de optimización del diseño responsive
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
6.- Progressive Enhancement Vs Graceful Degradation
7.- Mobile First
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
9.- Guías de uso de las Media Queries en Responsive Web Design
10.- Breakpoints para diseño Responsive
11.- Medidas estándar de pantallas para tus media queries
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
13.- Unidades de medida CSS más adecuadas para el Responsive Web Design
14.- Unidades de medida CSS para fuentes Responsive Web Design
15.- Unidades CSS viewportwidth y viewportheight
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
17.- Etiqueta meta Viewport
18.- Imágenes responsive con la etiqueta Picture
19.- Mejorar la experiencia de usuario en sitios Responsive
Descargas
Comentarios
Claudio Galíndez
¿Esos 2 artículos son un Manual para ustedes?
Saludos
Ing. Claudio Galíndez
Raúl Trejo
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
Ya van x 5 articulos. Como puedes apreciar están publicando nuevos cada poco.
carlos_suarez-578357
iscgivox
midesweb
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
midesweb
granapedro
El manual es comprensible y está muy bien redactado.
Saludos y Gracias.
German Baena
En general mucho bla bla bla y poco de lo que sabemos...!!!
midesweb
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
operador_manco
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