El diseño web adaptado a dispositivos móviles (Responsive Design o Responsive Web Design) es una forma de diseñar páginas web para que estas se visualicen eficazmente en los distintos dispositivos móviles (smartphones, tablets,…) y de sobremesa (PCs, portátiles,…).
En los últimos años ha habido un incremento significativos del número de dispositivos con navegadores incorporados como tablets, smartphones, consolas, notebooks, e-readers, entre otros. Y los usuarios esperan que su experiencia de navegación se traslade a todos estos dispositivos.
El diseño web adaptativo mediante el uso de estructuras e imágenes fluidas y media queries en la hoja de estilo CSS, logra que con una sola versión de código visualicemos de forma adecuada un sitio web en todas las resoluciones de pantalla de los diferentes dispositivos.
Google también se ha sumado a esta forma de diseñar páginas web y recomienda oficialmente el Responsive Web Design como método preferido para desarrollar sitios web para móviles.
Ventajas del diseño web adaptado a dispositivos móviles
Si aún tu web no cuenta con un diseño web adaptativo es hora de consideres seriamente cambiarla a este tipo de diseño. Para convencerte te ofrecemos las ventajas que vas a obtener:
1. Ahorro de tiempo y dinero: solo te será necesario mantener una sola versión de tu web para PC y teléfonos móviles.
2. Mejor experiencia de usuario: todos los usuarios ven la web de la mejor manera posible para el dispositivo desde el que acceden.
3. Más sencilla de mantener: los diseños responsivos no involucran desarrollo del lado del servidor. Por lo general, bastará con modificar el CSS de la página para cambiar la apariencia de la web en un dispositivo concreto.
4. Es bueno para el posicionamiento web: al contar con una sola versión, cada página tendrá una única URL y por tanto evitarás problemas de duplicidad de contenidos, enlaces entrantes y posibles fallos.
5. Una única Analítica Web: te permitirá comparar cómo está funcionando tu sitio web en distintos dispositivos móviles y PC desde una misma cuenta.
Algunos ejemplos de sitios web con diseño web adaptativo
La página web The Boston Globe es considerada la web insignia del diseño web adaptado a dispositivos móviles, por ser una de los primeros grandes sitios que adoptó el Responsive Web Design.
Otros ejemplos de páginas web relevantes que se han pasado ya al diseño adaptativo son:
En definitiva, teniendo en cuenta que cada vez más los usuarios acceden a Internet con distintos dispositivos, el Responsive Web Design es una solución para la creación de páginas web que nos permitirá un considerable ahorro de costes.
También te recomiendo que eches un vistazo a esta interesante infografía sobre diseño web adaptado a móviles.
Espero que esta pequeña introducción haya sido de tu agrado. En próximos artículos hablaremos más detalladamente de algunos aspectos técnicos de este tipo de diseño.
¿Qué otras ventajas encuentras tú en tener un sitio web adaptado a dispositivos móviles?
Espero que este artículo te sirva para decidirte a tener tu página web adaptada a dispositivos móviles si aún no la tienes.
¡¡Excelente resumen!!. Nosotros en nuestra web estamos pensando adaptarla a móvil.
Gracias Laura 😉
Hoy en día ya no se concibe diseñar una web que no esté adaptada a dispositivos móviles. Nosotros todos nuestros proyectos los hacemos así.
Yo también estoy pensando en pasar mi web a un diseño web adaptado a dispositivos móviles. Siguiendo vuestros consejos creo que pediré hacerla de nuevo desde cero, porque el diseño web actual está un poco anticuado. Aunque entiendo que el diseño web adaptativo no será barato
Hola Esther, como hemos tratado en el artículo, realizar un Responsive Web Design es mucho más económico que hacer dos versiones diferentes para tu web, es más puede que se de el caso en que acabes teniendo que hacer más de dos. Y además no sabemos el día de mañana si nuestros usuarios van a ver tu sitio web en una nevera o en un televisor de 52 pulgadas 😉
Estoy de acuerdo con vosotros, hoy en día todas las web se deberían diseñar para que se vieran correctamente en cualquier pantalla, tenga el tamaño que tenga. Nuestra web está diseñada responsive y estamos muy contentos. Más del 50% de nuestras visitas según Google Analytics son a través de móviles. 🙂
hola Juan, me compre una platilla responsive en TemplateMonster . Pero no pude editarla con Dreamweaver. Que plantilla me recomiendas que sea facil de editar con algun editor WYSWYG ? Gracias Jose
Hola Jose:
Nosotros te recomendamos que te pases a WordPress y sus plantillas. Te ahorrarás mucho tiempo y esfuerzo. Requiere aprendizaje pero a la larga te saldrá mucho más rentable.
Saludos,
Jose.