• Share on Google+

screens

El diseño y programación de sitios web adaptable o responsive web design permite crear sitios w<eb que se adaptan a cualquier dispositivo en que se esté navegando, lo que al usuario acceder a un sitio web desde diferentes medios: smartphones, tablets, netbook, notebook, desktop ,monitores y lo que venga.

El diseñador y autor norteamericano Ethan Marcotte creó y difundió esta técnica a partir de una serie de artículos en A List Apart, una publicación en línea especializada en diseño y desarrollo web.

Importancias de las webs responsivas

Según las ultimas estadísticas realizadas por StatCounter desde Agosto de 2011 hasta Agosto de 2012 en estados unidos deja claro el incremento de dispositivos de los que se accede a internet y la web excluidas las apps.

DE-Traffic-Share-Data_September-2012-615x396

Beneficios del diseño y programación de sitios web

1 ) Cómo beneficia al cliente

No será necesario contratar dos o tres proyectos en paralelo para abarcar los diferentes soportes. Pasamos de crear una plataforma específica para móviles y otra para portátiles o sobremesas, a simplificar y obtener un todo en uno que se adapte a cualquier tipo de resolución.

Reducción de costos: Se reducen los costos ya que hasta hoy se debe hacer un sitio para la web y otro para dispositivos móviles. Esto origina mayores costos de creación y mantenimiento de la información.

Eficiencia en la actualización: El sitio solo se debe actualizar una vez y se ve reflejada en todas las plataformas. Cuando tenemos los portales independientes para web y móvil se debe realizar la actualización dos veces lo que crea la necesidad de mayor cantidad de recursos y posibilidad de error.

Beneficios Posicionamiento web (SEO)

Google recomienda uso responsive para ahorrar trabajo a su Googlebot-Mobile,
Responsive Design parte de la premisa “one page”, y por lo tanto, resultará más fácil posicionar un solo sitio que uno por cada dispositivo.
Imaginemos que finalmente nos decantamos por crear 3 sitios diferentes para abarcar los dispositivos existentes (www.misite.com + m.misite.com + ipad.misite.com). De este modo entramos en la problemática de que cada enlace entrante o mención en las redes sociales se repartirían entre las 3 URL’s, en función del dispositivo desde el que esté conectado el usuario. Mientras que utilizando un diseño de respuesta, toda la influencia linkbuilding favorecerá a esa única página ante los motores de búsqueda.

2 ) Cómo beneficia al usuario

La presencia móvil ha facilitado el acceso a la Red, y ahora es el turno para que los usuarios sean capaces de navegar de manera satisfactoria gracias al Responsive Design, independientemente del dispositivo en el que se encuentren. Solución para reducir la tasa de rebote, haciendo que el usuario pase más tiempo en la página por su facilidad de lectura y óptima visualización de los contenidos.
Además, el uso de esta tecnología favorece la accesibilidad para usuarios con dificultades visuales, aprovechando los márgenes de la página para mostrar los contenidos con la máxima calidad posible.

Impacto en el visitante: Esta tecnología por ser nueva genera impacto en las personas que la vean en acción, lo que permitirá asociar a la marca con creatividad e innovación.

Mejora la usabilidad y conversión: Esta tecnología aporta a la usabilidad y la conversión. Se han hecho estudios que demuestran que cuando se aprovecha toda la pantalla del visitante aumenta la conversión.

La web se adapta al medio en el que se muestra por lo que para el usuario es mucho más fácil navegar. Para entender bien esto, podemos utilizar un ejemplo sencillo: en una web vista desde un ordenador, pueden aparecer links de texto, sin embargo, si esta misma web se viera desde un dispositivo móvil, los links de texto suelen ser demasiado pequeños para acertar con los dedos. De ahí que se creen botones, para mejorar la usabilidad.

¿Cuándo utilizar responsive web design en un sitio web?

Sitios orientados a marca con estructuras simples: Los sitios web sin mucha complejidad son adecuados para ser realizados con esta tecnología.

¿Cuándo no utilizar responsive web design en un sitio web?

El responsive web design no funciona de manera adecuada en sitios complejos o con bastante contenido: Los sitios complejos también se vuelven muy complejos para navegar con tecnología responsive web design, en estos casos es mejor tener un portal móvil y otro para computadores de escritorio.

Problema: Diferentes dispositivos y resoluciones

La web se desarrollaba para un par de resoluciones de pantalla y con la entrada de los smartphones y las tablets las resoluciones se multiplicaron.

resolution_chart_in-line

Resoluciones:

Resolución por defecto: 980px en adelante
Nuevas resoluciones: 1200px en adelante
Tabletas en posición vertical (portrait): 768px en adelante
Teléfonos y tabletas gama baja: 767px e inferiores
Teléfonos gama media y baja: 480px e inferiores

¿El responsive web design vale la pena?

En un estudio realizado por el Pew Research Center , el 60% de los usuarios de dispositivos móviles prefieren leer noticias desde un navegador en vez de leerlo en una aplicación. Cuando se trata de contenido de texto, la mayoría de los usuarios favorecen siempre el navegador a través de una aplicación, por lo que ser capaz de mostrar este contenido a través de diferentes pantallas es una necesidad.

Frameworks y Grids de CSS para responsive web design

Foundation 3

Bootstrap

Gumby Framework

Responsive Aeon Framework

Ingrid CSS Fluid Framework

Titan Framework

Less+ Framework

Columnal

Gridiculo.us

Responsive Grid System

Susy: Responsive Grid for Compass

Colección de resposive web design

Media Queries