Blog

Diseño web responsive

Fuente: 40 de fiebre.com

EL DISEÑO WEB RESPONSIVE O ADAPTATIVO ES UNA TÉCNICA DE DISEÑO WEB QUE BUSCA LA CORRECTA VISUALIZACIÓN DE UNA MISMA PÁGINA EN DISTINTOS DISPOSITIVOS. DESDE ORDENADORES DE ESCRITORIO A TABLETS Y MÓVILES.

Hoy en día accedemos a sitios web desde todo tipo de dispositivos; ordenador, tablet, smartphone… por lo que, cada vez más, nos surge la necesidad de que nuestra web se adapte a los diferentes tamaños de los mismos.Pero, ¿qué es esto exactamente?

¿EN QUÉ CONSISTE EL DISEÑO RESPONSIVE?

Se trata de redimensionar y colocar los elementos de la web de forma que se adapten al ancho de cada dispositivo permitiendo una correcta visualización y una mejor experiencia de usuario. Se caracteriza porque los layouts (contenidos) e imágenes son fluidos y se usa código media-queries de CSS3.

El diseño responsive permite reducir el tiempo de desarrollo, evita los contenidos duplicados, y aumenta la viralidad de los contenidos ya que permite compartirlos de una forma mucho más rápida y natural.

diseno-responsive

Se basa en proporcionar a todos los usuarios de una web los mismos contenidos y una experiencia de usuario lo más similar posible, frente a otras aproximaciones al desarrollo web móvil como la creación de apps, el cambio de dominio o webs servidas dinámicamente en función del dispositivo.

En definitiva, el diseño web responsive se consolida como una de las mejores prácticas hoy en día en diseño web. Aunque como todas, tiene sus pros y contras, la web responsive es considerada hoy en día la mejor práctica posible en el diseño web, y nosotros te enseñasmos los puntos que debes tener en cuenta a la hora de hacer tu web responsive.

 

LA ETERNA DUDA, LA ETERNA DISCUSIÓN. QUE SERÁ MEJOR: ¿WEB RESPONSIVE? ¿WEB MÓVIL? CADA UNA TIENE SUS VENTAJAS E INCONVENIENTES. LA ACOGIDA DEL DISEÑO RESPONSIVE HA SIDO BRUTAL Y HAY QUE TENER CUIDADO, AQUÍ TIENES ALGUNOS CONSEJOS.

Hacer una web responsive está de moda. Y como todas las modas, la mayor parte de gente lo hace sin saber exactamente porqué.

Las opciones para ofrecer nuestra web a los usuarios que nos visitan desde dispositivos móviles son varias: web móvil, app nativa y web responsive. Cada una tiene sus pros y sus contras y a priori, la que más fuerza está cogiendo es la web responsive por un tema sencillo: es la más barata y rápida. Y no por ello la más sencilla, que podría parecer que si.

Esta técnica ha modificado totalmente la forma en la que se diseña. Ha modificado el patrón. Ya no solo esta técnica sino que realmente el propio usuario y sus hábitos de navegación y consumo ha cambiado las reglas.

No me voy a meter demasiado en porque el diseño responsive es la mejor opción de todas que para mi están claras, sino que vamos a hablar de algunas cosas que debes saber y tener bien claras antes de decidirte por esta opción. Como ya explicamos en los consejos para mejorar el SEO móvil de tu web, el propio Google, recomienda el diseño responsive antes que crear una página web móvil completa. Los motivos son claros y los compartimos en su totalidad: la experiencia de usuario mejorará considerablemente, evitamos posibles problemas de contenido duplicado y le damos al usuario una imagen consistente.

Sin embargo, aunque Google lo recomiende, puede que tu web no tenga que tener un diseño responsive. Por ejemplo, si tienes una landing page y estás totalmente centrado en conversión, puede que necesites un diseño totalmente diferente en móvil y esta técnica por lo tanto no encaje ya que quieres mostrar otra información.

Algunos puntos que debes tener muy en cuenta antes de hacer tu web responsive.

CARGA DE PÁGINA

Uno de los grandes problemas que nos encontramos cuando hacemos una auditoría es que en los diseños responsive no se diferencia a nivel de servidor la carga de elementos. Esto es un gran problema en la carga de página ya que al hacer la web responsive se cargan exactamente los mismos recursos que para tu web de escritorio.

Para solucionarlo, trata de utilizar librerías que te permitan hacer una carga de página condicional, evitando cargar recursos innecesarios cuando la gente te visita desde móvil.

OJO CON LOS TAMAÑOS DE PANTALLA

Hay que tener mucho cuidado a la hora de diseñar. Se recomienda diseñar con el patrón mobile-first para evitar tener problemas de adaptación con las pantallas y evitar sobrecargar la página de elementos inútiles. La gran cantidad de dispositivos y pantallas que existen en el mercado hace que tengamos que tener muy en cuenta tamaños de contenido fluidos y no estáticos para evitar que haya usuarios que no vean bien nuestro contenido.

 

EVITA LOS EFECTOS

Algunos de los efectos que usas en la web de escritorio no funcionarán en la web responsive. Esto es vital, ya que si no haces una comprobación multi dispositivo-plataforma puede que te encuentres que sorprendentemente el tiempo por visita desde móvil es extrañamente bajo. Esto pasa mucho, por ejemplo, cuando el “leer más” de una noticia aparece en el hover. El hover no existe en móvil por lo que el usuario no podrá continuar su visita.

No olvides medir, medir y medir continuamente para detectar posibles fugas y fallos de rendimiento en la navegación móvil.

Ten en cuenta todas estas cosas antes de lanzarte, así como el diseño responsive mejora la experiencia de usuario, como hemos visto, no siempre tiene que ser así.