Mejores frameworks para crear webs responsives

Todos los desarrolladores web tienen claro que a la hora de crear una página web queda fuera de duda la necesidad de dotarla de un diseño responsive. La moderna tecnología de software hace descansar sobre un framework la capacidad de hacer posible tal diseño. El mercado está ampliamente abastecido con ejemplos como HTML 5 Boilerplate, Boostrap, Foundation o Skeleton, de los que seguidamente se darán los principales detalles.

Este post pretende efectuar una descripción de los principales frameworks que permiten crear páginas web responsives, cuya existencia es imperativa de cara a facilitar al usuario la mejor experiencia de navegación posible y a los titulares de webs alcanzar el top en el posicionamiento orgánico SEO. Como infraestructura digital para el desarrollo de software, un framework proporciona la imprescindible tecnología de soporte para la consecución de ese modelo responsive que otorgue plena adaptabilidad a la navegación por los dispositivos móviles.

En este ámbito, conviene delimitar con precisión los conceptos de framework y grid y considerar este como parte integrante de aquel. Explicados ya los fundamentos del primero, en cuanto a este último puede decirse que representa un sistema de columnas (por lo general, una docena (pueden encontrarse grids de hasta 24)), que facilita al desarrollador web la creación de diseños de dimensiones adecuadas y gráficamente equilibrados.

En el terreno práctico, un grid divide el ancho de una página web en un número de columnas previamente determinado, lo que hace posible una distribución de los elementos capaz de impregnar un aspecto muy atractivo desde la perspectiva del usuario. En consecuencia, cabe otorgar a los grids una notable responsabilidad en el campo de la user experience.

El framework, adicionalmente a lo aportado por el grid, abarca otros elementos clave para la navegación web, como pueden ser los formularios de contacto, los botones, los sliders o la barra de navegación, sin ánimo de agotar el catálogo. Es posible, incluso, encontrar en los frameworks más avanzados funcionalidades que dotan de un especial dinamismo al contenido de la web.

Una vez que se adquiere un correcto dominio de un framework, el desarrollo de sitios web se convierte en una labor sorprendentemente ágil por realizarse sobre la base del aprovechamiento de fragmentos de códigos de otros proyectos dotados de funcionalidades ya perfiladas. A partir de ese argumento, la personalización de un framework solo demanda el cambio de las clases CSS de los elementos que deseen modificarse para disponer de un sitio web que los usuarios perciban como un ejemplar fruto de un desarrollo singular y específico.

La imperiosa necesidad de dotar a las webs de tecnología responsive

En el mercado existe un gran surtido de frameworks y grids orientados a crear páginas web con diseño responsive que se adapten a todo tipo de pantallas. Cualquier gestor de un portal online debe asumir como algo irrenunciable la puesta en marcha de este tipo de desarrollos como única vía para garantizar que los usuarios y potenciales clientes, si se trata de un portal de negocio, puedan explorar en su máxima expresión la web independientemente del dispositivo a través del cual lo hagan: ordenador de sobremesa, portátil, tablet o smartphone. Es obvio que buena parte de la información contenida en las webs ajenas al modelo responsive es dilapidada, si la navegación tiene lugar desde pantallas pequeñas.

En otro orden de cosas, merece la pena destacar que en abril de 2015 irrumpió un factor de enorme magnitud que ha arrastrado masivamente a los webmasters a incorporar tecnología responsive en sus sites: el hecho de que Google introdujera modificaciones en su algoritmo que llevasen a una severa penalización en los resultados de búsqueda orgánica a las páginas desprovistas de aquella. Hay que tener en cuenta las consecuencias que se derivan de hundirse en el posicionamiento de cara a la captación de tráfico y, por ende, de clientes.

Ventajas e inconvenientes de los frameworks

Aunque evidentemente la aportación de esta infraestructura digital es ampliamente reconocida en el mundo del desarrollo web, también deben considerarse algunas cuestiones no tan favorables, como las que seguidamente se describirán.

