Responsive Web Design

 
¿A estas alturas y aún sin tener una versión móvil de tu web? ¡Bueno, bueno! No te desesperes. En este artículo te voy a explicar todo lo que necesitas para que tu web esté a la última.

 El Responsive Web Design o diseño web adaptable -o adaptativo- en español, fue creado por Ethan Marcotte y es la técnica que se usa en la actualidad para tener una misma web adaptada a diferentes plataformas que nos brinda la tecnología: laptop, tablet y smartphone. Consiste en una serie de hojas de estilo en CSS3 que, usando el atributo “mediaquery”, convierten una web ordinaria en una web multiplataforma, capaz de adaptarse a todos los tamaños que existen, ofreciendo una experiencia para el usuario mucho más amena y cubriendo las necesidades de nuestro público. 

Quedaron atrás las webs que en un móvil tenían que ampliar para poder leerse.

Pero, ¿cuál es el Responsive Web Design? Bueno, como te habrás dado cuenta, las computadoras no son la única pieza de hardware con un navegador web. Con esto quiero decir que las expectativas de los usuarios cambian debido al panorama cambiante de los navegadores web, ya que la gente espera que sean capaces de navegar por la web en sus teléfonos con la misma facilidad que navegan por la web en una computadora de escritorio.

Por lo anterior, el responsive web design hace posible que el contenido de la página se adapte en función de la resolución de la pantalla del visitante, permitiéndole navegar de una forma más cómoda por la web, independientemente de la fuente de acceso, sin tener que hacer zoom continuamente.

 

¿Por qué tu web debería ser Responsive?

Las ventajas del Responsive Design son muchas. Leyendo cuáles son, seguro que te convences para convertir tu web en una web multiplataforma:

• Mejor experiencia de usuario. Eso repercute en la opinión que los usuarios tienen de tu sitio web y el uso que le darán. Mejorará tanto tu imagen de marca, como el tiempo de permanencia en la web y aumentará la tasa de rebote entre páginas de tu web.

• Se acabaron los contenidos duplicados. Si usabas una versión móvil para que los usuarios que accedían a tu web vieran el contenido adaptado al dispositivo, era perjudicial para tu SEO, ya que eso creaba contenido duplicado y, por lo tanto, Google penalizaba a tu web. Un diseño Responsive evita este problema, ya que es el mismo contenido que se organiza de manera distinta, según el dispositivo en el que se vea.

• Se reducen los costes de desarrollo y mantenimiento de la web. Al usar la misma plantilla para todas las plataformas, se reduce la inversión en mantenimiento y desarrollo, ya que un sólo cambio repercute en todas las versiones.

• Aumenta la viralidad. Un reciente estudio certifica que el 70 por ciento del acceso a las redes sociales se hace a través de dispositivos móviles. Eso significa que, si un usuario accede a nuestra web a través de un Smartphone, seguramente tenga las aplicaciones sociales abiertas y si quiere compartir algo, es mucho más rápido y natural.

¿No crees que el Responsive Web Design sea necesario en tu web?

 
• El 31 por ciento de los usuarios que navegan por internet, a través de dispositivos móviles, lo hace en exclusiva por este medio y no utiliza otros tradicionales como las computadoras portátiles.
• Una de cada 8 páginas vistas en internet son visitadas a través de dispositivos móviles.
• El 75 por ciento de los clientes prefieren una web accesible mediante dispositivos móviles.
• El 79 por ciento de los usuarios que navegan con smartphones, usan sus teléfonos para ayudar en su compra y el 74 por ciento termina comprando como resultado.

Si todavía no crees que el Responsive Web Design sea necesario en tu web, aquí te dejo algunos datos que puede que te hagan cambiar de opinión. Estadísticas Generales de uso móvil:

• El 31 por ciento de los usuarios de Internet móvil “en su mayoría” va en línea utilizando sus teléfonos.

