• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal
  • Saltar al pie de página

LoMejordeWP

Lo Mejor de WordPress - Plantillas, plugins y recursos para WordPress

  • Inicio
  • Blog
  • Secciones
    • WordPress
      • Colección de Temas
      • Colección de Plugins
    • Tiendas Online
    • Marketing Online
    • Diseño Web
  • Recursos
    • Mejores hosting
    • Contratar dominios
  • Contacto

Diseño web adaptado a dispositivos móviles o Responsive Design

3 febrero, 2021 Diseño Web Palmira Ruiz 7 comentarios

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,…).

Diseño web adaptativo

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.

Publi Global

Los mejores temas WordPress

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.

Ejemplo de Responsive Web Design

Otros ejemplos de páginas web relevantes que se han pasado ya al diseño adaptativo son:

  • Google
  • Starbucks
  • GovUK
  • Grey Goose
  • CSS Tricks
  • Fundraise.com
  • Fork
  • Smashing Magazine

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.

Si te gusta, compártelo:

  • Haz clic para compartir en Twitter (Se abre en una ventana nueva)
  • Haz clic para compartir en Facebook (Se abre en una ventana nueva)
  • Haz clic para compartir en LinkedIn (Se abre en una ventana nueva)
  • Haz clic para compartir en Pinterest (Se abre en una ventana nueva)
  • Haz clic para compartir en WhatsApp (Se abre en una ventana nueva)

También te puede interesar

Diseño Web Diseño páginas web Diseño responsive

Autor: Palmira Ruiz

Apasionada de WordPress. Diseñadora gráfica, maquetadora, decoradora, interiorista y visual merchandiser desde 2001. Deseo ayudarte a conseguir el sitio web perfecto para tu empresa o proyecto personal. Que esté orientado a alcanzar tus objetivos y que proyecte tu imagen de marca adecuadamente.

Comentarios

  1. Laura García dice

    16 enero, 2013 a las 10:40

    ¡¡Excelente resumen!!. Nosotros en nuestra web estamos pensando adaptarla a móvil.

    Responder
    • LoMejordeWP dice

      16 enero, 2013 a las 10:42

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

  2. Esther Gaona dice

    16 enero, 2013 a las 10:46

    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

    Responder
    • LoMejordeWP dice

      16 enero, 2013 a las 10:49

      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 😉

  3. La Carrozal dice

    16 enero, 2013 a las 10:51

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

    Responder
  4. jose dice

    28 diciembre, 2017 a las 18:12

    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

    Responder
    • Palmira Ruiz dice

      29 diciembre, 2017 a las 10:06

      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.

Política de comentarios:

Responsable: Palmira Ruiz Tauste | Finalidad: Gestión de comentarios | Legitimación: Tu consentimiento
Destinatario: Webempresa (el hosting de este blog, ubicado en España) | Podrás ejercer tus derechos de acceso, rectificación, limitación o supresión de tus datos. Por favor lee nuestra política de privacidad antes de comentar.

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad. *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Nota: Algunos enlaces de esta página son de afiliado. Esto es, si decides utilizarlos me aportará una pequeña comisión para mantenimiento del blog (sin coste adicional para ti). Este hecho no influye de ninguna manera en las recomendaciones hechas.

Te recomendamos

Divi - Mejor plantilla WordPress moderna y elegante

Themeforest - Las mejores plantillas para WordPress

Siteground - Mejor Hosting WordPress y Web

Inicio · Blog · Recursos · Contacto
  • Facebook
  • Pinterest
  • Twitter

Copyright © - LoMejordeWP.com · Web diseñada con Genesis Framework y hospedada en Webempresa

Aviso legal, política de privacidad y de afiliación · Política de Cookies · Exclusión de responsabilidad de afiliados

Esta página utiliza cookies y otras tecnologías para que podamos mejorar su experiencia de navegación   Acepto Más info
Política de Cookies

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Siempre activado
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Non-necessary
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
GUARDAR Y ACEPTAR