En la actualidad, resulta difícil separar los
términos responsive y diseño web. Hoy en
día, el acceso a la información es vital. Con el auge de la tecnología, cada
día hacemos uso de más tipos de dispositivos que nos facilitan esa tarea. Pero a nosotros nos trae sin cuidado si
estamos usando un Smartphone, una Tablet, un portátil o lo que sea. Lo único
que necesitamos es acceder a la información de manera clara y legible en
cualquier momento.
En realidad, esto plantea un problema a la hora
de visualizar el contenido de la información, y por ello es necesario que
nuestras webs se adapten a los diferentes tamaños de pantalla de nuestros
dispositivos. En definitiva, nos gustaría ver las páginas web de la misma forma
siempre.
El diseño responsive distribuye y acomoda los
elementos de la página web y los adapta para que puedan ser visualizados de
forma correcta independientemente del ancho de la pantalla que estemos usando. Podemos afirmar que esta técnica es imprescindible
para el diseño de interfaces web.
Como siempre hay un roto para un descosido,
podemos hacer uso de multitud de herramientas responsive que nos ayudarán en
nuestro propósito. Hablaremos un poco de los dos frameworks open source más
utilizados actualmente y que son Bootstrap y Foundation.
Como sucede con cualquier framework, para poder
usarlo de forma adecuada se requiere un periodo de aprendizaje. Pero no te
preocupes porque no te llevará mucho tiempo.
Por mi parte, no voy a decantarme claramente por
uno, porque su funcionamiento es muy similar. Si bien, las diferencias más
grandes están en su núcleo de funcionamiento. Ambos son colecciones de html,
CSS y JavaScript pero difieren un poco en el uso de los preprocesadores de CSS.
Bootstrap usa Sass y Less y Foundation emplea Sass.
Sass y Less:
Si te gusta el diseño front-end como a mí,
seguro que le dedicas muchas horas a la maquetación de un proyecto. Sabemos de las bondades del CSS, pero también de los
dolores de cabeza que puede provocar.
Cuando trabajamos en un proyecto medianamente
grande, las hojas de estilo se convierten en pliegos kilométricos muy difíciles
de ordenar y mantener.
¿No
sería genial trabajar en CSS como se hace en los lenguajes de programación? Así
podríamos usar variables para almacenar datos y reaprovechar código. Podríamos
usar bucles, sentencias y condicionales, incluso operaciones matemáticas. Pues
por esto se crearon los pre-procesadores CSS.
Sass funciona con
Ruby, mientras que less, al estar escrito en JavaScript la instalación es tan
sencilla como importar la librería de JavaScript a tu documento HTML.
¿Qué tecnología es la mejor? Pues eso depende
de ti. A mí no me gusta el helado de chocolate pero a lo mejor a ti te encanta.
Pues eso. Dependerá de muchos factores.
Ya que CSS no es un lenguaje de programación, podríamos
decir que ambos son lenguajes para trabajar con CSS de forma dinámica. Sass y
Less no sustituyen a CSS, si no que ofrecen mejoras en el área de desarrollo,
por lo que usarlo se vuelve recomendable si quieres ahorrar tiempo de
desarrollo. Precisamente de ahí viene el nombre de Less css (menos css).
Digamos que los preprocesadores son a CSS como JQuery a JavaScript (es un
ejemplo ;-P) y sus objetivos son:
- No repetirse.
- Organizar mejor nuestro código.
- Sobre todo, reutilizar código.
Bootstrap actualmente se encuentra en la
versión 3.3.6. Fue creado por un desarrollador de Twitter en 2010. Es el
framework responsive más extendido y su lema es ‘One framework, every device’.
Foundation está en la versión 6 y es propiedad
de la compañía ZURB creada en 1998. Empresas como Disney usan este framework font-end
para sus web sites.
Los dos tienen características muy similares y
son compatibles con todos los navegadores. Quizá Bootstrap gana en
compatibilidad por dar soporte a versiones más antiguas de Internet Explorer.
La base de los dos es la rejilla de 12 columnas
mediante la cual acomodamos nuestros componentes en la interfaz. Todo elemento
debe estar contenido en un contenedor y cada contenedor se divide en 12
columnas. Los elementos dentro del contenedor se disponen en filas.
Por lo demás. Ya es cuestión de gustos, porque
ambos ofrecen multitud de componentes que
podemos usar en nuestros diseños y casi siempre encontraremos una solución a
nuestra medida.
Toda la información sobre estos frameworks la
podemos encontrar en sus respectivos sites (los dos en inglés). Para mi gusto,
la web de Bootstrap está mejor estructurada que la de Foundation y me resulta
más sencillo encontrar lo que busco.
Pero bueno… ¿Cuál es mejor? Pues bueno…
Fuentes de información:
Foundation Zurb: http://foundation.zurb.com/
Bootstrap: http://getbootstrap.com/
Blog de Ivanmendoza: http://ivanmendoza.net/diseno-web-2/introduccion-less-cssCursoderails: http://cursoderails.com/sass-introduccionwizache: http://www.wizache.com/blog/sass-vs-less-que-pre-procesador-de-css-es-mejor.html
