<\/p>\n
El dise\u00f1o web adaptativo o adaptable (en ingl\u00e9s, responsive web design<\/em>) es una t\u00e9cnica de dise\u00f1o y desarrollo web que mediante el uso de estructuras e im\u00e1genes fluidas, as\u00ed como de media-queries<\/em> en la hoja de estilo CSS<\/a>, consigue adaptar el sitio web al entorno del usuario.<\/p>\n
El dise\u00f1ador y autor norteamericano Ethan Marcotte<\/strong> cre\u00f3 y difundi\u00f3 esta t\u00e9cnica a partir de una serie de art\u00edculos en A List Apart<\/a>, una publicaci\u00f3n en l\u00ednea especializada en dise\u00f1o y desarrollo web, idea que luego extender\u00eda en su libro Responsive Web Design.<\/p>\n
Fuente:<\/strong> Wikipedia.org<\/a>. <\/p><\/blockquote>\n
La proliferaci\u00f3n de dispositivos con acceso a internet puede convertirse en una pesadilla cuando creamos una p\u00e1gina web, ya que no s\u00f3lo obliga a dise\u00f1ar pensando en varias plataformas<\/a> (ordenadores, m\u00f3viles, tabletas, wearables, smart TV, netbooks<\/em>, etc.), sino tambi\u00e9n en infinidad de tama\u00f1os y resoluciones de pantalla. <\/p>\n
El dise\u00f1o adaptativo nos ofrece una soluci\u00f3n<\/strong> a este problema, permiti\u00e9ndonos utilizar el mismo HTML en todos los dispositivos, mientras que es la hoja de estilos CSS la encargada de cambiar el aspecto de la p\u00e1gina de acuerdo con el tama\u00f1o de la pantalla donde se muestra. As\u00ed pues, en el dise\u00f1o adaptativo los elementos presentes en la p\u00e1gina se reorganizan<\/strong> seg\u00fan la pantalla se ampl\u00eda o encoge. <\/p>\n
V\u00eddeo:<\/strong> Dise\u00f1o adaptativo de la p\u00e1gina web del transporte p\u00fablico en Londres<\/a> (Nielsen Norman Group).<\/p>\n
Esta soluci\u00f3n nos ofrece varias ventajas:<\/p>\n
\n
- Mayor rapidez y menores costes en el desarrollo, ya que no trabajamos con diferentes versiones sino con una sola trabajada con una metodolog\u00eda espec\u00edfica desde el comienzo del desarrollo.<\/li>\n
- Mayor facilidad de mantenimiento. <\/li>\n
- Tranquilidad de cara a la aparici\u00f3n de nuevos dispositivos (el dise\u00f1o se adaptar\u00e1 \u00e9l solo de acuerdo con el tama\u00f1o de sus pantallas).<\/li>\n
- Mejorar el posicionamiento SEO de la web, dado que trabajamos con una \u00fanica versi\u00f3n para todos los dispositivos.<\/li>\n
- Mejorar la experiencia de usuario, ya que tenemos un \u00fanico dise\u00f1o principal que mantendr\u00e1 la coherencia con la visualizaci\u00f3n desde cualquier dispositivo.<\/li>\n<\/ul>\n
No obstante, no es suficiente con asegurarnos de que los elementos se adaptan al tama\u00f1o de la pantalla. Cuando trabajamos con dise\u00f1os adaptativos, tambi\u00e9n debemos tener en cuenta ciertas cuestiones:<\/p>\n
\n
- Usabilidad y experiencia de usuario<\/strong>: La web debe ser igualmente usable, con independencia del tama\u00f1o del dispositivo con el que accedamos a ella.<\/li>\n
- Jerarquizaci\u00f3n de los elementos<\/strong>: Debemos tener muy presente en qu\u00e9 orden se va a reorganizar nuestro contenido en las pantallas m\u00e1s peque\u00f1as. Al igual que en el monitor de un PC, lo m\u00e1s importante debe estar situado bien a la vista.<\/li>\n
- Tiempo de carga<\/strong>: Si bien el dise\u00f1o adaptativo nos permite usar el mismo HTML para todos, ello significa en principio que un smartphone<\/em> va a tener que cargar el mismo c\u00f3digo que un ordenador de sobremesa \u2013lo muestre todo o no\u2013, lo que podr\u00eda afectar al tiempo de carga de la p\u00e1gina en el m\u00f3vil. Una soluci\u00f3n es detectar el tipo de dispositivo y que el servidor provea solo de aquellas partes de c\u00f3digo necesarias.<\/li>\n<\/ul>\n
Fuente:<\/strong> Responsive Web Design (RWD) and User Experience<\/a>. <\/p>\n
M\u00e1s informaci\u00f3n:<\/strong>
\n– Manual de dise\u00f1o web responsivo (de Wilfredo Salas G.)<\/a>.
\n– Dise\u00f1o web responsivo seg\u00fan Ethan Marcotte<\/a>.
\n– Historia del dise\u00f1o web adaptativo<\/a>.
\n– Design process in the responsive age<\/a>.
\n– 7 consejos para hacer buen responsive design<\/a>.
\n– Responsive web design: what it is and how to use it<\/a>.
\n– Art\u00edculos sobre dise\u00f1o adaptativo en A List Apart<\/em><\/a>.
\n– Responsive web design tips from BBC News<\/a>.
\n– El\u00a0responsive\u00a0y la importancia en el SEO<\/a>.<\/p>\nHerramientas y recursos<\/h2>\n
Herramientas<\/h3>\n
\n
- Responsive web design Testing tool<\/a>. Esta herramienta nos permite introducir una URL y comprobar al instante su aspecto en diferentes tama\u00f1os de pantalla (240 px, 320 px, 480 px, 768 px, 1.024 px).<\/li>\n
- Responsinator<\/a>. Herramienta en l\u00ednea que permite ejecutar un test de responsividad, simulando la visualizaci\u00f3n de una web en diferentes dispositivos m\u00f3viles.<\/li>\n
- ScreenQueries<\/a>. Pixel Perfect Media Query Debugging Tool.<\/li>\n
- Gridpak<\/a>. The responsive grid generator.<\/li>\n<\/ul>\n
Ejemplos de webs adaptativas<\/h3>\n
\n
- Ejemplos de webs responsivas<\/a>.<\/li>\n
- Men\u00fas adaptables con\u00a0responsive<\/a>.<\/li>\n
- Responsive Web Design: 50 examples and best practices<\/a>.<\/li>\n
- 24 excellent examples of responsive web design<\/a>.<\/li>\n<\/ul>\n
Tutoriales<\/h3>\n
\n
- Awesome tutorials to master responsive web design<\/a>.<\/li>\n
- Responsive web design, most complete guide<\/a>.<\/li>\n<\/ul>\n
Responsive CSS Frameworks<\/h3>\n
\n
- Skeleton<\/a>. Skeleton is a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone.<\/li>\n
- Base<\/a>. A super simple, responsive framework built for all devices big, small and in-between.<\/li>\n
- Gumby<\/a>. Gumby 2 is an amazing responsive CSS Framework built with the power of Sass.<\/li>\n
- Amazium<\/a>. The clean and simple responsive framework.<\/li>\n
- Foundation<\/a>. Foundation 5 is the most advanced responsive front-end framework in the world.<\/li>\n
- Bootstrap<\/a>. The most popular front-end framework for developing responsive, mobile first projects on the web. Desenvolupat per la gent de Twitter.<\/li>\n
- The Goldilocks Approach<\/a>. Ofrece archivos CSS y HTML para programar webs adaptativas. <\/li>\n
- Proportional Grids<\/a>. Simplemente, rejillas proporcionales que funcionan incluso en IE7.<\/li>\n
- Responsive Grid System<\/a>. Ofrece archivos y recursos para iniciarse en el dise\u00f1o web adaptativo.<\/li>\n
- \nThis is responsive<\/a>. Interesante colecci\u00f3n de patrones y recursos adaptativos del dise\u00f1ador web Brad Frost.<\/li>\n<\/ul>\n
<\/p>","protected":false},"excerpt":{"rendered":"
Definici\u00f3n El dise\u00f1o web adaptativo o adaptable (en ingl\u00e9s, responsive web design) es una t\u00e9cnica de dise\u00f1o y desarrollo web que mediante el uso de estructuras e im\u00e1genes fluidas, as\u00ed como de media-queries en la hoja de estilo CSS, consigue adaptar el sitio web al entorno del usuario. El dise\u00f1ador y autor norteamericano Ethan Marcotte … <\/p>\n