Responsive Web Design

el

En estos tiempos donde existen casi infinitos dispositivos escritorios, notebooks, netbooks, smartphones, tablets , notephones (tabphones),etc. se produce la necesidad cada vez más imperiosa de generar una solución en particular pero que sirva para la mayoría de los dispositivos.

Básicamente la idea es que si tenemos un sitio hecho en alguna tecnología, se pueda “adaptar” en tiempo de ejecución a la vista de estos distintos dispositivos.

¿Cómo se logra ello?

Bien para ello existe un concepto que es llamado en inglés Responsive Web Design y en castellano es llamado Diseño Web Adaptativo. Según Wikipedia en el siguiente link su definición es:

es una técnica de diseño y desarrollo web que mediante el uso de estructuras e imágenes fluidas, así como de media-queries en la hoja de estilo CSS, consigue adaptar el sitio web al entorno del usuario.

Básicamente la idea como se ha intentado explicar anteriormente, es que a través del diseño adaptativo o Responsive Design, realizar el diseño en un único sitio pero que se “adapte” a los distintos dispositivos anteriormente mencionados sin tener que generar nuevamente plantillas, otros sitios, etc.

Responsive – Free SharePoint 2010 Theme

¿Y técnicamente?

Hay varios factores pero los principales son:

  1. Estar codo a codo con nuestro usuario o cliente final para captar la idea que se necesita cuando se despliegue en cada dispositivo.
  2. Trabajar con estándares de la industria (W3C) que están adoptados por cada uno de los “jugadores del mercado”, léase Microsoft, Google, Samsung, Apple, Blackberry y sus correspondientes navegadores IE, Safari, Opera, Chrome, Mozilla Firefox,etc.
  3. Revisar las posibilidades tecnológicas que ofrece cada herramienta de Desarrollo en general y SharePoint en particular.
  4. Es importante saber a que mercado apuntamos y que dispositivos tienen nuestros principales clientes. Ejemplo, si nuestro mercado es EEUU probablemente debamos hacer hincapié en Apple como nuestra plataforma de despliegue porque es quien tiene la mayor cuota en dicho país.

Yendo a SharePoint y a 2010 en particular

SharePoint por defecto no posee Diseño adaptativo en su versión 2010 por defecto (out of the box). Habrá que revisar qué sucede en SP 2013.

Entonces ¿Qué hacemos?

Afortunadamente existen una cantidad importante a nivel mundial de personas que se abocan a trabajar y ayudar a la comunidad SharePointiana entregando sus experiencias, códigos, implementaciones, tips, etc.

Como ejemplo, coloco el sitio http://www.tramway.org/ el cual fue probado en escritorio, smartphones (windows Phone 7.5 y Samsung S3) y tablet Samsung Galaxy 10 y en los 4 dispositivos funciona correctamente espectacular siendo de variados tamaños, marca y navegadores.

Este sitio está construido en SharePoint 2010 y pueden ver tips y trucos explicados por los autores del mismo en el siguiente enlace.

Otros enlaces o recursos interesantes son los siguientes:

  1. Página maestra (master page) en HTML 5 para SharePoint 2010 link.
  2. Tema gratis en SharePoint 2010 con Diseño Web Adaptativo acá su link.
  3. Distintos sitios en SharePoint que son “adaptables” a los distintos dispositivos, link.

Pros y Contras

Además podemos mencionar como ventajas las siguientes:

  • Menor costo de Mantención ya que tenemos un solo sitio.
  • Es un acelerador del time to market ya que, con un solo sitio puede ser visto en distintos dispositivos y un cambio se verá reflejado en todos los otros.

Ahora bien como Contras o Precauciones debemos tener las siguientes:

  • Debemos tener cuidado ya que, tendremos ” los huevos en un solo canasto”, es decir si tenemos un problema con el sitio lo tendremos para todos los dispositivos.
  • Cuando hagamos una modificación el test también debe incluir como caso de prueba los distintos dispositivos y navegadores, lo que nos obliga aparte de tener distintos dispositivos, tener mayor tiempo de prueba.

Conclusión

Más allá de la tecnología que utilicemos y de SharePoint en particular, hoy tenemos un gran desafío como Arquitectos, Desarrolladores, Diseñadores Web, Usuarios finales de realizar lo mejor para la empresa en la cual trabajemos o para nuestro cliente. El Diseño Adaptativo o Adaptable es una forma de acercarnos técnicamente a nuestro cliente final tratando de reducir costos y aumentando el time to market.

Anuncios

Un comentario Agrega el tuyo

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s