A principios del mes de marzo se realizó una actualización importante en el sitio de Garza Blanca y fue nada más y nada menos que para implementar la estrategia de optimización para dispositivos móviles. Una vez más, se optó por la técnica que está de moda y que además, es la primera recomendación de Google para mejorar la indexación de sitios web móviles: Responsive Web Design.

La verdad es que esta actualización fue muy rápida. En tan sólo una semana se completó el proceso. Esto fue gracias, en parte, por la forma en que se han venido desarrollando los sitios y por otro lado, también cuenta el hecho de que este es el tercer proyecto donde se implementó esta técnica, anteriormente también en Sierra Lago y Villa del Palmar Cancún.

Diseño Desarrollo

Antes de esta etapa debería estar la de planeación, pero dado a que mucho de lo que se implementó en Villa del Palmar Cancún se reutilizó para este proyecto, podemos saltarnos este paso. Bueno, en realidad podemos saltarnos el de diseño también, pero antes quería mencionar la forma en que se ha realizado esta fase.

Desde hace ya varios proyectos, me he visto en la necesidad de fusionar la etapa de Diseño y la de Desarrollo en una misma, principalmente para cumplir con los tiempos de entrega. Pero al parecer no soy el único, puesto que esto es algo que he venido leyendo cada vez más en revistas especializadas y en conversaciones en Twitter: Diseñar en el navegador es lo de hoy. Y si hablamos de implementar el diseño responsive  con mayor razón. Si bien ya existen algunas herramientas que ofrecen la posibilidad de visualizar un diseño en diferentes layouts, creo que ninguna podrá igualar al mismo navegador. Tan solo en la Creative Suite de Adobe hay tres opciones: Dreamweaver, InDesign y recientemente Adobe Edge Reflow.

Diseñando en el navegador

Diseñar en el navegador me ahorra tiempo y me permite presentar un prototipo totalmente funcional e interactivo que no deja lugar a las ambigüedades y mal entendidos con los clientes. Otra ventaja de diseñar en el navegador es que puedes darte una idea muy cercana de cómo se verá el sitio en layouts más pequeños o en diferentes orientaciones. En mi caso, hago todo el testing en Google Chrome y las utilidades que más uso son: CSS/HTML Inspector y PageSpeed. Sumado a ello y para sacar el máximo provecho de diseñar en el navegador, también les recomiendo instalar algunas extensiones que me han facilitado el trabajo:

• Web Developer
• ColorZilla
• Resize Window
• Edge Inspect
• SpeedTracer

Hablando de facilitar el trabajo, nada me ha ahorrado tanta chamba como SASS. Ya lo compartía en la publicación anterior y lo reitero aquí, además, si agregamos compass a la ecuación, mucho mejor. Compass es un recurso indispensable si quieren explotar CSS3 pues al igual que SASS, nos ahorra tiempo y trabajo. Por ejemplo, olvídense de volver a escribir o que digo escribir, olvídense de intentar recordar la sintaxis correcta para crear un degradado, además de agregar los prefijos correspondientes para cada navegador:

CSS

background: #49c0f0; /* Old browsers */

background: -moz-linear-gradient(top, #49c0f0 0%, #2cafe3 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#49c0f0), color-stop(100%,#2cafe3)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top, #49c0f0 0%,#2cafe3 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, #49c0f0 0%,#2cafe3 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top, #49c0f0 0%,#2cafe3 100%); /* IE10+ */

background: linear-gradient(to bottom, #49c0f0 0%,#2cafe3 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#49c0f0', endColorstr='#2cafe3',GradientType=0 ); /* IE6-9 */

SASS/compass

@include image-background(linear-gradient(top, $blue, darken(blue, 20%)));

Así de simple. @include es una función muy útil que ofrece SASS, en este caso, se incluye un @mixin que no es otra cosas más que una variable que contiene todas las reglas necesarias para crear, en este caso, un degradado. Visto de otra forma, el código CSS de arriba es nuestro @mixin y con la función de @include lo copiamos a nuestro documento. Este @mixin podemos crearlo nosotros con SASS, pero he aquí la ventaja de integra compass a nuestro proyecto: todo ya está hecho, validado y compatible con todos los navegadores. Simplemente agregamos el nombre del @mixin que queremos copiar, en este caso se llama: image-background, y listo, SASS se encarga del resto por nosotros. ¿Ahora entienden cuando les digo que me he venido ahorrando mucho pero mucho tiempo con este lenguaje?

Media Queries

El tercer ingrediente del Responsive Web Design. Los otros: layout e imágenes flexibles. Quienes ya se han aventurado en esta técnica saben a lo que me refiero. Este funcionalidad que se incorporó en la versión 3 del lenguaje CSS es lo que nos permite darle las instrucciones al navegador para que nuestro diseño se muestre de una u otra manera.

Si bien Internet Explorer en sus versiones anteriores a la 9, no soporta esta funcionalidad, el panorama en el resto de los navegadores modernos, incluyendo navegadores móviles, es muy prometedor. No obstante, existen herramientas tales como respond.js, que pueden incorporar esta característica en navegadores obsoletos ó Internet Explorer para ser más precisos. ¿Pero a quién le importa que funcione en IE si el objetivo es que sea efectivo en navegadores móviles?