Cada persona posee un dispositivo con unas dimensiones de pantalla diversas desde las 4 hasta las 5,5 pulgadas de media en Smartphone y alrededor de 10 pulgadas en tablets, por no hablar de las 13 a 17, 20 o incluso 24 pulgadas que alberga un ordenador o pc. A la hora de cargar una página en unos u otros dispositivos las páginas pueden sufrir alteraciones para los aparatos a los que no están adaptadas y resultar un mosaico casi incomprensible de imágenes, texto y enlaces.

La resolución de pantalla es el factor más importante a considerar para el tamaño de un sitio web, aunque no el único, para esto hay que tener en cuenta las resoluciones de pantalla más comunes. Hasta hace un tiempo la resolución más popular era 1024×768 pixeles, pero eso ha cambiado en los últimos años y ahora el tamaño más común es 1366×768, en segundo lugar, un tamaño mucho mayor 1920×1080.

Que es el diseño responsive y ¿Por que es tan importante tener una pagina web responsive? 

El diseño responsive, en español, responsivo, constituye ni más ni menos que la capacidad de una página web para adaptarse (o responder) a distintos tamaños y orientaciones de pantalla para mejorar la experiencia de usuario. Cada persona posee un dispositivo con unas dimensiones de pantalla diversas desde las 4 hasta las 5,5 pulgadas de media en smartphones y alrededor de 10 pulgadas en tablets, por no hablar de las 13 a 17, 20 o incluso 24 pulgadas que alberga un ordenador de mesa.

A la hora de cargar una página en unos u otros dispositivos las páginas pueden sufrir alteraciones para los aparatos a los que no están adaptadas y resultar un mosaico casi incomprensible de imágenes, texto y enlaces. El diseño responsive permite que sea cual sea el tamaño en el que se visualiza una página web o su orientación (horizontal o vertical), el contenido se adapte al ancho y alto de la pantalla para ofrecer una sensación agradable a la vista. Este enfoque optimizado es un concepto relativamente moderno que nace fruto de la grandísima variedad y tamaño de dispositivos móviles y ordenadores de escritorio.

Estas son las resoluciones de pantalla más comunes en todo el mundo para que adaptes tu web a medidas responsive:

360×640 (móvil pequeño): 22,64%.

1366×768 (ordenador portátil medio): 11,98%.

1920×1080 (escritorio grande): 7,35%. 375×667 (móvil medio): 5%.

1440×900 (escritorio medio): 3,17%. 720×1280 (móvil grande): 2,74%.

Pero también: Los usuarios de escritorio no siempre tienen su pantalla maximizada (especialmente los usuarios de «escritorio grande»).

Aunque no es un escenario común, piensa en lo que podría suceder si el sitio web se mostrara en orientación vertical.

No se olvide de las grandes pantallas de escritorio y de televisión (por ejemplo, piensa en: Microsoft Edge en Xbox) hay que ser capaz de adaptarse a todas.

Google premia a las páginas web con diseño responsive web

Hace ya más de dos años que Google incluyó un nuevo algoritmo en su motor de búsqueda. Con esta actualización las páginas web que incluyeran un diseño adaptable serían premiadas en el ranking de búsquedas.

Si tienes una empresa con presencia online sabrás lo importante que es subir unas cuantas posiciones en el buscador, ya que cuanto mejor es tu rank, más usuarios acceden a tu página aumentando exponencialmente tus posibilidades de venta gracias a una mejor experiencia de usuario.

¿Cuáles son las ventajas de usar un diseño web responsive?

• Mejora la usabilidad y la facilidad de lectura en dispositivos móviles.

• No es necesario construir versiones diferentes de una misma página, ahorrando tiempo y dinero.

• Se adapta automáticamente a nuevos anchos y altos de pantalla, por lo que no importa cómo

cambian las tendencias de consumo a nivel de pantallas, tu web se adaptará a ellas.

• Optimiza los anuncios mejorando la experiencia de usuario.

¿Cómo podemos implementar el diseño web responsive en nuestra página?

Hay varias maneras de asegurarnos de que nuestra página web es responsive. Una de ellas es asegurándonos de tener un diseño responsive CSS y un diseño responsive html5. A la hora de utilizar CSS debemos olvidarnos de las medidas en píxeles. Si sólo utilizamos porcentajes, nos aseguraremos de que el contenido se vea siempre igual, independientemente de cómo de grande o pequeña sea la pantalla en la que estemos viendo la página.

Con html5 lo que tenemos que hacer es utilizar las meta etiquetas adecuadas, como la meta etiqueta viewport, que nos permite determinar el comportamiento que queremos que tenga un navegador de las características que indicamos cuando visualice nuestra página. Lo mejor para evitarnos problemas, es asegurarnos de que implementamos el diseño responsive desde cero para distintos dispositivos, es decir, desde que empezamos a crear nuestra página web.

¿Cómo puede afectar la ausencia de diseño responsive a tu página web?

El porcentaje de usuarios que acceden a Internet a través de sus dispositivos móviles crece exponencialmente cada año, relevando al ordenador de mesa a un contexto casi exclusivamente laboral. Los más de 35 millones de usuarios consultan todo tipo de información desde sus dispositivos, desde revisar el correo electrónico, entrar en sus redes sociales, navegar por la web y, por supuesto, comprar todo tipo de productos y servicios. Si una página web que posee aquello que están buscando los usuarios no ofrece una correcta experiencia de navegación para los usuarios y la abandonarán.

Del mismo modo, la ausencia de un diseño web que responda de mEanera eficaz y sea, además, estéticamente agradable, pone en peligro la posibilidad de ganar una enorme cantidad de visitantes y posibles clientes. Adaptar tu página web al diseño responsivo es vital para posicionar tu página y ofrecer una experiencia de usuario capaz de captar el mayor volumen de clientes y compras posibles.

¿Cuál es el porcentaje de webs responsive?

A pesar de que ya más del 40 % de los usuarios de Internet en nuestro país realizan compras a través de sus teléfonos móviles y tablets, el 50 % de las empresas aún no cuentan con páginas que incluyenun diseño responsive o adaptativo.