Antes de ello, conviene hacer una recopilación de las ventajas que encierra el uso de un framework:

• Creación de páginas web con una inversión moderada y en un corto período de tiempo.
• Comodidad del profesional que trabaja en ello, ya que, al tener incorporadas funcionalidades de uso rutinario en el desarrollo de páginas web, queda liberado del esfuerzo adicional de razonar sobre la manera de hacer un formulario de contacto o slider.
• Agilidad en la entrega del trabajo de programación, puesto que el diseño arranca de un punto de partida considerable. Pero el aprovechamiento en toda la magnitud de esa agilidad exige un experimentado manejo del framework y el conocimiento profundo de las funcionalidades.
• Tratándose de un soporte al que recurren multitud de desarrolladores, cualquier incidencia sobrevenida que dificulte el proceso podrá ser sometida a consulta con alta probabilidad de encontrar solución rápida en la Red.
• La inclusión de plugins de JavaScript en los frameworks más vigorosos permite incorporar en las páginas web responsives soluciones más avanzadas sin necesidad de recurrir a su implementación.

  Como se ha anticipado líneas atrás, no todo es perfecto en el mundo de los frameworks, por lo que conviene prevenir acerca de algunos de los inconvenientes con los que los desarrolladores pueden tropezar en su trabajo:

• Cada framework tiene un funcionamiento distinto, por lo que esta actividad exige horas de formación específica para hacerse con un buen bagaje sobre el potencial de las funcionalidades.
• Suelen incorporar una sobrecarga de código pensando en la infinidad de necesidades que un webmaster puede llegar a tener. Por ello, es harto improbable que vayan a utilizarse todas las funciones que incluye un framework para la web que se está construyendo.
• Conllevan una evidente complicación semántica, ya que utilizan un sistema de grid con clases extra que permite identificar el número de columnas que van a ocupar, pero cuyos nombres están más bien ideados hacia la funcionalidad.
• Se corre el riesgo de que el aspecto final de una página web desarrollada con este sistema se asemeje llamativamente al de otras, lo cual puede suceder en el caso de que no se personalicen los CSS a conciencia.

A la vista de estos posibles inconvenientes en el uso de frameworks, parece obvio que pertenecen más al ámbito de la preparación y formación específica en su manejo que a cuestiones de otra índole, por lo cual quedan solapados por la gran rapidez en la creación de webs responsives que permiten.

Los frameworks más ilustres del mercado

Ante la evidencia de desarrollar una web con todas las garantías de navegación, se impone el recurso a uno de los numerosos frameworks que el mercado brinda a los webmasters, puesto que a todas luces no resulta operativo ni rentable llevar a cabo un desarrollo partiendo de cero, que obligaría a vigilar que todos los elementos se comporten de manera responsive.

La exposición sobre los frameworks que hay disponibles se ceñirá a un selecto ramillete de los que pueden considerarse más populares.

Boostrap 3

Este es uno de los líderes por su popularidad y la frecuencia de su uso. La titularidad de su desarrollo cabe imputarla al equipo responsable de la creación de la red social Twitter.

Boostrap hace gala de una sólida base en lo que a su objetivo respecta: la consecución de la mejor user experience posible. Ese ha sido el referente que ha marcado la pauta en el diseño y perfeccionamiento posterior por parte de sus progenitores, que evidentemente dieron con un producto capaz de posibilitar la impecable visualización de las webs al margen del dispositivo que maneje el usuario.

Este framework lleva integrado un grid de 12 columnas y, además, incorpora multitud de complementos que dan la oportunidad de crear webs en tiempo récord y con una enorme solvencia de su condición responsive. Asimismo, admite la opción de manejar plugins de JavaScript y distintos estilos de formularios de contacto, al margen de otras ventajas.

Boostrap ha sido desarrollado en un visualizador de archivos de texto que funciona en intérpretes de comando LESS, lo que quizá sea causa de asegurar una navegación completa por el contenido del archivo utilizando mínimos recursos del sistema. A pesar de esto, también puede utilizarse con SASS (lenguaje de hoja de estilos) o sin ningún tipo de preprocesador de CSS, si el desarrollador lo estima innecesario.

