èmfasi

Marketing online y nuevos medios

Telefon d'Èmfasi 937278606

Estoy interesado

El envío del presente formulario implica la aceptación de nuestra política de protección de datos.

Diseño web Responsive

¿Está tu web adaptada a los actuales dispositivos móviles? ¿Ofrece tu sitio web, una buena experiencia a tus clientes desde un Smartphone o una tableta?

diseño web responsive

¿Está tu web adaptada a los actuales dispositivos móviles? ¿Ofrece tu sitio web, una buena experiencia a tus clientes desde un Smartphone o una tableta?

¿Qué es el diseño web responsive?

El diseño web adaptable o responsive design es la aplicación de distintas técnicas avanzadas de diseño que nos permite estructurar los contenidos de formada adaptada a multitud de dispositivos: smartphones, tablets, netbooks, portátiles, pantallas panorámicas con distintas resoluciones, pc de sobremesa, tv, etc... Sin necesidad de crear sitios web específicos para cada dispositivo.
De esta manera es posible maximizar la experiencia del usuario, y garantizar un uso satisfactorio de nuestro sitio web en distintas situaciones y contextos de uso.

El concepto responsive design ha crecido en popularidad de forma exponencial durante los últimos 2 años un reflejo de la necesidad de adaptar nuestros sitios web a un acceso más global.

Ventajas del diseño web responsive

El desarrollo de un sitio web responsive incluye unas importantes ventajas a considerar:

Desde el punto de vista del posicionamiento en buscadores

  • o Disponen de una única URL de acceso a los contenidos en los resultados de búsqueda, independientemente del dispositivo, con lo cual la estrategia de posicionamiento es la mismo y se ahorran redirecciones y los errores que se derivan de éstas.
  • o También eliminan las dificultades al acceder al sitio web desde enlaces que los usuarios comparten en redes sociales ( Facebook, Twitter, etc ) y que pueden acabar en error dependiendo de qué enlace se copió (desde qué dispositivo se copió) y desde qué dispositivo se accede.
  • o Web semántica. Diseño Responsive es HTML5. Esto nos  permite mejorar la estructura y definición  de los datos (antes, solamente teníamos listas, párrafos, capas, tablas… ahora sin embargo, gracias a HTML5 tenemos productos, noticias, eventos, etc) Esto facilita la interpretación de los buscadores del contenido de nuestro sitio web.

Desde el punto de vista de los costes

  • Plantear el diseño responsive desde el inicio del proyecto, permite un ahorro muy importante respecto del coste de adaptación posterior. En algunos casos, dependiendo de la complejidad del sitio web, podría llegar a ser casi imposible una posterior adaptación a este tipo de diseño en el futuro.
  • Con una única versión en HTML y CSS se cubren todas las resoluciones de pantalla (PCs, tabletas, teléfonos móviles, etc). De esta forma se reducen los costes de creación y mantenimiento cuando el diseño de las pantallas es similar entre dispositivos de distintos tamaños.
  • También supone evitar el desarrollo de Apps, aplicaciones ad-hoc y nativas para móviles (iPhone, Android, etc). Muchísimo más costosas en su desarrollo y , especialmente, posterior mantenimiento.

 

Funcionamiento del Diseño Web Responsive

El principales conceptos en los que se basa el Diseño Web Responsive son:

  • el uso de proporciones en lugar de medidas fijas
  • y las “media querys” que permiten condicionar la presentación de los contenidos  de los documentos HTML para, por ejemplo, adaptarse a la resolución de pantalla.

Abandonar las medidas fijas en el diseño de un sitio web pasando estos a ser fluidos. En lugar de diseñar nuestra web basándonos en valores fijos (por ejemplo width: 960px), el diseño fluido está pensado en términos de proporciones,  todos los elementos de la web se harán más pequeños guardando la proporción entre ellos. Hasta llegar a un determinado punto…

Como ningún diseño escala de manera adecuada cuando cambia el contexto para el que fue pensado, las media queries son una serie de órdenes que se incluyen en la hoja de estilos que indica al documento HTML cómo debe comportarse ante diferentes resoluciones de pantalla.

Analizan las características físicas del dispositivo que va a mostrar nuestro diseño. Si estas están dentro de un condicional establecido con los Media Queries, se aplicarán una serie de instrucciones CSS contenidas dentro del mismo, de esta manera cuando nuestro diseño fluido cambia de tamaño podremos aplicar una serie de instrucciones CSS pensadas en exclusiva para ese nuevo tamaño (CSS es un lenguaje de estilo que define la presentación de los documentos HTML).

Para entenderlo mejor...

El diseño de una página web, al igual que los libros, periódicos y revistas, están basados en columnas, según el diseño responsive, una misma página web mostrada en un PC (a resolución panorámica de 1280x800 px) tendía 5 columnas, en una tableta, un iPad, por ejemplo, (1024 x 768 px) necesitaría sólo 4, y en el caso de un smartphone ( con resoluciones muy dispares pero con medidas de pantalla de entre 3 y 5 pulgadas ) las columnas usadas serían 2 o incluso tan sólo 1.

 

¿Por qué debes tener en cuenta el diseño responsive de tu sitio web o negocio online?

Hay una serie de factores de los que debemos ser conscientes

El uso de dispositivos móviles está creciendo a un ritmo increíble

Dispositivos como tablets y smartphones han incrementado sus ventas en los últimos años y la navegación en Internet mediante estos dispositivos es cada vez más común. Un ejemplo es la altísima penetración en España de los Smartphones.

Comportamiento de los usuarios 

Comportamiento de los usuarios con sus dispositivos móviles es determinante en los procesos de decisión de compra

  • Cinco conclusiones clave de la ruta de compra des de un Smartphone. (información obtenida de un estudio de investigación de Nielsen por encargo de Google Enero de 2014):
    • los consumidores dedican tiempo a investigar en sus smartphones: más de 15 horas por semana
    • la investigación comienza en un motor de búsqueda (a diferencia de sitios o aplicaciones para móviles),
    • la proximidad es importante (el 69% espera que las empresas se encuentren en un radio de relativamente cercano desde la ubicación del usuario),
    • la inmediatez es clave: más del 50% desea realizar una compra en el transcurso de una hora.
    • los móviles influyen en las decisiones de compra: el 93% continúa con la compra)
  • Algunos datos del comportamiento según un estudio de Google encargado a Ipsos OTX Medios CT, Mobile Marketing Association y The Interactive Advertising Bureau:
    •  Los teléfonos inteligentes son herramientas críticas en el proceso de investigación previo a la decisión de compra en un 82% de los casos
  • 24% de los usuarios de teléfonos inteligentes ha hecho una compra en su teléfono.
    • Los teléfonos inteligentes son también un componente crítico de la publicidad tradicional un 68% ha realizado una búsqueda en sus teléfonos inteligentes después de ver un anuncio en línea.
    • El 79% Usuarios de teléfonos hace otras cosas mientras consulta internet des de su smartphone como ver la televisión (37%).
    • 88% de los usuarios de smartphones buscan información local en su teléfono y un 86% toman decisiones en consecuencia.
    • Los pronósticos, ya en 2012, advertían que en 2013 habría más personas con acceso a la web a través de móvil que desde un ordenador.