Diseño responsivo y el 21 de abril

El diseño web adaptable, responsivo, o adaptativo, también conocido por las siglas RWD (Responsive Web Design) es una corriente de diseño y desarrollo cuyo principal objetivo es modificar la adaptación y el aspecto visual de las páginas web para los dispositivos que se utilicen al visualizarla.

En la actualidad las páginas web se visualizan en diversos tipos de dispositivos como tablets, smartphones, e-books, portátiles y PC. Por lo que cada tipo de dispositivo tiene sus características concretas: resolución, potencia, capacidad de memoria, tamaño de pantalla… Esta tecnología permite que con un sólo diseño, tengamos una visualización adecuada en cualquier dispositivo.

Dato: el autor y diseñador estadounidense Ethan Marcotte produjo y difundió esta técnica a partir de una serie de artículos.

El diseño responsivo o “Responsive Web Design” (RWD) es una aproximación al diseño de páginas web destinadas a la elaboración de sitios para proporcionar una experiencia de visualización óptima, de fácil lectura y navegación con un mínimo de cambios de tamaño, panorama y desplazamiento – todo esto a través de una amplia gama de dispositivos (desde los monitores de ordenadores de escritorio hasta teléfonos móviles).

Un sitio diseñado con RWD puede adaptar el diseño para el entorno de visualización mediante el uso de fluidas redes basadas en proporción, imágenes flexibles y entradas de medios de CSS3, una extensión de las reglas de multimedia, de las siguientes maneras:

El concepto “red fluida” exige que el elemento de tamaño de página esté en unidades relativas, como porcentajes, en lugar de unidades absolutas como píxeles o puntos.

Las imágenes flexibles también deben estar dimensionadas en unidades relativas para evitar que se presenten fuera del elemento que las contiene.

Las entradas de multimedia permiten que la página utilice diferentes reglas de estilo CSS en base a las características del dispositivo donde el sitio se muestre, por lo general el ancho del navegador.

 Retos y otros enfoques.

Lucas Wroblewski ha resumido algunos de los retos de diseño responsivo y diseño móvil, y ha creado un catálogo de patrones de diseño en múltiples dispositivos. Él sugiere que, en comparación con un enfoque de “RWD” simple, la experiencia del dispositivo o RESS (diseño web sensible, con componentes de servidor) puede proporcionar una mejor experiencia al usuario debido a que está más optimizado para los dispositivos móviles.

Aunque muchos editores empiezan a implementar diseños responsivos, hay un desafío permanente para su “RWD”: algunos anuncios publicitarios y videos no son fluidos.

Sin embargo, la búsqueda de publicidad (banners) y la publicidad que se muestra gráficamente en su plataforma apoya al dispositivo específicamente con su focalización en diferentes formatos de anuncio de tamaño de escritorio, teléfonos inteligentes y dispositivos móviles básicos.

Diferentes URL de las páginas de aterrizaje pueden ser utilizadas para diferentes plataformas o Ajax, enfocadas a mostrar diversas variantes de anuncio en una página.

En la actualidad hay muchas maneras de validar y probar diseños responsivos, los cuales van desde los validadores de sitio móvil y emuladores móviles hasta herramientas de pruebas simultáneas como “Adobe Edge Inspect”. El navegador Firefox y Chrome ofrecen ventanas de visualización de diseño responsivo, así como herramientas de cambio de tamaño, al igual que los terceros.

 Ventajas

El uso de los dispositivos móviles está aumentando a un ritmo sumamente acelerado, dispositivos como las tabletas y teléfonos inteligentes han elevado sus números a lo largo de estos últimos años, por lo que “surfear” en Internet mediante estos aparatos es cada vez más normal. Esa es la razón por el que el “RWD” se ha vuelto tan conocido pues es una técnica que brinda una solución web al uso de ellos todos los días y que puede manipular cómo se ve la página, tanto de escritorio como de dispositivos.

Únicamente con alguna versión en CSS y HTML se cubren todas las resoluciones de monitor, es decir, la página en línea estará optimizada para todo tipo de dispositivos que puedan conectarse a internet: PC, tabletas, teléfonos móviles, etc. Esto ayuda a tener una mejor experiencia como usuario a diferencia de lo que sucede, por ejemplo, con sitios web de ancho fijo cuando se ingresa desde móviles. De este modo se minimizan los costos de elaboración y manutención cuando el diseño de las pantallas cuenta con un parecido entre dispositivos de diferentes tamaños.

