Responsive Web Design en ClinicSEO

Os dejo la ponencia que hemos dado en ClinicSEO sobre Responsive Web Design. Más una explicación de cada uno de los puntos con sus respectivos enlaces.

Ver más presentaciones de moon_es

 

Responsive Web Design: Revolución

Los que llevamos mucho tiempo en la red hemos vivido varias revoluciones web, cambios que han evolucionado las webs en un espacio corto de tiempo. El cambio de la maquetación de tablas a capas, el cambio de la definición de los monitores que pasaron de 14 pulgadas a 15 y 17, la muerte del flash con la aparición del Iphone que lo remató y por último el que estamos viviendo hoy en dia el Responsive Web Design.

Actualmente el mercado esta muy fragmentado y más lo va ha estar en los próximos años. Esto es bueno para el usuario pero nefasto para la web. ¿Como nos enfrentamos a estos cambios?. Con el RWD. Es la respuesta lógica.

Que ventajas tiene el RWD

  • Una única URL. Mayor fuerza SEO.
  • Un único contenido. Presuponer que el usuario al navegar con un dispositivo móvil requiere otro contenido diferente es un error.
  • Un solo código. Mantener un único código es más económico. Uno para gobernarlos a todos.

Welcome back to the web

Que piensa Google del Responsive Web Design

Un poco de historia:

  • Diciembre 2011: Google publica el lanzamiento de sus bots mobile. Ahora sus bots se hacen pasar por un Iphone y un Samsumg con Android y comprueban como se comporta tu web. Si se redirige, a donde, si se adapta … en resumen la usabilidad y contenido de tu web mobile.
  • Mayo 2012: Google recomiendo el Responsive Web Design como mejor solución para que las webs se adapten a los dispositivos móviles.
  • Antes de Diciembre 2012:
    ¿Cual creeis que va ha ser el siguiente paso de Google?.
    Lógicamente incluir la adaptación movil al algoritmo de posicionamiento de las búsquedas mobile. Primero saca los bots a pasear y lo anuncia, luego lo recomienda y por último lo exige. Sigue la misma evolución que WPO.

Facturación de PayPal Movil

Esta es la única gráfica que pretendo poner. Dinero.
¿Cuanto ha facturado PayPal con su versión movil?.

  • 2009: $141 millones
  • 2010: $750 millones
  • 2011: $4.000 millones

RWD en España

Starbucks: Es el típico ejemplo de Web adaptable que ponen en toda presentación de Responsive que se precie. Incluso tienen una guia de estilo RWD de como maquetar correctamente. Pero si entrais en la versión española (www.starbucks.es) vereis lo que pasa. Que no se adapta, que la experiencia de usuario es frustante y la navegación penosa.

Periódicos Online: ElPais y Elmundo no disponen de versiones adaptadas al usuario. Y además tienen publicidades en flash que no son visibles en Iphone. Un buen ejemplo de como hacer un diario online respetuoso con el usuario es The Boston Globe, donde se demuestra que el Responsive Web Design es una muy buena solución para portales con mucha cantidad de información.

El Responsive Web Design no es mobile friendly

Hay que dejar de pensar que el RWD es la adaptación móvil de la web. Es mucho más que eso, es la versión por defecto. La ausencia de Media Queries es el primer Media Querie.

El RWD tiene que dar respuesta a cualquier dispositivo que pueda visualizar webs. No a la versión Móvil.

Mobile first

La teoria del Mobile First fue acuñada en Luke Wroblewski en el 2009 y toma un nuevo sentido con la aparición en 2010 del Responsive Web Design. La teoría Mobile First se basa en un concepto muy simple y muy complejo a la vez. ENFOCATE PRIMERO EN EL MOVIL.

