Guía rápida responsive web design

Guía rápida par responder a la mayoría de las preguntas acerca de la técnica de responsive web design, una técnica para la creación de sitios web para móviles y tabletas que también es recomendado por Google.

Una única web para gobernarlas a todas (las pantallas)

¿Por qué cambiar mi sitio web a Diseño Sensible? ¿Cuáles serían las ventajas?

Tu sitio web se ve muy bien de la pantalla de ordenador, pero ese diseño no puede ser visto correctamente en un smatphone o tablet. Una vez realizado el diseño sensible, el sitio web se ve bien (y es legible) en todas las pantallas y no sólo la del ordenador.

Recordamos del artículo anterior que teníamos dos opciones:

1.    Habilitar una versión especial para dispositivo con redirecciones según el user agent.

2.    Versión única con diseño fluido y adaptable al tamaño de pantalla (responsive web design).

Con responsive web design, se adapta automáticamente en función del tamaño de la pantalla del dispositivo móvil. Esto ofrece muchas ventajas:

1.    Se ahorrará tiempo y dinero ya que no es necesario mantener sitios web diferentes.

2.    Es bueno para el SEO de la web, ya que cada página de su sitio tendrá una URL única entonces evitas la indexación de contenido duplicado y no caes en la oscura técnica del Cloaking (servir diferente contenido).

3.    Al tener una única URL no hay que preocuparse acerca de a donde apuntan los enlace a mi sitio web móvil, siempre apuntarían a las mismas URLs.

4.    Lo mismo para la difusión de contenido en redes social (Likes de Facebook, tweets, +1' s), ya que las versiones móviles y de ordenador de sus páginas web ya no tendrán diferentes URL.

5.    Diseños Responsive son más fáciles de mantener, ya que sólo tienes que modificar el CSS para cambiar su apariencia (o diseño) en un dispositivo en particular. Mientras que con diferentes versiones, hay que modificar varios archivos.

6.    Si tengo diferentes versiones y las sirvo basándome en el User-Agent  para determinar el nombre de dispositivo móvil y el navegador que está haciendo la solicitud. Es menos exacto y con el número de dispositivos móviles y navegadores en aumento, el sistema de redicción es muy difícil de mantener.Con Diseño Responsive no dependemos de los User-Agent. 

¿Qué hace falta saber para empezar con el diseño sensible?

El Diseño Responsive es puro HTML y CSS se crea a base de simples reglas CSS que cambiar el estilo basado en el tamaño de la pantalla del dispositivo del usuario.

Por ejemplo, puede escribir una regla que dice que si un usuario con un tamaño de pantalla inferior a 320 píxeles, no muestran la barra lateral o si el tamaño de la pantalla es superior a 1920 píxeles, aumentar el cuerpo de la fuente a 15px. Estas son las reglas en código:

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

  . Sidebar {display: none}

}

@media only screen and (min-width: 1920px) {

  body {font-size: 15px}

}

¿Cómo se puede comprobar si un sitio Web hace uso de diseño sensible?

Abriendo la web en cualquier navegador (menos en IE por supuesto) ycambiando el tamaño de la ventana, si la disposición de los elementos se adaptan a medida que cambia el tamaño, el diseño es sensible. También puede utilizar estas herramientas en línea para comparar los diferentes diseños de una página en la misma pestaña.

Las diferentes vistas que se obtienen escalando la ventana del navegador

Acerca de la compatibilidad con navegadores más antiguos

No son compatibles con las versiones anteriores de IE. Sin embargo, existen soluciones basadas JavaScript respond.js y Modernizr - por ejemplo - que llevar CSS3 y HTML5 a los navegadores antiguos como IE6.

Habiendo tantos dispositivos móviles. ¿A qué resoluciones de pantalla se debería ajustar?

Google Analytics es muy bueno para determinar con que resolución de pantalla nos visitan los usuarios, desde: Público -> Tecnología -> navegador y sistema operativo. Ahora cambie a la pestaña Resolución de pantalla y ver la resolución que la gente está utilizando para navegar en su sitio.

Yo utilizo, y recomendaría establecer estos puntos de break points para las siguientes resoluciones en Mediaqueries - 320px (paisaje iPhone),480px (vertical iPhone), 640px (Tablets Android), 768px (iPad +  Galaxy Tabs) y 1000px (paisaje y iPad).

¿ Desventajas de usar Diseño Sensible?

Afectando a WPO (Web Performance Optimization) la velocidad de carga de una web.  El diseño Sensible pueden añadir algunos kbytes a la web ya que se tiene que descargar los estilos CSS y los archivos JavaScript necesarios para hacer el diseño responsive, yo recomiendo unir los las hojas de estilo en una única al igual que los .js. El otro problema es acerca de las imágenes. No deberíamos servir una alta resolución de imágenes para un móvil, pero que es difícil de lograr en el diseño sensible (para esto existen soluciones como Sencha.io http://www.sencha.com/learn/how-to-use-src-sencha-io/).

Por último, requiere mucho esfuerzo agregar propiedades sensible a un sitio web existente. A veces, puede que sea más óptimo rediseñarla pensando desde cero en las diferentes resoluciones, que adaptar la web existente.

Posted in: Actualidad, DISEÑO WEB ADAPTATIVO, google, html 5, html 5 css diseño programacion, programacion, Redes sociales. Etiquetado como Actualidad, responsive web design