El principal elemento de calidad de Boostrap, que le distingue de la mayoría de sus competidores, radica en que está catalogado como mobile first por ser capaz de diseñar las webs empatizando con los usuarios que navegarán por ellas desde un dispositivo móvil y adaptando los diseños posteriormente a formatos superiores de pantalla.

Foundation

Conforme se describe en su página web corporativa, Foundation es el framework que mejor encaje tiene en el denominado desarrollo frontend, que trabaja la interfaz web y hace que el usuario pueda interactuar con ella, dar formato a contenidos, desarrollar el aspecto de la web y manipular resultados de datos obtenidos.

Está desarrollado en HTML5 y permite el diseño y desarrollo de las webs de móvil a pantallas de formato superior (mobile first) o viceversa. La génesis de Foundation obedece al potente preprocesador CSS SASS, algo que hace que quienes recurren a este framework destaquen el elevado grado de personalización de los sitios web.

Entre sus variadas virtudes, una funcionalidad de Foundation digna de subrayar es el notable grado de acomodo del que sus desarrolladores le han dotado en relación con todas las recientes novedades tecnológicas. Incluso, puede ser compatible con un navegador con el que nadie había llegado a serlo, Internet Explorer 8+.

Los testimonios de sus usuarios revelan mayoritariamente que Foundation pasa por ser uno de los frameworks de mayores y mejores prestaciones.

Skeleton

El hecho diferencial de Skeleton, que utiliza HTML5, respecto a otros frameworks es que contribuye con una operatividad adicional y la elaboración de aplicaciones con las mismas características que las webs responsives. Sus características más relevantes son:

• Poder crear consultas estándar para las propiedades de estilo CSS específico de cada dispositivo en concreto.
• Clases CSS para elementos de imagen sensibles que escalan con la cuadrícula de diseño.
• Su plantilla PSD permite personalizar al máximo los diseños y blindarlos ante la posible utilización por parte de otros.
• Incorpora un shiv HTML5 gracias al cual puede funcionar el diseño en los navegadores más obsoletos.
• Es un framework de código abierto, de lo que se desprende que está en permanente actualización por parte de otros desarrolladores que trabajen en él.

Sin duda, es un excelente modelo para iniciarse, al proporcionar un desarrollo rápido de sitios web y disponer del respaldo de una nutrida comunidad que permite la resolución ágil de dudas e imponderables.

HTML5 Boilerplate

HTML5 Boilerplate, también conocido como H5BP, es un framework que permite simplificar la gestación de sitios web al amparo del lenguaje HTML5, una característica que comparte con el anterior.

Para su utilización, solo se requiere la descarga de una plantilla (template) que ayuda a los desarrolladores, al margen de su cualificación y pericia, a construir sitios web responsives en un breve lapso de tiempo, por lo cual aporta bastante rentabilidad. Sus más valorados atributos son:

• Está normalizado para todos los navegadores (característica que se conoce como cross-browsing).
• Incorpora clases CSS específicas para el navegador de Microsoft.
• Incorpora clases no-js y js para estilos basados en las capacidades del navegador.
• Inclusión de un archivo .htaccess, de lo que se deriva el uso optimizado de todas las características propias del HTML5, un tiempo de carga de la web más reducido y que contribuye enormemente a mejorar el posicionamiento orgánico de la web en los buscadores, etc.

Simple Grid

Un framework que también da un extraordinario rendimiento en pantallas de alta resolución, como 1140 px, y capaz de proporcionar una experiencia de usuario inmejorable. Especialmente para quienes tienen afinidad por los diseños minimalistas, es una alternativa de enorme interés.

Este sucinto repaso puede servir como botón de muestra de las herramientas existentes para lograr los mejores diseños responsive que faciliten la navegación por las páginas web con el máximo aprovechamiento de su contenido por parte del usuario.