no ☞ 📈 Haz tu site responsive facilmente _ â–‚ â–ƒ â–… â–† â–ˆ

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 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
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
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

Últimos posts

Últimos comentarios


Lino Urunuela

probando https
Post: Consultor SEO en Donosti

Lino Uruñuela

ll
Post: ¿Cómo ejecuta, interpreta e indexa Google el contenido cargado mediante javascript?

Javier

Bueenas Lino! Gracias por tu respuesta! Efectivamente, cogiendo texto de una página hecha con javascript y poniéndolo en Google entre comi
Post: Meta Robots Noindex

Lino Uruñuela

Hola @Javier repondiendo a tu pregunta "¿significa eso que google no está viendo el contenido en texto y no lo posicionará?" con el mismo
Post: Meta Robots Noindex

Lino Uruñuela

@Alex R , lo primero graciias por a ti por participar :) Sobre tu prebunta ¿Dentro de un mismo artículo o entrada podemos hacer que no s
Post: Meta Robots Noindex

Javier

Buenas Lino Mecagoenlos! (vaya apellido tienes...) Tu artículo me ha dado mucho que pensar... acaban de hacerme una web en una agencia y
Post: Meta Robots Noindex

Alex R

Hola Lino! Te leo desde hace algún tiempo (genial el cambio de look) y casualmente he venido aquí con una duda sobre indexación. Lo
Post: Meta Robots Noindex

Lino Uruñuela

@javier Lorente Aupa Javi, en algún proyecto en el que he aplicado el noindex y que podía analizar los accesos del bot (tenina cierto p
Post: Meta Robots Noindex

Javier Lorente

Kaixo Lino! Habría que ver si baja la frecuencia de rastreo en otras urls que no fuesen la home, muy difícil de medir por cierto. Po
Post: Meta Robots Noindex

pSeo

va como un tiro con el onready!!!
Post: Cómo cargar css y js y no bloquear la carga de contenido

Contacta

Lánzate y pregunta!

Nos gustan los robots, pero no tanto
7 + 3