¿Quieres que tu web llegue a más usuarios y a más dispositivos sin hacer varias versiones de la misma? El diseño adaptable es una ya conocida técnica para el desarrollo de nuestros sitios, permitiendo que el mismo código funcione en varias resoluciones.
Cuanto mayor sea la cantidad de resoluciones soportadas, más usuarios estarán encantados con nuestro sitio, así que para cumplir con este objetivo hemos elegido una de las librerías más utilizadas para esta funcionalidad: Foundation, de la empresa Zurb.
En esta serie de post estaremos mostrando en la práctica cómo armar nuestra web y cómo aplicar el diseño adaptable a cada sección de la misma de una manera profesional, vamos a mostrar técnicas implementadas en nuestro sitio web y en este blog.
Nos referimos a ver nuestra web como un rompecabeza, ya que a cada parte de ella sea el menú, una lista de noticias, imágenes, barras laterales, etc., debemos aplicarle la metodología de grilla que nos da Foundation, tal como lo explicamos en este post de Diseño Adaptable con Foundation publicado anteriormente.
Menú Adaptable con Foundation
En este tutorial de Foundation vamos a trabajar con un ejemplo de un Menú principal en nuestra web, el cual tendrá la funcionalidad de abrir desde la parte derecha cuando se encuentre en resoluciones de Tablets y de Celulares, así nos aseguramos que el menú de opciones de nuestro sitio no interfiera a la navegación normal del usuario, ya que en pantallas más pequeñas un menú de opciones consume mucho espacio.
Para poder utilizar Foundation en nuestro ejemplo utilizaremos los recursos desde un CDN.
Archivo Css necesario de Foundation
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.css'>
Archivos Javascripts necesarios para el funcionamiento de Foundation
<script src='https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/js/vendor/jquery.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/js/foundation.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/js/vendor/modernizr.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/js/foundation/foundation.topbar.js'></script>
Html para la Implementación de un Menú Adaptable con Foundation
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.css'>
</head>
<body>
<nav class="top-bar" data-topbar role="navigation" data-options="custom_back_text: true; back_text: Volver">
<ul class="title-area">
<li class="name">
<h1><a href="https://www.infranetworking.com/">Infranetworking.com</a></h1>
</li>
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li><a href="#">Iniciar Sesión</a></li>
</ul>
<ul class="left">
<li class="has-dropdown">
<a href="#">Hosting SSD</a>
<ul class="dropdown">
<li><a href="#">Hosting Virtual</a></li>
<li><a href="#">Hosting Multidominios</a></li>
</ul>
</li>
<li><a href="#">Cloud VPS</a></li>
<li><a href="#">Dedicados</a></li>
<li class="has-dropdown">
<a href="#">Servicios Empresariales</a>
<ul class="dropdown">
<li><a href="#">Dominios</a></li>
<li><a href="#">Certificados SSL</a></li>
</ul>
</li>
</ul>
</section>
</nav>
<script src='https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/js/vendor/jquery.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/js/foundation.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/js/vendor/modernizr.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/js/foundation/foundation.topbar.js'></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Resultado
Para verificar cómo se adapta nuestro menú a las distintas resoluciones hacer click aquí, y solo debemos mover la barra que indicamos en las imágenes anteriores con las flechas rojas.
Como pudimos ver, es bastante simple implementar la metodología que nos indica Foundation para mostrar nuestros menú de nuestra web y a la vez hacerlo adaptable, y claramente si queremos algo un poco más personalizado debemos implementar nuestros cambios en nuestro CSS a las clases que nos indica Foundation en su documentación oficial.
De esta manera damos inicio a nuestro sitio adaptable utilizando Foundation. Esta metodológica de crear aplicaciones o sitios webs es compatible con cualquiera de nuestros servicios de Hosting Compartido, Cloud VPS y Servidores Dedicados, así que eres libre de empezar a implementarlo en tus sitios.