• 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 adaptativo o responsive design (Infografía)

18 noviembre, 2020 Diseño Web Palmira Ruiz 1 comentario

Estamos en un mundo móvil, y cada vez más accedemos a Internet desde dispositivos variados, con necesidades y en situaciones diferentes. Queremos compartir con vosotros una interesante infografía sobre el diseño web adaptado a móviles o responsive web design que explica gráficamente qué esta nueva metodología de diseño y porqué deberías plantearte incorporarla a tu sitio web si aún no lo has hecho.

El diseño web adaptativo, (responsive web design), es una técnica de diseño y desarrollo web que, mediante el uso de estructuras e imágenes fluidas y media queries en la hoja de estilo CSS permite que el sitio web se adapte al entorno del usuario, sea cual sea el dispositivo que utilice para navegar.

Esto es sumamente importante, ya que, cada vez se venden más dispositivos de distinta índole y tamaño de pantalla, y está cambiando la forma de diseñar las páginas web para que sean visualizadas correctamente en cualquier dispositivo.

Si además de esto tenemos en cuenta que en los sitios móviles puede darse el caso de que las funciones y contenidos necesiten ser diferentes que en la versión vista en un ordenador de sobremesa, el diseño adaptativo es la solución más acertada, quitando o reduciendo la visibilidad de ciertos elementos.

Si observamos los datos que muestra la infografía de más abajo, el 67% de los internautas utiliza dispositivos móviles para comprar o visitar tiendas online. Esto es un avance muy importante con respecto a años anteriores, y el diseño adaptativos está haciendo mucho para que  este porcentaje siga creciendo.

El diseño web adaptativo supone que usando HTML y CSS logremos una sola versión que cubre todas las resoluciones de pantalla, por lo que el sitio web creado es accesible desde todo tipo de dispositivos.

Publi Global

Los mejores temas WordPress

A continuación os resumo los tres elementos técnicos para el diseño web adaptativo:

  • Fluid grid (cuadrícula fluida): En lugar de píxeles utiliza porcentajes para definir los anchos de las columnas o divs.
  • Media queries: Permiten consultas a la hoja de estilos CSS basándose en el ancho mínimo y máximo de un navegador.
  • Imágenes flexibles: Las imágenes no tienen anchos fijos sino un máximo, que por lo general suele mostrarse al 100% en un PC.

Ventajas

  • Mejor experiencia para el usuario: Ayuda a que todos los usuarios vean la web de la mejor manera posible para el dispositivo desde el que acceden.
  • Costes más bajos: Se van a reducir los costes de creación y mantenimiento.
  • Mejor SEO: Google puede descubrir mejor tu contenido.
  • Actualizaciones más eficientes: cualquier actualización o modificación en el diseño, se ve reflejado en todas las plataformas, lo que reduce tiempos y márgenes de errores.
  • Accesible a todos: Se incrementa la accesibilidad de los usuarios, incluidos las personas con distintos problemas de disminución visual.
  • Búsquedas: Al hacer una búsqueda, aparecerá una URL única en los resultados, por lo que se ahorran redirecciones y posibles fallos que puedan surgir.

Conclusión

El diseño web adaptativo es actualmente una solución imprescindible si deseas conservar tu presencia en la web y cualquiera que sea el soporte de navegación usado por el visitante. El diseño web adaptativo es definitivamente una solución eficaz que ofrece una experiencia de usuario deseada. Es una evolución superior del diseño web que invita a los diseñadores a un nuevo desafío ergonómico y asegura a los usuarios una experiencia enriquecida. Sin embargo, es necesario saber qué alternativas hay. Existen sitios alternativos para móviles que dirigen a los visitantes en posesión de un smartphone hacia el sitio móvil o a aplicaciones móviles que aunque son mejores para controlar la experiencia del usuario, son bastante costosas en desarrollar y no permiten una indexación óptima.

En esta infografía podemos ver, a parte de tendencias en navegación, casos de éxito de algunas de las más importantes editoriales internacionales.

Infografía diseño web adaptativo

Cortesía de Uberflip.

¿Qué otras razones consideras tú importantes para adaptar el diseño de tu web a dispositivos móviles?

Espero que este artículo te ayude a decidirte a pasar tu sitio web a un diseño web adaptativo si es que aún no lo has hecho.

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 Diseño Web Adaptativo

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. Jorge de la Morena dice

    2 marzo, 2013 a las 0:38

    Buenas noches. La verdad que estaba pensando en adaptar mi web para móviles pero desarrollando una app para iOS y Android. Después de consultar a varias agencias, sólo una de ellas, asentada en Zaragoza, http://quelinka.com (tengo que hacerles publi por lo bien que han tratado) me recomendaron, dejar para un poco más tarde el desarrollo de la aplicación y que me centrara en preparar mi web con responsive design. Aún están preparándola pero lo que he visto me gusta mucho el resultado. Así que, bienvenido el responsive.

    Responder

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