Nos encantan los datos y pasamos mucho tiempo analizando las estadísticas de nuestros sitios web. Cualquier desarrollador web que haga lo mismo se habrá dado cuenta del reciente aumento del tráfico de los dispositivos móviles. En el último año, hemos observado que muchos sitios importantes reciben un porcentaje considerable de visitas a sus páginas desde smartphones y tablets. Esto representa un gran número de visitantes que utilizan navegadores avanzados compatibles con las últimas características de los lenguajes HTML, CSS y JavaScript, pero que disponen de un espacio en pantalla limitado cuyo ancho, en ocasiones, no supera los 320 píxeles.

 Nuestro compromiso con la accesibilidad nos impulsa a esforzarnos por ofrecer una buena experiencia de navegación a todos los usuarios. Nos enfrentamos a una difícil decisión cuando tuvimos que elegir entre crear sitios web específicos para móviles y adaptar los sitios existentes y los nuevos lanzamientos para que los contenidos se viesen bien tanto en ordenadores como en dispositivos móviles. Crear dos sitios nos permitiría adaptar mejor el producto a cada tipo de hardware, pero el mantenimiento de un único sitio compartido conserva una URL canónica, lo cual evita complicadas redirecciones y hace que compartir direcciones web sea más fácil. Pensando en la facilidad de mantenimiento, nos decantamos por usar las mismas páginas para ambos medios, y ahora nos estamos planteando cómo satisfacer las siguientes condiciones:

Que las páginas se puedan leer con cualquier resolución de pantalla

Que los conjuntos de contenidos que marquemos se puedan ver en cualquier dispositivo

Que, sea cual sea el tamaño de la ventana, nunca aparezca una barra de desplazamiento horizontal

Contenido comprimido, retoque en la navegación e imágenes redimensionadas -  Chromebooks

Implementación

Para empezar, un marcado semántico simple crea páginas mucho más flexibles y fáciles de reorganizar si se necesita modificar el diseño. Al garantizar que la hoja de estilo permita adoptar un diseño líquido, ya estamos en camino de adaptarnos al mundo de los móviles. En lugar de especificar un valor  en el parámetro width, para los elementos contenedores, empezamos a usar un valor de max-width. En lugar de height indicamos la min-height, para que las fuentes más grandes y los textos de varias líneas no superen los límites del contenedor. Para evitar que las imágenes con ancho fijo se salgan de las columnas líquidas, aplicamos la regla CSS siguiente:

img {

  max-width: 100%;
}

El diseño líquido es un buen comienzo, pero es algo tosco. Afortunadamente, las consultas de medios ya son compatibles con los navegadores modernos, incluidos IE9+ y la mayoría de los dispositivos móviles. Esto es lo que marca la diferencia entre un sitio que se puede visualizar de forma aproximada en un navegador móvil y un sitio mejorado para aprovechar al máximo la interfaz de usuario optimizada. Pero primero debemos tomar en consideración cómo se representan los smartphones en los servidores web.

¿Cuándo deja un píxel de ser un píxel? Cuando se ve en un smartphone. De forma predeterminada, los navegadores de los smartphones intentan imitar a los navegadores de ordenador de alta resolución y muestran las páginas como si se estuviesen viendo en un monitor de ordenador. Este es el motivo por el que se ve el texto diminuto en el “modo de vista global”, un texto imposible de leer si no se aumenta. El ancho predeterminado de ventana gráfica en el navegador de Android predeterminado es de 800 px, y en el de iOS es de 980 px, independientemente del número de píxeles físicos reales que haya en la pantalla.

Para que el navegador muestre la página a una escala más fácil de leer, debes usar el metaelemento de ventana gráfica "viewport":

<meta name="viewport" content="width=device-width, initial-scale=1">

Las resoluciones de pantalla de móviles varían ampliamente, pero casi todos los navegadores de smartphones modernos tienen un device-width estándar de unos 320 px. Si, por ejemplo, tu dispositivo móvil tiene un ancho de 640 píxeles físicos, una imagen de 320 píxeles de ancho ocuparía todo el ancho de la pantalla usando, para ello, el doble de píxeles. Esto explica también por qué el texto aparece tan nítido en las pantallas pequeñas: la densidad de píxeles es el doble en comparación con un monitor de ordenador normal.

Lo más útil de establecer el width al device-width en la metaetiqueta de ventana gráfica es que se actualiza cuando el usuario cambia la orientación del smartphone o el tablet. Combinar esto con las consultas de medios te permite girar el diseño cuando el usuario gira el dispositivo:

@media screen and (min-width:480px) and (max-width:800px) {
  /* Target landscape smartphones, portrait tablets, narrow desktops

  */
}

@media screen and (max-width:479px) {
  /* Target portrait smartphones */
}

Contenido comprimido, imágenes más pequeñas - Cultural Institute

En realidad, puede que necesites usar varios puntos de ruptura según la forma en que se distribuya el contenido del sitio y según cómo se vea en diferentes dispositivos. También puedes usar la consulta de medio de orientation para adaptarte a orientaciones concretas sin especificar las dimensiones en píxeles cuando sea posible.

Ejemplo de media queries

Acabamos de actualizar la página Acerca de Google. Aparte de establecer un diseño líquido, hemos añadido algunas media queries para ofrecer una experiencia mejorada en pantallas pequeñas, como las de los tablets y los smartphones.

