Nuestras redes sociales

Newsletter

¿Deseas recibir las últimas novedades de Montaweb?

Subscríbase a nuestra Newsletter.

Enviar

Nuestras redes sociales


Lo más leído

  1. 1El calendario 2017 del community manager
  2. 2Diseño de la nueva tienda online Pasoscomodos.com
  3. 3La importancia del diseño web responsive para cada dispositivo
  4. 4Los cuatro componentes del marketing online
  5. 5Diseño gráfico: tendencias y ejemplos inspiradores
  6. 6Aplicación móvil para MSC Aigua

Lo más comentado

  1. 3Qué es un troll y cómo controlar su ataque en las redes sociales de una empresa
  2. 2Los cuatro componentes del marketing online
  3. 1Claves para la estrategia de Posicionamiento web SEO empresarial
  4. 110 tendencias en e-commerce para el 2017

Categorías

BlogVer más

BlogBlog

volver
  • 1
  • Marzo
  • 2017

La importancia del diseño web responsive para cada dispositivo

Publicado por Natàlia en Diseño web comentar
Diseño responsive

En el Mobile World Congress, que esta semana se celebra en Barcelona, podemos ver dispositivos cada vez más ligeros, entre los que destacan los smartphones y las tablets. Esta tendencia explica el significativo descenso en la venta de ordenadores (portátiles y de sobremesa), que cayó un 11,8% en 2016, pasando de 3.636 millones de unidades vendidas a 3.244.

 

Navegamos cada vez más en dispositivos móviles y esto nos obliga a diseñar páginas web y tiendas online responsive, que se adapten a las particularidades de cada soporte.

 

¿Cómo lo logramos del modo más práctico y profesional?

En Montaweb sabemos que Google premia, desde hace unos años, a las webs que han sabido optimizar su diseño para adaptarse a los dispositivos móviles. Pero vamos aún más allá, ya que pensamos que no es únicamente una cuestión de “adaptarse visualmente” a una pantalla más pequeña, sino que una página web o una e-commerce deben tener un diseño web distinto para cada dispositivo.

 

En este sentido, partimos de una premisa clave: cada pantalla tiene un “lenguaje” particular, por lo que diseñamos la versión web para ordenadores, por un lado, y la versión web para dispositivos móviles, por el otro, de forma independiente.

 

En este proceso de diseño web responsive, tenemos en cuenta factores visuales, para que las páginas web y tiendas online sean atractivas para sus visitantes. También prestamos atención a criterios de usabilidad web, para determinar de qué manera los visitantes de la web o de la webshop pueden satisfacer de un modo fácil, rápido y muy intuitivo su objetivo en el site (buscar información, comprar, registrarse, descargarse un archivo, etc.).

 

¿Cómo sabemos si una web es responsive? Muy sencillo. Sólo debemos aumentar o reducir el tamaño de la ventana desde el navegador del ordenador y observar si el contenido de la página web o de la tienda online se adapta o se reubica.

 

Para entender mejor nuestro trabajo de diseño web independiente para la versión de sobremesa y para la de los dispositivo móviles, nada mejor que un ejemplo visual.

 

Se trata de la página web corporativa de Brillantbarcelona.com, una tienda multimarca de alta bisutería y líneas prêt-à-porter.

 

En primer lugar vemos la versión para dispositivo móvil de la página principal de la web; debajo vemos el diseño de la versión para ordenador. A continuación explicamos las principales características de los dos diseños:

 

Diseño web para Brillant Barcelona

 

1- Menú:

En la versión móvil, el diseño del menú web se simplifica a: logo, iconos de las redes sociales y selección del idioma. Las tres barras de la izquierda indican un menú desplegable desde el que se puede acceder a las distintas secciones de la página web.

En la versión de sobremesa el menú presenta el logo de la marca junto a las secciones visibles en una barra superior, con los iconos de las redes sociales, el teléfono de contacto y la selección del idioma de la página.

 

2- Banner web y accesos directos principales:

En ambas versiones se ha diseñado un banner web principal, con tres imágenes que van pasando y tres títulos superpuestos. Cada imagen enlaza con una sección de la web (opción auto administrable).

Los tres accesos directos principales “Localización y horario”, “Nuestra tienda” y “Brillant’s Collection” también son iguales en la versión móvil y en la de ordenador de sobremesa.

 

3- Accesos directos productos y secciones

En la versión móvil las imágenes de estos accesos directos se desplazan a la izquierda y los títulos de las secciones enlazadas quedan a la derecha. Los distintos accesos se presentan uno encima del otro.

En el diseño de sobremesa se presentan los tres accesos directos en una única fila.

 

4- Menú inferior (sólo versión móvil)

En la versión móvil de la home page se presenta el menú principal debajo de los accesos directos. Esta vez se presenta con sus cinco secciones visibles. Esta opción de diseño hace visible el menú, que quedaba más escondido en la barra superior.

 

5- Pie de página web

En la versión móvil las tres informaciones del pie de página web (la de contacto, el acceso a las redes sociales y el campo para subscribirse a la newsletter de la empresa) se presentan una encima de la otra.

En la versión de sobremesa estas informaciones se presentan una al lado de la otra en la misma línea visual.

 

Una de las particularidades del sistema de programación propio que llevamos a cabo en Montaweb, y que casi nadie ofrece, es la posibilidad de poner distintas imágenes para un mismo espacio en la web para la versión de sobremesa y para la versión móvil.

 

Un ejemplo muy práctico sería la adaptación de una infografía web con mucho contenido para la versión web móvil, que cuenta con un espacio mucho más limitado. Esto nos permite crear una infografía más simplificada, que explique los aspectos más importantes, para la versión móvil.

Este sistema permite adaptar, aún más, el contenido web a cada dispositivo para asegurar la mejor navegación web para los visitantes.

 

Teniendo en cuenta que más del 60% de las visitas a páginas web y tiendas online se realiza desde dispositivos móviles, debemos trabajar para mostrar la versión más adaptada posible a cada dispositivo, tanto para favorecer la usabilidad como para mejorar el posicionamiento web SEO de nuestro site.  

 

Categorías: Diseño web

Déjenos su comentario

Nos encantaría conocer su opinión. Por favor, procure que sus comentarios estén relacionados con esta entrada. Intente también respetar a los demás lectores de este blog. Los comentarios off-topic, promocionales, ofensivos o ilegales serán editados y borrados.

 

Enviar comentario
*Campo obligatorio
Información legal
x

Empresa: MONTAWEB SL

NIF: B-64982762

Dirección: Pl. de l'Àngel 15, 2n 2a 08202 - Sabadell - Barcelona

Teléfono: 93 727 50 56

e-mail: info@montaweb.com

 

[...]
Cargando...
[...]
Cargando...

Acceso Área de Clientes

  • Contraseña*
  • ¿Ha olvidado la contraseña?
  • >Entrar Área de Clientes