Desde la perspectiva de la optimización de motores de búsqueda (SEO), sólo se mostraría una URL en los resultados de búsqueda, con lo cual se ahorra el proceso de redireccionamiento y los fallos que surgen de éstas (ejemplo: el error 404). También se evitan errores al ingresar al sitio web desde los “links sociales”, es decir, desde aquellos enlaces que los cibernautas comparten en redes sociales tales como Facebook, Twitter, etc y que pueden terminar en “error”.

Como funciona el del Diseño Web Adaptable

El Responsive Web Design (RWD) se hace posible debido a la introducción de las consultas multimedia en las propiedades de los temas CSS en su vr #3. Las consultas multimedia son una serie de procedimientos que se incluyen en la hoja de estilos que indica al documento o sitio HTML cómo se debe comportar y mostrar en diferentes resoluciones de monitores o pantalla.

En junio de 2009, Google lanzó públicamente su herramienta “PageSpeed”, una plataforma que fue desarrollada originalmente para el uso interno de Google, y cuyo fin es ayudar a los propietarios de sitios web con la usabilidad y las pruebas de velocidad. En enero de este año, Google lanzó la v2 de la herramienta “PageSpeed ​​Insights”. La actualización viene con un mayor enfoque en el rendimiento móvil y usabilidad y desarrollo en estos. “Google PageSpeed ​​Results”.

Por supuesto, no pasó mucho tiempo y los vendedores digitales, desarrolladores y expertos en SEO se abalanzaron sobre el nuevo lanzamiento para seguir las mejores prácticas y optimizar los sitios web en la vista de usuario móvil. WooRank también comenzó a utilizar recientemente la herramienta PageSpeed ​​para desarrollar una nueva sección móvil en los exámenes.

Entonces, ¿cuál es el inconveniente? Resulta que incluso si su sitio es completamente móvil y “amable”, Google todavía no podría detectarlo. ¿Por qué eso debería importarle a usted? La respuesta es sencilla: el “Mobilegeddon” se viene, y Google ya ha dado un nombre y una fecha.

 El problema

Lo llaman “#MobileMadness” y va a empezar a rodar el 21 de abril. Este nuevo algoritmo afectará Mobile Search Rankings y probablemente hará que todas las páginas “no amigables” con los móviles caigan del ranking, mientras que da un impulso a los que están bien optimizados para móviles. Esto significa que las páginas que no se ven como “mobile friendly” por Google es probable que veamos una enorme caída en el tráfico que obtengan de la parte orgánica.

Aunque Google PageSpeed ​​Insights está supuestamente allí para ayudar a comprobar el rendimiento móvil u otros problemas de usabilidad, se descubrió que ni la extensión de PageSpeed, ni su ​​API emulan el GoogleBot o usan el archivo robots.txt.

Es posible que usted pueda adivinar lo que viene después. GoogleBot (y solo GoogleBot) será el que tome la decisión final sobre si su sitio web es amigable con los móviles. Esto provocaría que su relación con #MobileMadness sea un poco complicada. Por ejemplo, si hay demasiadas restricciones en su archivo robots.txt, GoogleBot podría no ver que de hecho usted cuenta con un sitio amigable para los dispositivos móviles.

Cuando se trata de la configuración móvil y especialmente para las redirecciones móviles, todavía hay un montón de sitios web que no logran mostrar la relación entre dos direcciones URL mediante los rel = y rel = “canonical” elementos “alternativos”. Hasta ahora, la importancia de la detección de agente de usuario y redirección a sitios web para móviles ha sido mínima. Sin embargo, a partir del 21 de abril el impacto quedará claro, porque va a ser imposible para GoogleBot detectar que su sitio web “ejemplo.com” ha reorientado a mobile.ejemplo.com o ejemplo.mobi.

Todas estas excepciones se suman a una sola cosa: el potencial de una enorme caída en el tráfico móvil a su sitio.

Nuestra recomendación

Le recomendamos que utilice otra herramienta de Google para evaluar si su sitio es “mobile-friendly”. Esta herramienta realiza esencialmente la misma comprobación de usabilidad como la herramienta PageSpeed, pero emula GoogleBot. En última instancia, puede ayudarle a comprobar si hay archivos importantes bloqueados en tu robots.txt que impidan la validación de la compatibilidad con móviles. También le dirá si usted ha hecho un buen trabajo, señalándole la configuración de su móvil a los motores de búsqueda.

Google recomienda el diseño responsivo, en especial para los sitios web con visualización en teléfonos inteligentes.