Probablemente recuerdes cómo eran las páginas web hace años cuando navegabas desde el móvil. Eso del diseño web adaptable no existía y, realmente, la mayoría eran la misma página web que se mostraba en el ordenador, con la cosa de que se veía todo más pequeño, un horror. Poco a poco se empezaron a diseñar versiones especiales que eran más agradables en las pantallas de los móviles y más tarde de las tablet.

Ahí empezaba el diseño web adaptable o responsive. Se consideraban unas resoluciones como las estándar para móvil y tablet y punto. Esto no era suficiente, porque no todos los móviles tienen las mismas proporciones de pantalla, con las tablet pasaba lo mismo. Hoy en día las webs adaptables encajan perfectamente en cualquier tipo de pantalla y hacen que la experiencia usuario sea agradable en todos los dispositivos.

Cómo es una web adaptable o responsive

 

Existen varias maneras de hacer un diseño web adaptable. Por un lado, que es lo que se hacía hace ya unos años, se diseñaban dos versiones de la web, la versión móvil llevaba el prefijo “m” y se mostraba cuando el tamaño de la pantalla del dispositivo era menor a una resolución establecida. De esa manera navegabas por la versión de diseño web adaptable de Facebook y veías una versión de Facebook más comprimida, puedes probar pinchando en el enlace porque aún sigue activa.

Esto supone hacer dos versiones de cada web y de cada una de sus páginas, es decir, duplicar el código. Google opta por el diseño web responsaive o adaptativo, con contenido dinámico que se adapta directamente a cualquier pantalla. De esta manera solo hay un código HTML, una única versión de la web. El tiempo de carga de la propia web es menor (algo que mejora el posicionamiento) y, por supuesto, la experiencia para el usuario es mucho más agradable.

ejemplo de diseño web adaptable o responsive de seik.es redes sociales
ejemplo de diseño web para página de escritorio u ordenador seik.es diseño web y redes sociales

Por el posicionamiento de Google

Google tiene un algoritmo que es el que decide qué página se muestra en primer lugar, segundo, tercero, etc. Un algoritmo, para entendernos, es como una ecuación gigante donde se incluyen en forma de variables cuantitativas todos los criterios de valoración que el buscador estima oportunos. En este caso Google. Las aplicaciones de redes sociales, por ejemplo, también tienen su propio algoritmo para determinar que publicaciones ves primero en tu feed.

En el caso del algoritmo de Google debes saber que éste es privado, nadie sabe de qué se compone o cómo funciona. Bueno, nadie lo sabe directamente, a base de prueba / error se intuyen los factores a los que Google da más importancia. Uno de los pocos factores que Google ha hecho oficiales es el del diseño web adaptable.

 

 ¿Cómo un algoritmo determina que una web adaptable es agradable a la hora de verla en un móvil?

Pues valorando que los elementos gráficos y de texto sean legibles. Es decir, Google determina que el tamaño de la letra y las imágenes sea el adecuado, y sus posiciones, que no estén demasiado juntos unos elementos de otro para que tú, con el dedo, puedas seleccionar lo que quieras sin problemas. 

Otro factor importante es la velocidad de carga, más aún que en las páginas web de escritorio. Tiene sentido, la conexión a internet en los smarphones es más lenta que el wi-fi de casa, por eso Google valora que las imágenes estén optimizadas (comprimidas) y que tarden poco tiempo en cargarse. Por eso si utilizas el formato PNG no te posiciona igual que si usas el JPG para imágene, porque éste último pesa menos y tarda menos tiempo en cargarse.

Es tan importante el diseño web adaptable para Google, que en 2021 no se mostrarán las web que no sean adaptables en los resultados de búsqueda. 

varios dispositivos para diseño web adaptable responsive web design

Por la propia experiencia usuario

La experiencia del usuario es lo más importante realmente. Una página web adaptable contribuye a ello. Y resulta que la navegación desde dispositivos móviles ha superado en 2020 a la navegación desde ordenadores. Esta tendencia se mantendrá durante los próximos años, seguro. La navegación móvil, de hecho, supone el 80% de la navegación total que se realiza desde los hogares, algo muy sorprendente incluso en época de pandemia.

Características comúnes del diseño web responsive

Si entras a una web y te resulta agradable porque puedes ver todo el contenido sin forzar la vista ni hacer zoom es muy probable que vuelvas a visitarla. O si es la web de una tienda online es probable que compres. En el diseño web en general suele ser importante cumplir unos patrones de estructura o maquetación. Es la organización de ciertos elementos clave que el usuario, inconscientemente, espera que estén en un lugar concreto.

Es verdad que la originalidad es un plus, en todo en general. En el diseño web no tanto, porque nos hemos acostumbrado a ver la barra de menú arriba, donde podemos acceder directamente a todas las páginas de la web. El logo de la marca suele colocarse arriba a la izquierda. En la versión móvil directamente aparece la hamburguesa arriba a la derecha. Si, esas tres rayas, tres puntos para los “transgresores” ;-), son la hamburguesa, el típico icono para desplegar el menú. Y abajo del todo, por terminar con el ejemplo, verás que el pie de página se compone de un índica de todas las pñaginas que componen la web y los datos de contacto como: email, dirección, teléfono, formulario de contacto, textos legales, etc.

De hecho, es importante cumplir esa serie de patrones en el diseño web, más aún teniendo en cuenta la navegación móvil. Para las versiones móviles la barra de menú suele modificarse. El usuario espera algo y tú se lo tienes que dar. Bueno, nosotros, que eso es cosa nuestra.

Si tu web no está diseñada de manera responsive

Por cierto, es la palabra inglesa que se utiliza para “adaptable”. Tienes que hacer algo. Lo malo es que probablemente te perezca más la pena hacer una nueva desde cero. La parte buena es que tendrás una web mucho más atractiva y tus clientes te valorarán más. Porque resulta que los demás hacen lo mismo que tú, cuando vas por primera vez a una empresa o quieres informarte y conocer una nueva marca, la buscas en internet.

Igual que valoramos que una tienda este limpia, ordenada y con los productos bien puestos… En la web ocurre lo mismo, una experiencia agradable trae más clientes a tu establecimiento. O supone más ventas en tu tienda online. 

 

Recuerda que en nuestra web tienes una calculadora para saber el precio de tu página web. No es necesario registrarse ni dejar ningún dato. Y si te interesa contactar con nosotros escríbenos a [email protected]

 

 

¿Alguna consulta? ¿No sabes lo que necesitas?

Si no sabes lo que necesitas o si no encuentras los complementos que necesitas (tienda online, sistema de reservas, etc.) es porque no podemos darte un precio por adelantado ya que puede variar según las necesidades. Rellena el formulario de contacto y te ayudaremos enseguida.

0 comentarios

Enviar un comentario

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

CONTACTA CON SEIK

Responsable: Iker

Finalidad: Permitir al usuario contactar con Seik para realizar consultas de cualquier tipo.

Destinatarios: Tu consentimiento.

Derechos: Acceder, rectificar o suprimir tus datos.

Información adicional: Haz clic aquí.

SÍGUENOS EN REDES SOCIALES

Pol. Ind. Eziago Parcela 12, Tr.

20120 - Hernani 

Gipuzkoa (España)

 [email protected]

Todos los textos contenidos en Seik.es son propiedad exclusiva de su propietario y no se podrán utilizar salvo petición expresa solicitada y autorizada por escrito.

© 2021 Seik | Diseño Web y Redes Sociales

Aviso Legal | Política de Privacidad | Política de Cookies

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Ver
Privacidad