• El 75 por ciento de los correos electrónicos se abren, el 60 por ciento de los mensajes de Facebook y 90 por ciento los tuits se emiten desde un dispositivo móvil.

• Una de cada 8 páginas son vistas desde dispositivos móviles.

• El 75 por ciento de los clientes prefieren un sitio amigable móvil.

• Las suscripciones móviles pasarán a la población mundial para el año 2014.

• Android es la plataforma más popular para

teléfono inteligente, con una cuota del 50.9 por ciento.

• En 2011 había 835 millones de usuarios de teléfonos inteligentes.

• El 64 por ciento de tiempo de teléfono móvil se gasta en aplicaciones.

Las consultas de búsqueda móvil se duplican durante la temporada de vacaciones.

En el contexto actual de la atomización de los dispositivos móviles y el acceso a la información 24 horas x 7 días, los portales web no solo tienen la ardua labor de mantenerse actualizados, sino que también deben adaptarse a las nuevas tecnologías, a nuevos formatos y a usuarios con perfiles muy diferentes; desde los que se van integrando al mundo digital, hasta los que han nacido bajo la revolución de los dispositivos móviles.

Los entornos de navegación, cuyo potencial solo puede ser aprovechado desde el dispositivo de uso para el cual fueron pensados, imponen una restricción de manejo que deja de tener sentido en un momento dominado por la multiplicidad de canales. No adaptarse a esta realidad parece condenar a los sitios web a brindar una UX (satisfacción total del usuario) cada vez menos amigable.

Unificar los canales de información en una única web, una única URL, un solo espacio virtual que mantenga las mismas funcionalidades y características que definen cada sitio web, adaptándose progresivamente a los cientos de modelos de dispositivos móviles que actualmente están en el mercado, es una tendencia de consumo que llegó para quedarse y parece fortalecerse con el tiempo. Eso es el responsive web design.

Ya no es algo nuevo, desconocido o inalcanzable.

Está aquí, ahora y cada vez son más las páginas web que nacen, o renacen, bajo esta tendencia.

En definitiva, es cuestión de adaptarse a los nuevos patrones de consumo y responder a las necesidades de las personas, ofreciendo sitios web que hagan su experiencia como usuario igual de satisfactoria, indistintamente del dispositivo desde el cual naveguen.

Marco Antonio Molina Rosales

Diseñador Web ABC Digital

Licenciado en Animación y Arte Digital

  /Marco Antonio Molina Rosales

 @MarcoMolinaLAD

¿WEB 2.0?

Evolución de la web

Todos los que somos de la generación X y anteriores hablamos de la web como si fuese la "tendencia", cuando para los de la generación Y y los sucesivos ven a la internet como un medio nativo y por recientes cifras el preferido.

En este entorno global y dinámico, encontramos un término muy usado hace menos de unos años: la web 2.0 - casi usado como si fuese lo último o de vanguardia -

La verdad, y temo decirles para los que apenas se estaban "acostumbrando" a ciertos parámetros de la internet es que verdaderamente estamos en el desarrollo de la web 2.5 y que poco durará porque todo está apostado para llegar a la web 3.0

Tan sólo Google este año ha realizado más de 400 cambios en sus sistemas. El trabajo SEO (optimizar las páginas para encontrarse en los buscadores) ha tenido que adecuarse y mucho de lo que se recomendaba hasta no hace mucho, literalmente ya no es funcional.

Escuchaba a Jorge Molina en la Semana del Emprendedor vía twitter y comentaba sobre si recordábamos que antes el software se escalaba por año: windows 93, windows 2000, etc. y ahora son por números Android 4, IOS 7, windows 8 por mencionar. Porque los cambios se hacen cada día, cada semana...

¿Quién se acuerda de Hi5 o de MySpace? y parece que fué hace mucho tiempo, pero la verdad que no lo es... ha sido en casi 10 años. Cifra menor de los rangos históricos.

Ahora bien, ¡¿qué rayos es web 2.0, 2.5 y 3.0?!

