01/10/2014

¿Cuando elegir un diseño responsive?

Con casi un 50% de accesos a la web mediante dispositivos móviles, es ya algo obligado a la hora de hacer un desarrollo de un nuevo sitio web pensar en como lo veremos desde un smartphone.




Y aqui, en este punto, tenemos dos opciones:

  • Hacer una web con un diseño responsive (responsive design)
  • Hacer una web para desktop, y otra para dispositivos móviles

Opcion 1. Hacer un diseño responsive

Esta es la opción más económica en tiempo y código (por lo tanto, también más mantenible). 
Consiste en que sea la propia web la que se adapte "automaticamente" al tamaño y resolución del dispositivo donde se visualiza. Es decir, que la MISMA web se vea de forma diferente si la vemos en un navegador de escritorio a si la vemos en un smartphone.

Esto se realiza mediante las media querys de CSS3 y las nuevas etiquetas de HTML5 para ello. Cabe decir que si lo hacemos directamente a mano no es algo que se haga en "2 tardes", hacer una página responsiva bien hecha lleva bastante trabajo, sobre todo elementos que no son facilmente "estirables", como puedan ser menus con subelementos.

No obstante, hay herramientas que nos facilitan la tarea, como son los frameworks que han emergido últimamente para el diseño de este tipo de webs, a saber:

Personalmente interesantes en nuestra opinión son Bootstrap y Foundation, por lo completos que son, y lo fácil que es encontrar temas para ellos en la red. 
Hay muchos más, pero entre esos tendrás ya bastante para elegir. Si alguno esta familiarizado con frameworks CSS del estilo del 960.gs, encontrará fácil de usar la mayoría de estos frameworks, puesto que la mayoria de ellos se basan en sistemas de columnas, habitualmente 12 o 16.

Opcion 2. Hacer un diseño específico para móviles y otro para desktop

La segunda opción es hacer un diseño específico para cada tamaño de pantalla, basicamente uno para tamaños desktop (habitualmente superior a 8"), y otro para smartphones.
Esto no solo tiene la ventaja de tener una correcta visualización en ambos tamaños de pantalla, sino también poder aprovechar mejor los elementos de los dispositivos donde se visualiza.

Esto quiere decir que por ejemplo cuando visualicemos la web en un dispositivo móvil de tamaña pequeña (smartphone), limitemos la información mostrada, utilicemos botones más similares a los nativos de la plataforma o empleemos "widgets" típicos de estos dispositivos como los menus laterales, los slideshows "touch", etc...

Igual que en la opción 1, existen frameworks que nos facilitan esta tarea, voy a destacar tres, aunque hay batante más:

JQuery Mobile, un framework para desarrollo de aplicaciones móviles muy extendido (no es para menos, con el padrino que tiene).
Destaca su sencillez de uso, basado en etiquetas HTML5, con un gran soporte de la comunidad, y que permite prototipar aplicaciones de forma muy rápida.

Sencha Touch, este framework es muy potente, pero su uso es bastante más complicado que el de Jquery Mobile, puesto que se necesitan conocimientos fuertes en Javascript, dado que todo se hace en este lenguaje. Aquí nos olvidamos un poco de HTML5, y nos centramos totalmente en Javascript, puesto que todo se hace en este lenguaje. Dispone de un patrón MVC muy trabajado, pero como ya hemos dicho, hay que dedicarle horas para sacarle todo su potencial, pero bien usado es bastante potente, permite hacer aplicaciones muy completas. Destaca también su velocidad.

Lungo JS, este framework firmado por españoles promete muchísimo, se parece en cierto modo a JQuery Mobile, puesto que se maneja en gran parte con etiquetas HTML5, y permite también prototipar aplicaciones de forma rápida.

Conclusiones

Como todo, la decisión de optar por una opción u otra depende de nosotros mismos. Si el contenido de la web es puramente informativo nosotros optamos por un diseño responsive. 
Si la web funciona más como una aplicación (una tienda online, un sistema de reserva de viajes, etc...) yo optaría por un diseño adaptado a cada tamaño de pantalla, sobre todo para poder personalizar correctamente la información y los controles usados en los diferentes dispositivos, no es lo mismo por ejemplo un DatePicker en una web, que un smartphone, asi que en este caso ya digo que optaría por un diseño diferente. 
Como siempre, hay que sopesar bien los pros y los contras de cada elección y seleccionar la que mejor nos pueda convenir en cada caso.

Comentarios

Otras noticias

Caso típico, viene un cliente a la oficina, quiere una web BBB (Buena, Bonita, Barata), y la duda es la de siempre: ¿Le hacemos algo a medida o tiramos de Joomla/Wordpress, similares? Y la respuesta más sencilla siempre suele ser la más acertada: Utiliza aquella tecnología que te permita cubrir los requerimientos del cliente y que nos permita hacer el desarrollo en menor tiempo y con la mayor calidad posible.

Tan importante para nosotros y para nuestros clientes el correcto desarrollo de un proyecto web, como luego donde va a ser instalado dicho proyecto. Para ello es importante tener un despliegue correcto de los servidores donde se alojan los distintos proyectos.