Haz tu site responsive facilmente

Publicado por Lino Uruñuela el 4 de julio del 2016

El uso del móvil como dispositivo para acceder a internet es cada vez mayor como todos sabemos, y la necesidad de adaptar los contenidos a estos "nuevos" dispositivos es algo vital para una buena experiencia de los usuarios.

Tenemos tres estrategias distintas para adaptar el site en distintos dispositivos
  • Responsive Design
    Donde el código html devuelto por el servidor es exactamente el mismo para cualquier dispositivo y la adaptación a la ventana gráfica se hace mediante estilos css y javascript.
    Los problemas de este método son
    • Mayor dificultad a la hora de maquetar todo, las hojas de estilos se complican para adaptarse a todos los tamaños
    • Mayor peso de la página, ya que aunque no se vean ciertos elementos en los dispositivos más pequeños, realmente se están cargando y se están haciendo las mismas peticiones que en desktop cuando luego no serán usadas.

  • Adaptative
    Con este método se devuelve un código HTML u otro dependiendo de las características del dispositivo, todo en la misma url, lo único que varia es el HTML devuelto según el dispositivo que sea.
    Esto nos da algunas ventajas y algunos problemas

    Ventajas
    • El HTML devuelto por el servidor será especídifico para cada tamaño evitando así cargar elementos que en ese dispositivo no se verán y por lo tanto recursos innecesarios.
    • Podemos adaptar el diseño a cada dispositivo, consiguiendo una mejor experiencia al no estar tan condicionados a pensar globalmente y podemos diseñar y crear la "verión perfecta" para cada dispositivo.

    Por contra
    • A la hora de mantener el site es más laborioso ya que las distintas versiones podríamos decir que son dos sites distintos y a la hora de desarrollar posiblemente el trabajo sea algo mayor que si usamos una única versión para todos los dispositivos.
  • Versión móvil
    Este era el método habitual hace unos años, y es separar las distintas versiones en distintas urls (subdominios, carpetas, etc). Normalemte se creaba una versión reducida del site  y se diseñaba para un único tamaño, es decir, que daba igual que lo cargaras con un móvil de 5,5 pulgadas o con uno de 360px de ancho.

    Este método ya está en desuso debido a que conlleva los mismos inconvenientes que la versión adaptada (difícil mantenimiento) y además que cada versión lleva urls distintas, lo que complica la cosa.

Importancia en SEO de hacer un site adaptable

En breve Google separará en sus índices y procesará de manera diferente los resultados según el dispositivo por el que navegues, es decir, los resultados al buscar algo en un ordenador de sobremesa serán cada vez más diferentes.

Google le da peso a la experiencia de usuario en su algoritmo y piensa que aunque el contenido sea el mismo no quedará igual de satisfecho si ese contenido no se adapta al dispositivo desde el que se consume.

Personalmente creo que la satisfacción del usuario ante un mismo contenido pero en distintos dispositivos depende mucho de qué información busques, y creo, que no depende tanto de si el contenido se adapta o no como de que el contenido le de la información que desea.

Google lleva mucho tiempo trabajando en saber qué es mejor para su usuario y siguen anunciando que para búsquedas desde dispositivos como móviles los resultados serán distintos ya que premieran a los que se adapten (como Darwin..), pero sigue sin llevarlo a cabo del todo, algo no les cuadrará.

Yo supongo que más que un factor de posicionamiento (otro más) será un filtro, es decir, si yo busco algo Google ya tiene los 10 resultados que me va a devolver. Esta ordenación la hace mediange su secreto algoritmo, y asi seguirá haciéndolo, pero posiblemente algunos resultados que no sean adaptables los sustituirá por otros que sí lo son.

Creo que es más filtro que factor, porque una vez ordenados los resultados como "siempre" ha hecho, simplemente discrimina aquellos que no se adapten. Poco a poco iremos viéndolo y comprobaremos cómo lo hace.

Si no tienes tiempo, o recursos sigue leyendo

Muchos sites pequeños, o empresas con pocos recursos sufren el dilema de si invertir o no en rediseñar su site, y muchas veces no llevan a cabo por falta de recursos, de dinero, o simplemente por falta de tiempo.

