Seleccionar página

Aviso para navegantes. Google ha puesto como fecha límite el . Si todavía no lo has hecho ya, adapta tu web para dispositivos móviles o Google te penalizará seriamente en cuanto al posicionamiento de tu página en el buscador. Hay que matizar un poco estas palabras, pues realmente esta penalización se producirá cuando la búsqueda se haga desde un dispositivo móvil. Cuando se realiza desde un PC de escritorio todo seguirá igual, en principio…

adapta tu web para dispositivos móviles

Foto de Daniel Fuentealba

¡Tranquilos! Hay que mantener la calma pues, afortunadamente, podemos evitar estos ataques de pánico e histeria con unos pequeños retoques y mejoras en nuestra página web. Podemos convertir nuestra rígida web en otra web más flexible y adaptable a todo tipo de dispositivos como móviles, tabletas, consolas…….

¿Por qué es importante adaptar tu web?

Hay muchas razones por las que dedicarle la importancia que se merece a este tema. Según el Instituto Nacional de Estadística en un informe de Octubre/2014, por primera vez en España el principal tipo de conexión a Internet por banda ancha es a través de un dispositivo de mano (ya sea smartphone, tablet…. y al menos 3G) con un 67,2% de los hogares que tienen acceso a Internet. A continuación tenemos la línea ADSL con un 66,2%, luego la línea de cable o fibra óptica con un 20,9% y luego vendrían otro tipos de conexiones con porcentajes más bajos.

La conclusión es que, hoy en día, el principal grupo de usuarios que consumen Internet lo hacen a través de dispositivos móviles, así que si no los tenemos en cuenta estamos perdiendo visitas a nuestro sitio. No queda otra, adaptarse o morir.

Hazlo ya, adapta tu web para dispositivos móviles

Para que tu sitio sea mobile-friendly hay que realizar una serie de cambios en tu web. Vamos a explicar alguno de ellos que considero básicos y esenciales para implementarlos antes del día R (día Responsive).

    • Metaetiqueta de ventana gráfica: esta metaetiqueta sirve para indicarle al navegador como ajustar el escalado y las dimensiones de la página. Incluye el atributo width=device-width para que el ancho de tu página coincida en píxeles con el ancho del dispositivo que se está usando. También debes usar el atributo initial-scale=1 para mantener proporciones reales entre los pixeles CSS de tu web y los pixeles del dispositivo. Por último no deshabilites el escalado de usuario para que tu página no sea inaccesible. Con todo esto tu metaetiqueta debería quedar de la siguiente forma:
      <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
    • Ajustar el tamaño del contenido: la experiencia de usuario es peor si le obligas a desplazarse horizontalmente por la página o si tiene que modificar el zoom para verla correctamente. Dado que el ancho en píxeles varía entre los distintos dispositivos, el contenido no debería depender de un ancho fijo. Recomiendo usar valores relativos como por ejemplo width: 100%. También es conveniente no usar elementos con valores absolutos, pues podrían salirse de la ventana en un dispositivo pequeño.
    • Uso de las media queries: las media queries pueden usarse para aplicar estilos según las características del dispositivo. Los elementos más usados para el diseño web adaptable son min-width, max-width, min-height y max-height.
      min-width: Estilos aplicados a cualquier ancho de ventana de navegador que supere el valor definido en la consulta.
      max-width: Estilos aplicados a cualquier ancho de ventana de navegador que sea inferior al valor definido en la consulta.
      min-height: Estilos aplicados a cualquier alto de ventana de navegador que supere el valor definido en la consulta.
      max-height: Estilos aplicados a cualquier alto de ventana de navegador que sea inferior al valor definido en la consulta.
      orientation=portrait: Estilos aplicados a cualquier navegador cuyo alto de ventana sea superior o igual al ancho.
      orientation=landscape: Estilos aplicados a cualquier navegador cuyo ancho sea superior al alto.
      Obviamente le tendremos que dedicar bastante tiempo a las media queries para optimizar la web al máximo. Una buena plantilla para trabajar con ellas sería la siguiente:

      ESTILOS NORMALES (para escritorios muy grandes) =========================================================================

      body { … }
      p { … }
      RESPONSIVE =========================================================================
      Tablets en horizonal y escritorios normales
      ————————————————————————- /
      @media (min-width: 768px) and (max-width: 1199px) { aquí va el código CSS… }Móviles en horizontal o tablets en vertical
      ————————————————————————- /
      @media (max-width: 767px) { aquí va el código CSS… }Móviles en vertical
      ————————————————————————- */
      @media (max-width: 480px) { aquí va el código CSS… }
    • Acomodar los elementos en la página: Podemos usar 3 técnicas para adaptar los elementos de la web a medida que vamos reduciendo el tamaño de la pantalla. Aquí te explico algunos puntos a favor y en contra de dichas técnicas CSS:
      float-inline block-table
      Sin duda es preferible usar como atributos display:table o display:inline block para usos responsive.
  • Mapas de Google responsive: Aunque Google siempre predica con el uso de los diseños responsive la verdad es que uno de sus productos no lo es para nada. Si tenemos un mapa de Google incrustado en nuestra web veremos que es totalmente estático. Si queremos hacerlo adaptable para todo los dispositivos podemos hacer uso de un pequeño truco. He aquí nuestro código normal de un mapa:
    <iframe style=”border: 0;” src=”https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d12792.937212973933!2d-4.41492765!3d36.7169337!3m2!1i1024!2i768!4f13.1!5e0!3m2!1ses!2ses!4v1428076041842″ width=”600″ height=”450″ frameborder=”0″></iframe>
    Debereís añadir un contenedor con una clase específica a la cual le sumaremos unas pocas reglas CSS para hacerlo responsive.
    <style> .google-maps { position: relative; padding-bottom: 75%; // This is the aspect ratio height: 0; overflow: hidden; } .google-maps iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; } </style> <div class=”google-maps”> <iframe style=”border: 0;” src=”https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d12792.937212973933!2d-4.41492765!3d36.7169337!3m2!1i1024!2i768!4f13.1!5e0!3m2!1ses!2ses!4v1428076041842″ width=”600″ height=”450″ frameborder=”0″> </iframe> </div>

Visitad esta url si quereis inspiración en cuanto a diseño responsive mediaqueri.es. Si necesitas saber si tu web es lo suficientemente adaptable, puedes consultarlo desde esta web Responsinator. Como habéis comprobado, existen muchas formas para lograr que tu página sea más flexible, así que manos a la obra y adapta tu web para dispositivos móviles. Y si aún tienes dudas, solo tienes que contactar conmigo ;).

 

Título
Adapta tu web para dispositivos móviles
Título
Adapta tu web para dispositivos móviles
Descripción
Google fija el 21 de abril como fecha límite. Adapta tu web para dispositivos móviles o serás seriamente penalizado. Aprende las técnicas necesarias aquí.
Autor

Pin It on Pinterest

Share This