{"id":63660,"date":"2019-03-01T08:00:27","date_gmt":"2019-03-01T11:00:27","guid":{"rendered":"https:\/\/www.tusclicks.cl\/blog\/?p=63660"},"modified":"2019-02-28T15:35:48","modified_gmt":"2019-02-28T18:35:48","slug":"si-tu-sitio-web-no-es-responsive-estas-perdiendo-clientes","status":"publish","type":"post","link":"https:\/\/tusclicks.com\/blog\/si-tu-sitio-web-no-es-responsive-estas-perdiendo-clientes\/","title":{"rendered":"Si tu sitio web no es responsive est\u00e1s perdiendo clientes"},"content":{"rendered":"

Gracias a la conectividad m\u00f3vil, hoy en d\u00eda se puede acceder a p\u00e1ginas web a trav\u00e9s de celulares o tablets. Diversos sitios son capaces de adaptarse y mostrarse en todo tipo de plataformas, lo que los convierte en sitios web responsive.<\/span><\/p>\n

M\u00e1s en detalle, un sitio web es responsive si es capaz de <\/span>adaptarse a cualquier dispositivo<\/span><\/a> desde el que se acceda, es decir, hay que tener en cuenta un dise\u00f1o web multidispositivo. Pero \u00bfc\u00f3mo podemos lograr que la web se adapte a cada dispositivo? Se necesita que la estructura de la p\u00e1gina sea flexible, en otras palabras, los anchos de la pantalla deben ser modificables. Si se cuenta con tablas o columnas, el sitio debe permitir que el n\u00famero de columnas puedan disminuirse seg\u00fan el tama\u00f1o de la pantalla del dispositivo.<\/span><\/p>\n

No pierdas de vista el contenido<\/b><\/h3>\n

No solo hay que mantener la estructura flexible, tambi\u00e9n es importante que el contenido, tales como im\u00e1genes, v\u00eddeos y tama\u00f1o de tipograf\u00eda, sean capaces de adaptarse de forma correcta para una mejor experiencia de usuario. <\/span><\/p>\n

Por otro lado, si existe un men\u00fa de navegaci\u00f3n, este no puede mostrarse de la misma forma en la versi\u00f3n m\u00f3vil que en la versi\u00f3n de escritorio. \u00bfPor qu\u00e9 es necesario? En primer lugar, por el tama\u00f1o de la pantalla (un dise\u00f1o de navegaci\u00f3n horizontal puede verse de forma vertical en un <\/span>smartphone<\/span><\/i>), y en segundo lugar, en el celular se utiliza la pantalla t\u00e1ctil (se necesitan botones adecuados para hacer click con facilidad), a diferencia de la versi\u00f3n de escritorio que utiliza un puntero.<\/span><\/p>\n

Otro punto muy importante a considerar es que mientras m\u00e1s peque\u00f1a es la pantalla, los contenidos adquieren m\u00e1s relevancia que los elementos de navegaci\u00f3n, por lo que estos \u00faltimos hay que cambiarlos de posici\u00f3n para que el usuario encuentre el contenido \u00fatil f\u00e1cilmente.<\/span><\/p>\n

Evita problemas de compatibilidad<\/b><\/h3>\n

\u00a1Ojo con los efectos! Algunos efectos de la versi\u00f3n de escritorio es probable que no funcionen en la m\u00f3vil. A la hora de crear un sitio responsive, es importante que compruebes que los elementos que agregas funcionen en todos los dispositivos. \u00bfAlg\u00fan consejo para evitar estos problemas? Te recomendamos <\/span>dise\u00f1ar con el patr\u00f3n <\/span>mobile-first<\/span><\/i><\/a>, de esta forma puedes olvidarte de problemas los posibles de adaptaci\u00f3n de las distintas pantallas y la carga de elementos poco \u00fatiles. Otra cosa que te puede ayudar es el uso de librer\u00edas que permiten realizar una carga de p\u00e1gina condicional, as\u00ed no est\u00e1s cargando piezas que entorpecer\u00edan la navegaci\u00f3n del usuario en el dispositivo.<\/span><\/p>\n

Resumiendo lo anterior, el dise\u00f1o responsive se caracteriza por:<\/span><\/p>\n