Blog

Dise√Īo web responsivo

Primero definamos¬†¬ŅQu√© es una web responsiva?¬†Es una web cuyo dise√Īo se adapta a todos los tama√Īos de pantallas posibles de forma din√°mica (PC, TV, Smart Phone, iPad), ofreciendo una experiencia de visita √≥ptima para todos los posibles¬†dispositivos de acceso.

Web responsivo

¬ŅAlguna vez has intentado leer una p√°gina web que no est√° pensada para diversos dispositivos como Movil o Tablet?, Tienes que ampliar la imagen con tus dedos y adem√°s debes moverla de un lado a otro para poder leer los textos largos. No es intuitiva y es incomoda, se te hace muy dif√≠cil. Todo esto en va en detrimento los objetivos marcados, perdiendo clientes Leads y/o ventas.

Hoy en día se espera que toda web pueda verse correctamente desde cualquier dispositivo. Con solo citar algunas estadísticas podemos esntender la importancia de tener una web responsiva.

Estad√≠sticas b√ļsquedas m√≥vil 2018

  1. El 48% de los compradores utilizan dispositivos m√≥viles para comenzar a buscar en un motor de b√ļsqueda.
  2. El 69% de los consumidores en todo el mundo de entre 18 y 39 usan dispositivos móviles para investigar productos antes de comprar.
  3. Google supone el 96% de las b√ļsquedas desde el m√≥vil, seguido por Yahoo al 2% y Bing al 1%.
  4. El 78% de las b√ļsquedas de un negocio local desde un dispositivo m√≥vil dan como resultado una compra.

El¬†dise√Īo web adaptable, es una filosof√≠a de dise√Īo y desarrollo cuyo objetivo es adaptar la apariencia de las¬†p√°ginas web¬†al dispositivo que se est√© utilizando para visitarlas. Hoy d√≠a las p√°ginas web se ven en multitud de dispositivos¬†inteligentes,¬†libros electr√≥nicos,¬†port√°tiles,¬†PC, etc. Adem√°s, a√ļn dentro de cada tipo, cada dispositivo tiene sus caracter√≠sticas concretas: tama√Īo de pantalla,¬†resoluci√≥n, potencia de¬†CPU, sistema operativo o capacidad de¬†memoria entre otras. Esta tecnolog√≠a pretende que con un √ļnico dise√Īo web, todo se vea correctamente en cualquier dispositivo.

Por ejemplo, si ingresas a una p√°gina web desde tu computador y observas que esta tiene un dise√Īo con 4 columnas, cuando ingreses desde tu tablet ver√°s que estas columnas se transformar√°n en 2 y, si lo haces desde tu m√≥vil, se convertir√°n en una sola.

De hecho, ni siquiera tienes que entrar desde varios dispositivos para notar estas diferencias. Basta con visitar el sitio desde tu computador y reducir con el cursor el tama√Īo de la ventana del navegador para que veas c√≥mo autom√°ticamente se reorganizan los elementos. Tambi√©n puedes¬†verificarlo escribiendo tu URL aqu√≠.

Esta opci√≥n de dise√Īo tiene m√ļltiples ventajas y adem√°s reduce costos y tiempo de desarrollo, ya que se realiza un solo dise√Īo.

Origen del dise√Īo web adaptable

Tanto la idea como el prop√≥sito del dise√Īo web adaptable fueron previamente discutidos y descritos por el¬†World Wide Web Consortium¬†(W3C) en¬†julio de 2008¬†en su recomendaci√≥n¬†Mobile Web Best Practices¬†bajo el subt√≠tulo ¬ęOne Web¬Ľ.

Dicha recomendación, aunque específica para dispositivos móviles, puntualiza que está hecha en el contexto de One Web, y que por lo tanto engloba no solo la experiencia de navegación en dispositivos móviles sino también en dispositivos de mayor resolución de pantalla como dispositivos de sobremesa.

El concepto de¬†One Web¬†hace referencia a la idea de construir una ‚ÄėWeb para Todos‚Äô (Web for All) y accesible desde cualquier tipo de dispositivo (Web on Everything).

WEB responsivo

Ventajas del dise√Īo web responsivo

  • Mejora la experiencia de usuario,¬†ya que los visitantes pueden acceder a los mismos contenidos f√°cilmente desde cualquier dispositivo. Esto es importante si no queremos perder nuestros usuarios.
  • A Google le gusta el dise√Īo responsivo.¬†Tener una web responsive es importante para el SEO, ya que al favorecer la experiencia de usuario y con ello lograr aumentar el tr√°fico, de esta forma tendremos mayores ¬†probabilidades de √©xito en el posicionamiento en buscadores.
  • Aumenta la viralidad de los contenidos,¬†permitiendo que los usuarios compartan el contenido de manera natural y sin problemas como la duplicaci√≥n de informaci√≥n a travez de los diversos dispositivos.
  • Es m√°s pr√°ctico,¬†debido a que no hay necesidad de subir diferentes tipos de contenidos ni mantener diferentes webs.
  • Estar√°s preparado para el futuro.¬†Constantemente aparecen nuevos formatos de dispositivos de tama√Īos distintos. El dise√Īo responsivo se adelanta a esta necesidad, ya que no se limita por el tipo de dispositivo.

Conclusiones

El dise√Īo web responsivo es un enfoque econ√≥mico a largo plazo para construir y mantener un sitio web m√≥vil. Cuando se compara con el enfoque adaptativo, el dise√Īo web responsivo es menos costoso de mantener durante un largo per√≠odo de tiempo. Cuando se compara con aplicaciones nativas (iOS, Android, etc.), es una alternativa menos costosa de desarrollar y resulta en una presencia en la web que es m√°s f√°cil de descubrir por los motores de b√ļsqueda. Es por eso que el dise√Īo web responsivo es un enfoque que favorecemos en Dinamo Marketing.

Para que el dise√Īo web responsivo pueda cumplir realmente con la promesa de un mayor retorno de la inversi√≥n, debe hacerse correctamente. La finalizaci√≥n de las maquetas de dise√Īo de alta fidelidad antes del proceso de desarrollo corre el riesgo de agotar los recursos y puede resultar en decepciones. Por ese motivo, en en Dinamo Marketing preferimos comenzar el proceso de desarrollo mientras el dise√Īo se encuentra en su etapa inicial. Eso nos permite identificar los problemas desde el principio y girar para optimizar el dise√Īo seg√ļn sea necesario.

¬ŅYa has aplicado SEO¬†a tu plan de¬†marketing online? Y si no, ¬Ņqu√© esperas?.¬†Cont√°ctate¬†con nosotros para m√°s informaci√≥n.


2 comments

  1. dise√Īo web barcelona
    abril 17, 2019 at 12:16 pm

    me encanta esto un saludo

    https://pixelarttechnology.com/es/diseno-web/

    Responder
  2. marketing strategy for website
    agosto 7, 2019 at 8:34 pm

    It’s nearly impossible to find experienced people in this particular topic, but you sound like you know what you’re talking about! Thanks

    https://twitter.com/katekdesigns/status/977767580864827394

    Responder

Deja una respuesta