En agencia seo Madrid queremos ayudarte a crear tu propio diseño web responsive
¿Qué es un diseño web responsive?
Podemos estar seguros de que en los últimos años has oído el término diseño “web responsive”. Y es normal ya que a día de hoy es imprescindible tener una web adaptada, pero ¿qué es exactamente este término?
Te lo vamos a explicar paso a paso:
Un diseño web responsive es el que es capaz de adaptarse a las pantallas de distintos dispositivos y tamaños, vamos a móviles, tablets y demás soportes.
En ocasiones podemos confundir el responsive con una web para móviles y nada más lejos. Cuando hablamos de responsive nos referimos a un único sitio web que es capaz de adaptarse a dispositivos de todo tipo, desde ordenadores grandes hasta pantallas de móvil más pequeñas.
¿Por qué necesitas un diseño web responsive?
- Porque el mundo es cada día más móvil
Cada día más joven usan el móvil para navegar así como tabletas o portátiles
- Porque es imprescindibles para tu SEO
En 2015 google actualizó su algoritmo para que aquellos sitios web no estuvieran preparados para ofrecer un experiencia de este tipo fuesen penalizados
(si no dispones de diseño web responsive estas posicionados peor cada vez que un usuario te busca)
- Porque mejora la experiencia el usuario
Este diseño ofrece una experiencia para todos los usuarios sea cual sea su dispositivo y eso da un mayor beneficio a la página.
- Porque estarás preparado para el futuro
Ya que cada vez los usuarios emplean una mayor variedad de dispositivos, es complicado diseñar una solución individual a casa uno de ellos.
- Porque lo necesitas para seguir creciendo
Diseño de paginas web responsive
Las tipografías
Es evidente que el tipo de letra importa de manera que podemos leer los textos sin tener que agrandar la pantalla. Debemos incluir columnas con un ancho acorde a un sitio responsive.
Imágenes y videos
Los elementos visuales deben tener una proporción lógica en función del dispositivo.
Usabilidad
Los dispositivos como móviles y tablets usan pantallas táctiles para interactuar con los contenidos, mientras que en los ordenadores esta acción tiene lugar con el ratón. Esto quiere decir que debemos ofrecer unos menos que den una buena experiencia en ambos casos.
Tiempos de carga
Muchos usuarios tienen poca paciencia o se frustran y hace que abandone la página. Por eso debemos optimizar al máximo los tiempos de carga en todos los dispositivos.
Formato horizontal y vertical
En general los usuarios suelen preferir el vertical pero pueden alternar ambos para visualizar según qué contenido.
¿Cómo configurar un diseño web responsive?
En nuestra empresa de diseño web lo tenemos claro. El pc está perdiendo la lucha contra la cantidad y diferentes tipos de dispositivos con loas que podemos acceder a la red. Si no sabes si tu sitio Web está optimizado para móviles, Google pone a disposición una herramienta online para que puedas comprobarlo. Solamente tienes que dirigirte a prueba de optimización para móviles e introducir la URL principal de tu sitio web. En este artículo te vamos a ayudar a trabajar con este diseño.
Uso de viewport en etiqueta metatag
Prácticamente todos los navegadores que utilizamos en los dispositivos portátiles escalan paginas HTML en base a un ancho el cual las coloca para que quepan en la pantalla
Para poder modificarlo podemos hacer unos del metatag viewport, que dirige al navegador que ancho debe tomar.
Este metatag debe ser colocado dentro de la etiqueta “head” meta name=»viewport» content=»width=device-width, initial-scale=1.0″>
Con este código os mostramos un ejemplo donde utilizamos una anchura del dispositivo con el que visualizamos la página para establecerlo como el nuevo viewport de nuestro sitio.
Uso de media queries
Los media queries son propiedades de CSS3 las cuales nos dan la opción de agregar condiciones a nuestra hoja de estilo, el cual nos permite utilizar una serie de layouts para desplegar de distintas formas un mismo contenido.
La magia esta en ser precavido y ver la manera en que nuestro página se desplegara en distintos dispositivos y tamaños. Por ello debemos utilizar una estructura HTML responsive, que sea adaptable a distintos entornos y nos permitan el uso de distintos layouts.
Uso de max-width y min whist
Estas dos propiedades son muy relevantes ya que gracias a ellas podemos realizar distintas estructuras. Estas propiedades nos permiten establecer la mínima y la máxima anchura.
Uso de medidas relativas
Debes saber también que las medidas relativas siempre serán mejores que las absolutas al realizar diseños.
Al usar porcentajes hace que resulte más fácil adaptar elementos, por eso se recomienda utilizarlo para márgenes y tamaños de fuentes.
Nuestra empresa de diseño web quiere daros unos pequeños consejos a la hora de realizar un un diseño web responsive.
No incluyas scroll horizontal: son incómodos a la hora de navegar con el móvil. El scroll vertical es más habitual y mucho más cómodo de hacer.
No hay ratón: se maneja con los dedos, la pantalla es táctil, por ello ten en cuenta que los espacios deben ser mayores para que los dedos los puedan hacer sin problemas.
Ahorrar tiempo: los usuarios deben llegar pronto a sus búsquedas. Es decir si queremos vender algún producto será mejor ahorrarnos cuestionarios, que la persona pueda comprarlo con un click.
Si te ha parecido interesante este artículo, no te puedes perder los trucos para mejorar el posicionamiento seo