En lugar de adaptarnos a resoluciones de dispositivos concretas, definimos un conjunto relativamente amplio de puntos de ruptura. Para una resolución de pantalla de más de 1024 píxeles de ancho, la página se ve con su diseño original de acuerdo con nuestra cuadrícula de 12 columnas. Con resoluciones de entre 801 px y 1024 px, verás una versión ligeramente comprimida debido al diseño líquido.

Solo cuando la resolución de la pantalla sea de 800 píxeles, el contenido que no se considere esencial se enviará a la parte inferior de la página:

@media screen and (max-width: 800px) {
  /* specific CSS */
}

@media screen and (max-width: 479px) {

  /* specific CSS */
}

Llegados a este punto, la imagen grande deja de cargarse y apilamos los bloques de contenido. También hemos añadido espacio en blanco extra entre los elementos de contenido para que las distintas secciones se diferencien mejor.

Con estas simples medidas, garantizamos que el sitio se pueda usar en muchos dispositivos diferentes.

Contenido comprimido y imagen grande eliminada – About Google

Conclusión

Recuerda que no existe ninguna solución sencilla cuando se quiere facilitar el acceso a los sitios web en dispositivos móviles y ventanas gráficas estrechas. Los diseños líquidos son un buen comienzo, pero a veces será necesario adaptar el diseño. Las consultas de medios son una forma útil de refinar la visualización en muchos dispositivos, pero no olvides que el 25% de las visitas se hacen desde navegadores de ordenador que, actualmente, no son compatibles con la técnica y que existen implicaciones de rendimiento. Si tienes un widget interesante en tu sitio, puede funcionar muy bien con el ratón, pero es difícil manejarlo en un dispositivo táctil, ya que este no permite un control tan preciso.

La clave está en hacer pruebas frecuentes desde el principio. Todo el tiempo que pases navegando en tus sitios con un smartphone o un tablet tendrá su recompensa. Si no puedes hacer pruebas en dispositivos reales, usa el SDK de Android o iOS Simulator. Pídeles a tus amigos y compañeros de trabajo que vean tus sitios en sus dispositivos y fíjate en cómo navegan por ellos.

Los navegadores móviles representan una gran fuente de tráfico nuevo y aprender a adaptarse a ellos de la mejor forma constituye una nueva área pujante de desarrollo profesional.

Otros ejemplos de diseños adaptables de Google:

Escrito por Rupert Breheny, Edward Jung, Matt Zürrer, equipo de webmasters de Google, Publicado por Javier Pérez, equipo de Calidad de búsqueda.

El código óptimo tiene muchas cualidades. Es efectivo, eficaz, sostenible y elegante. Cuando se trabaja con código con distintos desarrolladores, distintos equipos e incluso distintas empresas, el código óptimo debe ser fácil de comprender y el formato debe ser coherente. Por ese motivo existen las guías de estilo. Usamos guías de estilo para muchos idiomas, y nuestra guía de estilo pública más reciente es la Guía de estilo de Google para HTML y CSS.

En nuestra guía de estilo para HTML y CSS, como en otras guías de estilo de Google, se cubren muchos aspectos relacionados con el formato. También se indican prácticas recomendadas para animar a los desarrolladores a ir más allá de las sangrías. Muchos autores de guías de estilo conocen el trasfondo de la pregunta sobre si se debe describir el código que escriben (o prescribir qué código quieren escribir). Por ello, no es extraño que en nuestra guía de estilo para HTML y CSS encuentres ambas opciones (así como también muchos estilos de desarrollo distintos en nuestra base de código, que no es precisamente pequeña).

Llegados a este punto, queremos presentarte esta nueva guía de estilo. Esperamos poder compartir contigo más información acerca de decisiones relativas al diseño, así como futuras actualizaciones. Mientras, comparte tus ideas y experiencias y, como con el resto de guías de estilo, no dudes en usarla para tus proyectos, como creas conveniente.

Escrito por Jens O. Meiert, Senior Web Architect, Publicado por Javier Pérez, equipo de Calidad de búsqueda.

En primer lugar (y lo que es más importante), puedes ver hasta 90 días de datos históricos. Si haces clic en el selector de fechas que se encuentra en el extremo superior derecho de las consultas de búsqueda, puedes retroceder tres meses en lugar de limitarte a los 35 días anteriores.

Una vez hayas hecho clic:

Para ver 90 días, la opción para ver con cambios se desactivará. Si quieres ver los cambios con relación al periodo de tiempo anterior, el límite sigue siendo de 30 días. Los cambios están desactivados de forma predeterminada, pero puedes activarlos y desactivarlos con el botón que se encuentra entre el gráfico y la tabla. Los datos de las consultas de búsqueda más habituales normalmente están disponibles en un plazo de dos o tres días.

Otra gran mejora en las Herramientas para webmasters de Google es que ahora puedes ver datos básicos de las consultas de búsqueda desde el momento en que verificas la propiedad de un sitio. De esta forma, ya no tendrás que esperar para ver tu información.

Por último, ahora recopilamos datos de las 2.000 consultas más habituales por las que tu sitio recibe clics. Es posible que veas menos de 2.000 si no registramos ningún clic para una consulta concreta en un día determinado, o si los datos de tu consulta figuran en varios países o usan distintos idiomas. Por ejemplo, una consulta de búsqueda para el término “flores” en Google Canadá se cuenta de forma independiente a una consulta de “flores” realizada en Google EE. UU. Sin embargo, con este cambio el 98% de los sitios tendrá cobertura completa. Haznos llegar tu opinión. Esperamos que los nuevos datos te sean útiles.