A mi me pasa algo parecido, no tengo tiempo para ponerme a cambiar este site por ejemplo, prefiero dedicarlo a otras cosas en este momento, pero como SEO he de hacer algo para aprender y ya de paso quizás mejore la experiencia de este selecto grupo de lectores ;)

El método que yo uso es fácil, sencillo, y de forma temporal puede solucionar la vida web a más de uno. Lo que hago es marcar en el HTML los elementos, ya sean divs, o tablas, que quiero ocultar o cambiar de sitio en mi web, para ello los marco poniéndoles un id="ocultarmovil".

Estos elementos serán eliminados o cambiados de lugar mediante javascript al cargar la página, dejando los elementos que creamos necesarios visibles y al tamaño adecudo. Vamos a ver el proceso para realizarlo.

  1. Marcar con id="ocultarmovil" en los elementos que queremos ocultar
    En este site por ejemplo lo hago en la cabecera, menú de la izquierda, comentarios, etc.
  2. Marcar con id="movercontenido" (en mecagoenlos.com si veis el código fuente es "menuIzquierdo") en los elmementos a mover de lugar
    Por ejemplo aquí el menú de la izquierda lo pinto debajo del artículo, es decir lo cambio de lugar
  3. Añadir un div donde quieras poner el contenido a mover.
    <div id="menualternativo"></div>
  4. Marcar las imágenes redimensionar con "id="#cambiaimage"
    No debemos cambiar todas las imágenes, solo las pertenecientes al contenido como fotos o imágenes usadas en nuestros conetnidos, pero no las imágenes de diseño, el código javascript comprobará si es más grande que el tamaño de la pantalla y si es así lo redimensiona guardando proporciones.
  5. Añadir código javascript después del </body>
			<script src="https://code.jquery.com/jquery.min.js" ></script>        
	<script>
	if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|
Opera Mini
/i.test(navigator.userAgent) ) { $(document).ready(function(){ $("div").remove("#ocultarmovil"); $("table").remove("#ocultarmovil"); var htmlcambiado = $("#movercontenido").html(); $("div").remove("#movercontenido"); $("#menualternativo").html(htmlcambiado); //descomenta esto y cambia el id por el que corresponda
//si tienes elementos con un ancho fijo width="yyy"
$("#cambiaimage").each(function() { if (this.width > ($(window).width()-40)) { this.style.width=$(window).width()-40; this.height =parseInt(this.height * $(window).width()-40 / this.width); } }); }); } </script>
De esta manera conseguimos que al navegar mediante un dispositivo móvil el contenido se "adapte" y que Google lo vea como un site adaptable, según sus propias herramientas. Esto es lo que buscábamos, pasar el "corte" con el mínimo esfuerzo posible

mobile friendly mobile friendly


Y vemos como Google renderiza la página y lo veo como nosotros cuanndo navegamos por el móvil

	
mobile friendly

 




Posts anteriores en Seo Movil


Space Needle
Publicado el 9 de julio del 2018 por Lino Uruñuela Hace 10 días comencé mis vacaciones, concretamente me fui a Islandia, un país asombroso, pero tranquilos que no os voy a aburrir / dar envidia / distraer con ello. El caso es que en un momento de aburrimiento en el

Seguir leyendo
Space Needle
Publicado el 5 de enero del 2018 por Lino Uruñuela  Experimento con canonical, en el próximo post mostraré resultados, mirar el final de este para intentar entender algo Como muchos habréis notado he rediseñado el blog, que ya era hora después de 11 años co

Seguir leyendo
Space Needle
Publicado el 11 de Octubre del 2017 por Lino Uruñuela Como muchos habréis notado he rediseñado el blog, que ya era hora después de 11 años con el mismo diseño. Los motivos han sido varios Mobile First El híper anunciado índice mó

Seguir leyendo
Space Needle
Publicado el martes 20 de septiembre del 2016 por Lino Uruñuela Como siempre, intentaré escribir este post así, de carrerilla, ni borradores, ni previsualizaciones, ni nada... Está claro que para escribir un buen artículo hace falta organizar la historia

Seguir leyendo
  • Miercoles 24 de Agosto del 2016