La web que conocemos nació con los hipertextos (los links pues) y los salones de chat estaban en auge en aol, hotmail, starmedia, latinchat y miles más. Nos conectábamos con el teléfono y su escandoloso ruido nos abría las puertas al ciber espacio. Esto evolucionó rápidamente y el contendio multimedia se hacía presente cada vez más y así llegamos a la web 2.0 (hipermedia + interacción) con el surgimiento de las Redes Sociales.

Actualmente estamos viviendo una revolución polulosa no muy evidente porque estamos tan ocupados en "dominar" la vida efímera de la comunicación y la informática que lo pasamos por alto. Hoy por hoy estamos viendo el desarrolo de la web 2.5 ( la web simbiótica) que se caracteriza en que los proveedores de servicios no sólo brindan información sin no que ahora extraen de los usuarios para hacer negocio con ello. Es lo que está en el contrato que nunca leemos al darnos de alta en una página como la red social o las apps de los móviles que tan copiosamente descargamos. Todo la publicidad y el posicionamiento descarnado de las empresas por aparecer en la primera página de los resultados funciona en base a esta extracción de la información que nosotros tan complacientemente brindamos en aras de un lindo pasatiempo como lo es jugar candy crush o farm en facebook.

Pero lo más importante es saber que la web 2.5 pasará en la medida que los gobiernos y las empresas comiencen a imponer limitantes o condiciones para el uso de datos. La innercia es desarrollar la web 3.0 que es la que coloca a la "inteligencia" como agentes de "deducir" los gustos y preferencias de los consumidores.

¡Sépanlo bien! estamos en la era web 2.5 y eso implica más cosas que tener un sitio web y postear una linda frase con foto en facebook ;-)

Transformación de diseñador a programador

Los diseñadores enfocados al web estamos en el mejor momento, somos punta de lanza de una generación que será definida por la tecnología móvil.

Realmente no existe una transformación como tal, pero sí una implementación y adaptación de conocimientos. Personalmente, jamás dejaría mi puesto de diseñador por el de un programador, aunque contara con los conocimientos para ello. Me gusta compartir nuevas cosas con personal de otras profesiones y actualmente el diseño y la programación se están haciendo muy buenos amigos pero aun así, no pienso que pudiera apagar mi parte creativa visual y simplemente programar.

Por la demanda actual creo que es responsabilidad del diseñador web promedio conocer bases de php, javascript y mysql (lo cual no pienso que lo convierta en un programador) con estos cimientos se puede entrar al increíble mundo del desarrollo web, en el que dejamos de ser diseñadores solamente y pasamos a desarrollar código desde 0 para hacer funciones y páginas dinámicas. 

No sé si me encuentro predispuesto pero personalmente me cuesta trabajo el orden y como bien sabemos (o no), la programación es una disciplina recta y lógica. Tenemos entonces la parte lógica del cerebro intentando comprender la sintaxis de programación y sus usos, y por otro lado el creativo que ayuda a darle forma a aquello que se compone de 0 y 1; en sí, esa es la meta del desarrollador.

Los diseñadores enfocados al web estamos en el mejor momento, somos punta de lanza de una generación que será definida por la tecnología móvil, el  desarrollar apps y sitios responsivos se está tornando de lo más común en estos días. Para todo esto debemos estar dispuestos a recorrer ese camino que para algunos es tedioso y gris (código), yo creo que el futuro del diseñador web es favorable aunque será un puesto muy común en algunos años, por eso hay que darle importancia a actualizarse e integrar nuevas técnicas a nuestra área de trabajo, siempre es bueno conocer a nuestros primos lejanos, nunca sabes en qué te puedan ayudar, y con las necesidades tecnológicas actuales debemos tomar en cuenta a nuestro lejano primo programación.

Si quieres comenzar el viaje del desarrollo web y se te complica ser tan lineal, te recomiendo Code Cademy, que tiene muchas motivaciones y  flats  muy bonitos aparte de que es gratuita y está en español.