El diseño web adaptable o adaptativo, conocido por las siglas RWD del inglés Responsive Web Design, es una filosofía de diseño y desarrollo cuyo objetivo es adaptar la apariencia de las páginas web y aplicaciones al dispositivo que se esté utilizando para visualizarla. Hoy día las páginas web se visualizan en multitud de tipos de dispositivos como tabletas, móviles, ebooks, portátiles, pc  etcétera. Además, aún dentro de cada tipo, cada dispositivo tiene sus características concretas: tamaño de pantalla, resolución , potencia de CPU, capacidad de memoria, entre otras. Esta tecnología pretende que con un solo diseño web, se tenga una visualización adecuada en cualquier dispositivo.

Entonces, qué herramientas nos proporciona ASP.NET para poder afrontar éstas nuevas exigencias . Qué mecanismos tenemos a nuestra disposición para ayudarnos en nuestra creación de páginas web.

En éste blog nos introducimos con un video tutorial a los Templates Mobiles, Una nueva y reseñable característica en ASP.NET MVC4, que es un simple mecanismo que nos permite sobre escribir cualquier vista (incluyendo layouts o partial views) para navegadores móviles en general, para navegadores móviles individuales o para cualquier navegador específico.

Lo más interesante de todo este tema es que cualquier vista lo podemos adaptar al móvil utilizando el sufijo mobile. De éste modo, de una manera así de sencilla cuando estemos cargando la aplicación en el escritorio utilizara el index.cshtml, y cuando estemos utilizando el móvil utilizara la vista index.mobile.cshtml . Lo que hace es que cambia, entre una vista y otra en función del tipo de dispositivo que estés utilizando. Pudiendo definir nuestros propios tipos de dispositivo. Se podrían crear diferentes vistas para cada tipo de dispositivo, haciéndolo aún más especifica la navegación.

El  método Ismobiledevice define el tipo de dispositivo con el que estamos tratando, para muchos navegadores en tablets, se puede elegir para tener un tipo de navegación u otro al gusto del usuario.

Por lo tanto lo más aprovechable de ésta característica es poder darle funcionalidades específicas para cada dispositivo, como por ejemplo cuando estamos trabajando en un escritorio con un ratón o en una tablet o un móvil con el dedo. En este caso el drag and drop es el ejemplo más claro ya que podría restar funcionalidad al usuario e incluso en algunos casos convertir nuestra aplicación en inservible en según que dispositivo.

Pero hasta qué punto para un desarrollador es cómodo crear una vista, o un layout específico para cada tipo de dispositivo, pudiendo llegar a tener miles de vistas una aplicación. ¿Deberías crear todas y cada una de las vistas en cada dispositivo, y en caso de tener que realizar una actualización, ir retocando cada una de las miles de vistas que previamente habíamos creado?

Por suerte para nosotros, tenemos otros tipos de herramientas con las que trabajar en ASP.NET MVC.

La etiqueta meta viewport:

Se utiliza para adaptar las vistas a dispositivos móviles, determina como se va a comportar el navegador de nuestro dispositivo móvil para representar esa página. El viewport le dice cual es el ancho de la página, donde podemos poner el ancho del dispositivo (device-width) cual es la escala inicial ( initial –scale ) donde podemos decir como quiero redimensionar, y cual es la escala máxima ( maximun –scale ) que le digo cuanto permito que se redimensione.

Luego tenemos las Media Queries.

Permite definir cuáles son los estilos que se van a utilizar para otras resoluciones. La media querie se utiliza para definir cómo quieres representar la información, Se utiliza mucho para crear puntos de ruptura del contenido en dispositivos en los que distorsionaría la presentación de elementos, recolocándolos como deseemos que queden para una mejor experiencia de navegación. Estos estilos solamente se van a aplicar cuando tengamos pantallas de menos de lo que les indiquemos.

Así utilizando las características que mejor nos convengan en cada momento, podremos crear aplicaciones y páginas web responsive con el mejor resultado y realizando un trabajo lo más eficiente posible.

 

Adrián Arranz Cuervo (LinkedIn)

Alumno del curso Microsoft MCSD 2015-2016

Centro de formación Tajamar.