Space Needle
Publicado por Lino Uruñuela el 24 de agosto del 2016 Ayer Google anunció los dos siguientes cambios que aplicará en su algoritmo para ordenar los resultados cuando el usuario realice  búsquedas desde dispositivos móviles. Estos dos anuncios tienen una g

Seguir leyendo
  • Miercoles 10 de Junio del 2015
Space Needle
Publicado por Lino Uruñuela el 10 de junio del 2015 Desde hace unos días los usuarios de Android estamos viendo como cuando estamos en una página, al hacer una única pulsación en cualquier paralabra, ésta se selecciona y nos aparece un desplegable por

Seguir leyendo
Space Needle
Publicado por Lino Uruñuela el 26 de marzo del 2015 Desde hace un tiempo Google viene avisando de lo necesario que es adaptar el diseño del site a los distintos dispositivos, concretamente al tamaño de sus pantallas, y ha puesto a disposición de los webmasters varias h

Seguir leyendo
  • Martes 27 de Marzo del 2007
Space Needle
Según leo en el blog Oficial de google ha salido a la luz un nuevo interface para realizar las búsquedas en Google desde los sistemas móviles también disponible en español . Esta nueva interface como vemos en la imagen de arriba en iglés y aquí en español, puede ser personalizada

Seguir leyendo

Últimos posts

Últimos comentarios


juan

Hola Lino Uruñuela, una duda ¿aun funciona? porque no lo logro. Mira, en un index.php tengo este codigo: Camuflados
Post: Ofuscando enlaces para mejorar Link Juice

DUQUEredes

Google pasa del canonical bastante :-(
Post: Comprobando comportamiento de Google con meta canonical

Marinette

Gracias por la información!
Post: Nuevo Google Search Console ¿qué información nos ofrecerá?

Adolfo

Parece que a todo el mundo le ha gustado este artículo sexista y lleno de situaciones de agresión sexual y violencia de género, ya tendr
Post: Tipos de marketing

FDM

Hola, Lino: Genial el post, como siempre. Es genial contar con personas tan curiosas y que investigan al detalle el funcionamiento de Goo
Post: La segunda ola de indexación y cómo saber qué renderiza Google

Lino Uruñuela

@Cesar saltarse alguna orden del código es un falta de respeto!, que para algo lo hice :D No se les da muy bien esperar, su tiempo es or
Post: La segunda ola de indexación y cómo saber qué renderiza Google

César Aparicio

Hola Lino, Nos conocemos de películas como: Los de Google son muy frikis o Pasodobles y SEO. Mi cuestión es la siguiente: entiendo
Post: La segunda ola de indexación y cómo saber qué renderiza Google

Nostram

Porque será que no me extraña. No he visto un producto que funcione peor que "OK Google" lamentable.
Post: ¿Grave fallo de privacidad de Google Assistant?

Carlos

Parece mas un fallo de la aerolinea, que parece que en un mismo número de reserva (WXI99I) ha metido mas pasajeros, y google assistant ha d
Post: ¿Grave fallo de privacidad de Google Assistant?

Lino Uruñuela

@David Es capaz de renderizar e interpretar el JavaScript siempre que no haga falta la interacción del usuario. Me explico, si pones una fu
Post: Ofuscando enlaces para mejorar Link Juice

Contacta

Lánzate y pregunta!


He leído y acepto la política de privacidad

Mecagoenlos.com te informa que los datos de carácter personal que nos proporciones rellenando el presente formulario serán tratados por Lino Uruñuela. como responsable de esta web.

La finalidad de la recogida y tratamiento de los datos personales que te solicitamos es para enviar un correo con los datos que introduzcas, sin guardarse en ninguna base de datos.

Legitimación: Al marcar la casilla de aceptación, estás dando tu legítimo consentimiento para que tus datos sean tratados conforme a las finalidades de este formulario descritas en la política de privacidad.

Como usuario e interesado te informamos que los datos que nos facilitas estarán ubicados en los servidores de Linode.com (proveedor de hosting de Mecagoenlos.com) cumpliendo la ley de protección de datos. Ver política de privacidad de Linode.com.

Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en info@mecagoenlos.com, así como el derecho a presentar una reclamación ante una autoridad de control. Más información aquí.