Content first + Design Mobile first + CSS Mobile first

  • Content First: El Contenido es lo primero. En el móvil no hay espacio para los excesos. El contenido ha pasado de ser el “copy” que sustituye al Lorem Ipsum a ser el primer punto de la Arquitectura Web. Foco, foco …
  • Design Mobile First: El diseño web para móvil es la mínima expresión de un site. Muy enfocado en el usuario y sin florituras. Eso tendría que ser el diseño de una web para escritorio, pero el espacio y la idea de “llenar” ese espacio con información inútil, inunda internet.
  • CSS Mobile First: La primera maquetación tiene que ser la del móvil, no la de escritorio. Si mantienes una piramide invertida en el escalado de la maquetación esta está más estructurada, por lo tanto pesa menos y es más fácil de mantener.

Cuales son las nuevas leyes del Responsive Web Design

El pixel ya no es la media

El pixel es una medida que se adoptó en los años en que solo existían monitores de 14 o de 15 pulgadas y desde que existen los dispositivos móviles y las pantallas retina display u otras resoluciones menores o mayores ya no tiene sentido.

Ahora todo es proporcional.
Las capas, los tamaños de las tipografías, las imágenes y videos y los Media queries.

El problema de las imágenes en Responsive Web Design podeis verlo aquí.

Media queries y sus BreakPoints

El orden de los Media Queries han de seguir la idea de menor a mayor. Es la estructura más pequeña del código. Siempre utilizando el min-width y no el max-width

Los BreakPoints o puntos de rotura o interrupción como he leido en algún post han de cumplir 2 reglas para ser correctos.

  • 1.- El contenido es el que marca el breakpoint y no el dispositivo.
  • 2.- Seamos coherentes. El breakpoint no debe ser en pixeles, ha de ser en “em”, para darle el control al dispositivo.

Frameworks RWD

Los 4 Frameworks que recomendamos son los mejores. Es conveniente utilizar uno si es posible pues el ahorro en horas de desarrollo es importante.

WPO para móviles

Aplica las mismas normas que la web y algunas nuevas como:

  • Tamaño imágenes según dispositivo. Optimiza el tamaño y peso de tus imágenes no vale con cambiarles el tamaño via html, hay que servir una imagen al tamaño de la pantalla del dispositivo.
  • Reduce el número de elementos DOM. Cuanto más complicada es la maquetación más le cuenta renderizarlo.
  • Dividir css mobile/desktop no ayuda en nada mejorar la descarga. Los navegadores lo descargan todo.

Herramientas WPO Móvil

Actualmente hay 2 grandes herramientas para medir el performance de tu web.

 

7 pensamientos en “Responsive Web Design en ClinicSEO

  1. Pingback: #ClinicSEO Responsive Web Design de Arturo Marimon - blog Relevant Traffic

  2. Pingback: RWD « Clinks

  3. Este pasado jueves, asistí a una charla en la google house de madrid donde la finalidad era fomentar la creación de versiones móviles…………
    Esto es un follón de la leche, hagamos lo que hagamos al final la cagamos.
    Yo apuesto por una buena implementación de Responsive Web Desing y en algunos casos además crear una versión móvil.

    • Hola Jose David,
      Gracias por comentar. Es muy lógico que Google fomente la usabilidad movil, pues el mercado esta muy verde. Cuando lo incluya en el algoritmo aumentaran el número de páginas optimizadas :)

      Ya sabes que mi apuesta es por el RWD, sin lugar a dudas. Solo en casos muy especiales de ofertas exclusivas movil o de uso completamente diferente, pero esto se da muy poco.

      Arturo

  4. Hace unos meses visualice la ponencia y la verdad es que me gustó mucho, ya tenía el libro de Ethan Marcotte y me resultó curioso que en el propio libro se determinaran los breakpoints en px mientras tu proponías el uso de em no sin falta de razón. He estado visualizando algunas de las herramientas que aconsejas y también utilizan los px como breakpoint, ¿tienes algún otro enlace donde se profundice más sobre esa problemática? Por otra parte, tengo conocimientos básicos de Responsive que he ido adquiriendo siguiendo el libro y aplicándolos en alguna que otra web pero ahora quiero hacerme fuerte en esto, ¿No crees que sería más útil hacer primero responsive a mano para afianzar conocimientos y luego utilizar frameworks para agilizar el rendimiento? Enhorabuena nuevamente por la ponencia ;)

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>