La frase \u201cResponsive Web Design\u201d apareci\u00f3 por primera vez en Mayo del 2010 en un art\u00edculo del blog \u201cA List Apart\u201d una publicaci\u00f3n en l\u00ednea especializada en dise\u00f1o y desarrollo web, el art\u00edculo fue escrito por el dise\u00f1ador norteamericano Ethan Marcotte quien difundi\u00f3 esta idea en una serie de art\u00edculos y que luego extender\u00eda en su libro Responsive Web Design.<\/p>\n
<\/p>\n
El Responsive Web Design conocido tambi\u00e9n como RWD por sus siglas en ingl\u00e9s, es una filosof\u00eda de dise\u00f1o y desarrollo web<\/b> cuyo objetivo es adaptar la apariencia de las p\u00e1ginas web al dispositivo que se est\u00e9 utilizando para visualizarla.<\/p>\n
El Responsive Web Design \u00a0pretende que con un s\u00f3lo dise\u00f1o web tengamos una visualizaci\u00f3n adecuada en cualquier dispositivo.<\/p>\n
Es una t\u00e9cnica de desarrollo de interfaces web. Mediante el uso de media queries en las hojas de estilo que dotan de una estructura flexible a los contenidos web adapt\u00e1ndolos a cada tipo de dispositivo.<\/p>\n
A trav\u00e9s del Responsive Web Design se puede mostrar contenidos diferentes de una misma web en diferentes dispositivos, as\u00ed como escalar a la perfecci\u00f3n las im\u00e1genes a cada pantalla.<\/p>\n
Hoy d\u00eda las p\u00e1ginas web se visualizan en multitud de tipos de dispositivos como tabletas, smartphones, libros electr\u00f3nicos, port\u00e1tiles, etc.<\/p>\n
Adem\u00e1s cada dispositivo tiene sus caracter\u00edsticas concretas: Tama\u00f1o de pantalla, resoluci\u00f3n, potencia de CPU, capacidad de memoria,etc.<\/p>\n
El Responsive Web Design se hace posible gracias a la introducci\u00f3n de las Media Queries en las propiedades de los Estilos CSS en su versi\u00f3n n\u00famero 3. Las media queries son una serie de \u00f3rdenes que se incluyen en la hoja de estilos que indica al documento HTML c\u00f3mo debe comportarse en diferentes resoluciones de pantalla.<\/p>\n
Para entenderlo mejor, los dise\u00f1os de las P\u00e1ginas Web, al igual que los peri\u00f3dicos y las revistas, est\u00e1n basados en columnas, entonces con la filosof\u00eda del Responsive Web Design, si una web a resoluci\u00f3n de PC (1028×768 px) tiene 5 columnas, para una Tablet (800×600 px) necesitar\u00eda s\u00f3lo 4, y en el caso de un smartphone cuyo ancho suele ser entre 320 px* 480 px las columnas usadas ser\u00edan 3.<\/p>\n
Todo el mundo sabe que est\u00e1s t\u00e9cnicas han supuesto una aut\u00e9ntica revoluci\u00f3n en el mundo del dise\u00f1o y el desarrollo web, pero son solo t\u00e9cnicas de layout.<\/p>\n
Con el paso del tiempo, el concepto ha ido poco a poco evolucionando y cada d\u00eda es inevitable encontrarse con nuevos m\u00e9todos y trucos amparados en el esp\u00edritu del responsive.<\/p>\n
Algunos autores van m\u00e1s all\u00e1, como es el caso de Jeffrey Zeldman, que considera que el termino responsive debe ampliarse para cubrir cualquier enfoque que permita entregar elegantes experiencias visuales con independencia del tama\u00f1o de la pantalla y las capacidades o limitaciones del dispositivo.<\/p>\n
Una ventaja clave del RWD es que los dise\u00f1adores pueden utilizar un \u00fanico dise\u00f1o para todos los dispositivos, y s\u00f3lo tiene que modificar los estilos CSS para determinar c\u00f3mo es presentado el contenido de los diferentes tama\u00f1os de pantalla. Adem\u00e1s, los dise\u00f1adores no necesitan m\u00e1s que trabajar en HTML y CSS, tecnolog\u00edas con las que ya est\u00e1n familiarizados.<\/p>\n","protected":false},"excerpt":{"rendered":"
\u00bfQu\u00e9 es Responsive Web Design o RWD? La frase \u201cResponsive Web Design\u201d apareci\u00f3 por primera vez en Mayo del 2010 en un art\u00edculo","protected":false},"author":1,"featured_media":2201,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[72,75],"tags":[],"class_list":["post-1940","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-diseno"],"yoast_head":"\n