Examinando el diseño de navegación adaptativa: patrones para el pié de página

() translation by (you can also view the original English article)

Bienvenidos al segundo capítulo de una serie que examina patrones en el diseño de navegación adaptativa. Este artículo te guiará a través de cuatro patrones de diseño en los cuales la navegación se desplaza al pié de página, conservando el espacio en la parte superior de la misma.

Bien, para recapitular. En el anterior tutorial desarrollamos tres patrones en los que la navegación se mantenía en el encabezado, sin importar el tamaño de pantalla. El objetivo de esos patrones era minimizar el espacio vertical en el momento en el que la navegación se veía en pantallas pequeñas.

Hoy daremos la vuelta a las cosas y desarrollaremos cuatro nuevos patrones en los cuales la navegación se ubica en el pie de página de nuestro diseño. Al mover nuestro menú al pié de la página, evidentemente ahorramos ese espacio arriba. Al igual que en el artículo anterior, estos patrones ya te resultarán familiares gracias a Brad Frost, quien recopiló patrones utilizados en webs adaptativas así como algunos patrones complejos.

Los Patrones

Con los tres patrones de encabezado, nuestro problema principal era el espacio, concretamente el espacio vertical y la manera de emplear el mínimo posible. Tú deseas que los visitantes visualicen tu contenido tan pronto como sea posible, y no lo pueden hacer si la navegación está ocupando en gran medida la pantalla. Una fórmula para resolver este problema es llevarnos la navegación al pié de página.

Esto trae otro conjunto de retos. Si por un lado los visitantes alcanzan más fácilmente el contenido, ahora tendrán que deslizarse hasta el final de la página para encontrar la navegación.

Los patrones que desarrollaremos en este artículo son los siguientes:

Solo Pié de Página – mantiene el menú en el pié todo el tiempo
Variación sólo en el pié – Mantiene el menú en el pié en las pantallas pequeñas, pero lo desplaza a la cabecera en cuanto hay espacio que lo permita.
Ancla de pié – mantiene el menú en el pié para pantallas pequeñas, pero proporciona un enlace (botón) en la parte superior de la página hacia él.
Pié fijo – mantiene el menú en el pié en pantallas pequeñas e introduce un posicionamiento fijo de manera que permanezca visible siempre, aunque deslicemos la visualización.

Todos estos patrones han sido construidos en base al anterior. Primero moveremos la navegación al pié y después añadiremos las modificaciones que ayuden a hacerlo más visible y accesible.

Como en el artículo anterior sobre los patrones de encabezado, mantendré el código específico al menú y elementos asociados debajo. El código completo está disponible a través del vínculo superior y puede además verse visitando la demostración y observando su código fuente.

Patrón Únicamente para el Pié

Como su propio nombre indica, el patrón solo para el pié mueve de forma global la navegación al pié de página. Para ser honestos, es poco probable que uses este patrón tal cual. Al tiempo que libera espacio vertical en la parte superior de la página, oculta la navegación abajo. Esto puede funcionar bien en las pantallas de los smartphones, pero no tiene sentido en las amplias pantallas de los navegadores.

De cualquier manera, este patrón establece los fundamentos para los otros patrones, los cuales se construirán a partir de éste y

Planteamiento: En las pantallas más pequeñas ajustaremos el menú para que se muestre en el área inferior de la página en forma de listado de enlaces verticales. Después les aplicaremos estilo para hacerlos un poco más atractivos. A través de media queries transformaremos el menú vertical en horizontal, pero se mantendrá siempre al fondo de la página.

Paso 1: El HTML

Como estamos moviendo el código de nuestra navegación, vamos a echar un vistazo general a la estructura de la página para contextualizar. Con anterioridad la navegación estaba localizada en el elemento de encabezado con el logo. Ahora está situado dentro del pié junto con los créditos.

De cualquier manera es la misma lista de enlaces que vimos en la parte número uno. Todo lo que hice fue copiar y pegar exactamente el mismo código que la demo para moverlo desde arriba al pie de página.

<body>
  <header>
  <!-- navigation used to be located here -->
  </header>

  <div class="container">
    <div id="content"></div>
    <div id="sidebar"></div>
  </div>

  <div class="subfooter"></div>

  <footer>
    <nav>
      <ul id="demo-nav">
        <li><a href="">Back to Post</a></li>
        <li><a href="footer-only.html">Footer Only</a></li>
        <li><a href="footer-adapt.html">Footer Variation</a></li>
        <li><a href="footer-anchor.html">Footer Anchor</a></li>
        <li class="current"><a href="footer-fixed.html">Footer Fixed</a></li>
      </ul>
    </nav>

    <div class="container"></div>
  </footer>

</body>

Paso 2: El CSS predeterminado

Por defecto una lista muestra su contenidos como elementos de nivel bloque, uno sobre otro. Esto es lo que queremos, de modo que comenzamos con facilidades. Los estilos predeterminados son casi todos anti-estéticos. Empezaremos estableciendo el margen y padding de la lista ha 0 y eliminaremos los topos. Seguiremos asignando a los elementos de la lista un borde superior y estableciendo un color diferente para el enlace activo.

#demo-nav {
  margin: 0;
  padding: 0;
  list-style: none;
}
	
#demo-nav li {
  border: solid #878382;
  border-width: 0 0 1px 0;
}
	
#demo-nav li.current a {color: #9b9796;}
#demo-nav li.current a:hover {color: #111;}

De forma similar, el resto de los enlaces obtienen su propio color y algo de padding. El subrayado se elimina y los enlaces se han establecido para mostrase como elementos de nivel bloque de modo que aumente el área clicklable. Cuanta mayor área sea posible tocar para activar el enlace tanto mejor en el caso de dispositivos con pantallas pequeñas que se suelen manejar con el dedo pulgar. Quizá sea mejor el fondo. Para añadir interés visual decidí dar a los enlaces un degradado y hacer el fondo más luminoso en el estado on hover.

#demo-nav a {
  color:#fff;
  padding: 0.75em 5%;
  text-decoration: none;
  display: block;
  background-color: #575352;
  background-image: -webkit-linear-gradient(top, #777372, #676362);
  background-image: -moz-linear-gradient(top, #777372, #676362);
  background-image: -ms-linear-gradient(top, #777372, #676362);
  background-image: -o-linear-gradient(top, #777372, #676362);
}
	
#demo-nav a:hover {
  background-color: #777372;
  background-image: -webkit-linear-gradient(top, #878382, #777372);
  background-image: -moz-linear-gradient(top, #878382, #777372);
  background-image: -ms-linear-gradient(top, #878382, #777372);
  background-image: -o-linear-gradient(top, #878382, #777372);
  color: #111;
}

De nuevo, esto es un aspecto puramente estético. Por defecto el menú se muestra como una lista vertical de enlaces, que es realmente todo lo que necesitábamos.

Paso 3: Las Media Queries

La lista vertical de enlaces a la que aplicamos los estilos anteriormente, funciona bien hasta que el navegador alcanza más o menos 42.5 em (680px). En este punto el espacio horizontal ofrece la sensación de estar demasiado vacío. Modificaremos el menú para que sea horizontal manteniéndose abajo en la página.

El cambio se hace efectivo flotando los enlaces de la lista hacia la izquierda. Todo lo que resta por hacer es rehacer el aspecto estético. Primero aplicaré un color de fondo a la lista que funcione entre los enlaces de post-pié de página y los créditos. También apliqué algo de padding y borde inferior. Desde el momento en que los enlaces se han establecido con la propiedad float, he añadido overflow:hidden a la lista para forzarla a mantenerse abierta o ampliable.

Después a los enlaces se les asigna algo de padding. El 5% de la izquierda es el mismo valor de padding que tienen el resto de los elementos a lo largo del margen izquierdo. He eliminado el borde porque los enlaces ya no están uno sobre otro, también he eliminado el color de fondo tras ellos. Debido a que he usado previamente un gradiente como fondo, también necesito quitar la propiedad background-image de los enlaces, incluido el estado hover.

@media screen and (min-width: 42.5em) {
  #demo-nav {
    background: #474342;
    padding: 1.5em 0;
    border-bottom: 1px solid #878382;
    overflow: hidden;
  }
		
  #demo-nav li {border: 0;}
		
  #demo-nav a {
    padding: 0.75em 0 0.75em 5%;
    float: left;
    background-color: transparent;
    background-image: none;
    border-width: 0;
  }
		
  #demo-nav a:hover {
    background-color: transparent;
    background-image: none;			
  }
}

La siguiente media query es simplemente para dotar a los enlaces de un poco más de espacio cuando la ventana del navegador aumente su anchura.

1	@media screen and (min-width: 56em) {
2	#demo-nav a {padding: 0.75em 1.5em 0.75em 5%;}
3	}

Podríamos dejar las cosas en este momento tal cual y continuar sumando espacio entre los enlaces según se vaya necesitando. En lugar de esto he decidido dejar caer los enlaces hacia abajo y a la derecha de los créditos una vez que hubo suficiente espacio.

Primero establecí que la lista flotase hacia la derecha, con lo cual casi queda en su sitio. Tras algunos ajustes en el padding de los enlaces todo queda en su sitio. también necesitaremos eliminar el fondo de todo el menú, ya que lo que deseamos es que sea el color del mismo pié el que haga la función como fondo.

@media screen and (min-width: 64em) {
  #demo-nav {
    float: right;
    margin-right: 5%;
    background: transparent;
    border: 0;
    padding: 1em 0;
  }

  #demo-nav li {display: inline;}
		
  #demo-nav a {
    padding: 0.5em 1.25em;
  }
		
  #demo-nav a:hover {
    color: #777
  }
		
  #demo-nav li.current a:hover {color: #777;}
  #demo-nav li:last-child a {padding-right: 0;}
}

La última media query es nuevamente para ajustar el espaciado entre los enlaces. Bien, pararemos aquí, aunque puedes continuar añadiendo más media queries para aumentar el espacio.

1	@media screen and (min-width: 75em) {
2	#demo-nav a {padding: 0.5em 1.75em;}
3	}

Consejos

No hay mucho en este patrón una vez has movido el html de la navegación a la parte más baja de la página. La mayoría del css mostrado arriba es antiestético y eres libre de cambiarlo a tu gusto. Seguramente llegado un punto querrás transformar el menú vertical en uno horizontal.

Lo bueno del patrón de pié de página es que puede funcionar independientemente del número de enlaces que su navegación contenga. En las pantallas pequeñas puedes usar tanto espacio vertical como desees y una vez exista hueco acoplar dichos enlaces horizontalmente uno junto a otro. La clave está en asegurarte que los enlaces dispondrán del suficiente espacio a su alrededor para poder ser activados sin pulsar el resto de los enlaces.

De nuevo, probablemente no usarás este patrón tal cual, sino que por el contrario elegirás emplear una de sus variantes que permiten que el menú sea más visible y accesible.

Ejemplos

Todos los sitios siguientes utilizan únicamente el patrón de pié

Variante del Patrón de Pié

Este segundo patrón es una variación solo del pié. Hasta 64em (1024px) es casi exactamente lo mismo en el código y se verá de la misma manera en la página. En cualquier caso, en lugar de mover la navegación hacia la derecha del pié cuando exista espacio suficiente, lo movemos al lado derecho del encabezado tal y como puedes ver en la imagen siguiente.

En pantallas pequeñas la gente todavía necesitará desplazar la visualización de la ventana para encontrar el menú, pero ahora está arriba en la página, donde la mayoría espera verlo en pantallas grandes. Como la mayoría del código es idéntico, solo explicaré los cambios existentes en los patrones que siguen a continuación.

Planteamiento: Haremos lo mismo que hicimos anteriormente para las pantallas pequeñas. Empezamos con un menú vertical y una vez el espacio lo permita, cambiaremos la visualización del menú a modo horizontal. Lo variaremos cuando la pantalla sea lo suficientemente ancha. En lugar de flotar el menú al lado derecho del pié, lo moveremos hacia arriba, a la derecha del encabezado de la página.

Paso 1: El HTML

La única diferencia en el html entre este modelo y el patrón solo en el pié es que la navegación se ha eliminado del interior del pié y ahora descansa justo encima del mismo. Esto no afectará a la visualización en monitores pequeños, pero hará más fácil el desplazamiento de la navegación al encabezado.

<nav>
  <ul id="demo-nav">
    <li><a href="">Back to Post</a></li>
    <li class="current"><a href="footer-only.html">Footer Only</a></li>
    <li><a href="footer-adapt.html">Footer Variation</a></li>
    <li><a href="footer-anchor.html">Footer Anchor</a></li>
    <li><a href="footer-fixed.html">Footer Fixed</a></li>
  </ul>
</nav>

<footer>
  <div class="container">
    <p class="credit">Demo by Steven Bradley &mdash;
    <a href="http://www.vanseodesign.com">Vanseo Design</a></p>
  </div>
</footer>

Paso 2: El CSS predeterminado

El único cambio en el css por defecto es el siguiente. A partir del momento en que movido el menú fuera del footer, éste ya solo necesitaba un poco de estilo para aplicarle un borde superior.

1	nav {
2	border-top: 1px solid #878382;
3	}

Paso 3: Las media Queries

El primer par de media queries (a 42.5em y 56em son idénticos a lo que vimos más arriba en el patrón solo en el pié. La diferencia llega cuando alcanzamos los 64em. Anteriormente he movido el menú hacia el lado derecho del pié. Aquí lo moveremos hacia la derecha del encabezado.

Casi todo lo que sigue es similar a lo hecho con anterioridad. Lo único importante a tener en cuenta es el posicionamiento en el elemento nav que contiene el menú. No lo podemos flotar esta vez ya que está al final de la estructura html. En su lugar lo conseguiremos mediante el posicionamiento.

Aunque no lo he mencionado anteriormente, el elemento body tiene establecido un posicionamiento relativo. Con ello podemos establecer el posicionamiento para el elemento nav a absoluto y adjudicarle valores a la derecha y arriba.

Todo lo demás es igual o una variante de lo visto con anterioridad. Los paddings son algo diferentes y todavía necesitamos eliminar el fondo y el borde del menú.

@media screen and (min-width: 64em) {
  nav {
    position: absolute;
    top: 0;
    right: 5%;
    background: none;
    border: 0;
  }
	
  #demo-nav {
    background: transparent;
    border: 0;
    padding: 1em 0;
  }

  #demo-nav li {
    display: inline;
  }
		
  #demo-nav a {
    padding: 0.5em 1em;
  }
		
  #demo-nav a:hover {
    color: #777
  }
		
  #demo-nav li.current a:hover {color: #777;}
  #demo-nav li:last-child a {padding-right: 0;}	
}

Una vez hayamos movido la navegación arriba de la página, el resto de las media queries se emplearán para aumentar el padding entre los enlaces. Aquí paré a los 90em, pero de nuevo, tú puedes continuar hasta el ancho que desees.

@media screen and (min-width: 75em) {
  #demo-nav a {padding: 0.5em 1.75em;}
}

@media screen and (min-width: 80em) {
  #demo-nav {a {padding: 0.5em 2.1em;}
}

@media screen and (min-width: 90em) {
  #demo-nav a {padding: 0.5em 2.5em;}
}

Consejos

Este patrón tiene las mismas ventajas que el patrón solo en el pié mostrado más arriba. Puede funcionar con tantos enlaces como desees. Incluso mejor ya que desplaza la navegación arriba en la página una vez no dispone de suficiente espacio. Cuando esto vaya ha suceder, dependerá de las características especificas de tu diseño. La clave una vez más está en asegurarnos de que las áreas a activar de los enlaces sean lo suficientemente amplias para los dedos.

Por supuesto este patrón tiene el mismo inconveniente que el patrón solo en el pié de las pantallas pequeñas, en donde la gente todavía necesita desplazarse para encontrar la navegación.

Ejemplos

Pears
Evening Edition
Kisko Labs
Dustin Senos' Portfolio — El menú para los enlaces externos de la izquierda sigue este patrón.

El Ancla del Pié

El patrón de ancla de pié intenta resolver el problema de la necesidad de desplazase para alcanzar el menú, lo conseguimos incluyendo un enlace ancla en la parte alta de la página, directamente en el menú. A excepción de esta adición, este patrón será idéntico al patrón de variación solo en el pié que acabamos de construir.

Planteamiento: En pantallas pequeñas empezaremos con el mismo menú vertical con el que hemos trabajado hasta ahora. Incluiremos un botón con css que cuando sea pulsado nos lleve directamente a la navegación en el pié. Una vez la pantalla sea lo suficientemente ancha y desplazamos de nuevo la navegación arriba de la página, esconderemos el botón ancla.

Paso 1: El HTML

El html es idéntico a la variación del pié más arriba con una excepción. Necesitamos añadir un enlace en la parte superior de la página, al cual daremos estilo como botón. Haremos uso del preexistente id #demo-nav, sirviéndonos de él como ancla para el enlace. Cuando sea pulsado recargará la página y le añadirá un signo "hash" al final de la url que nos llevará directamente a la navegación.

<header>
  <img class="logo" src="images/logo.png" width="252" height="46" />
  <a class="anchor" href="#demo-nav">Menu</a>
</header>

<!-- lots of code -->

<nav>
  <ul id="demo-nav">
    <li><a href="">Back to Post</a></li>
    <li class="current"><a href="footer-only.html">Footer Only</a></li>
    <li><a href="footer-adapt.html">Footer Variation</a></li>
    <li><a href="footer-anchor.html">Footer Anchor</a></li>
    <li><a href="footer-fixed.html">Footer Fixed</a></li>
  </ul>
</nav>

Paso 2: El CSS Predeterminado

La única diferencia en el css que viene por defecto es que necesitamos aplicarle estilo al enlace de forma que parezca un botón y posicionarlo en el lado derecho del header o encabezado. La flotación del enlace hacia la derecha y algunos márgenes se encargarán de posicionarlo.

Para convertirlo en botón, primeramente asignamos al enlace la propiedad display con valor de elemento de bloque (display: block) y añadimos algo de padding. Tras eliminar el subrayado y cambiar el color a blanco, añadimos un pequeño radio de borde para curvar las esquinas y un color de fondo.

Una vez más emplearemos un degradado en el fondo para que el botón adquiera la apariencia de "pulsable". Existen un par de navegadores que no admiten esta propiedad, aunque no es algo de gran importancia, de cualquier manera esto añadirá algo de profundidad al botón en los que si la admitan. Para el estado hover haremos los colores un poco más brillantes.

.anchor {
  float: right;
  margin-top: 1.25em;
  display: block;
  padding: 0.25em 2%;
  color: #fff;
  text-decoration: none;
  border-radius: 0.25em;
  background: #5b5756;
  background-color: #5b5756;
  background-image: -webkit-linear-gradient(top, #6b6766, #5b5756);
  background-image: -moz-linear-gradient(top, #6b6766, #5b5756);
  background-image: -ms-linear-gradient(top, #6b6766, #5b5756);
  background-image: -o-linear-gradient(top, #6b6766, #5b5756);
}
	
.anchor:hover {
  background-color: #7b7776;
  background-image: -webkit-linear-gradient(top, #8b8786, #7b7776);
  background-image: -moz-linear-gradient(top, #8b8786, #7b7776);
  background-image: -ms-linear-gradient(top, #8b8786, #7b7776);
  background-image: -o-linear-gradient(top, #8b8786, #7b7776);
}

Paso 3: Las Media Queries

Solo hay una cosa nueva con respecto a las media queries. En los 64em (momento en el cual desplazamos la navegación a la parte superior de la página) necesitamos ocultar el botón, por lo que adjudicamos el valor none a la propiedad display. Todo lo demás es exactamente igual al patrón de variación solo en el pié.

1	@media screen and (min-width: 64em) {
2	.anchor {display: none;}
3	}

Consejos

Este patrón tiene todas las ventajas descritas en los anteriores. Mantiene el espacio en la parte superior de la página en mínimos. Al igual que en los otros patrones, querrás asegurarte de que el área activable de los botones es suficientemente amplia. El ancla hace la navegación más accesible en el momento en el que ésta está situada en el pié.

El inconveniente es el salto de abajo hacia arriba de la página. Podría resultar confuso para los visitantes que no adviertan que han saltado al final de la página. Una forma de advertirlos, es añadir un enlace para "subir arriba". Yo no he añadido ninguno aquí, pero esto serviría tanto para orientar al lector como para proporcionar un acceso rápido a la zona superior de la página.

Otra forma de superar este problema es el uso de nuestro siguiente patrón.

Ejemplos

Contents Magazine
Webdesigntuts+ Demo
Bureau – Mira la "i" en la esquina superior derecha.
Mobilism 2011

El Patrón de Pié fijo

En el cual el ancla del pié intenta resolver el inconveniente del desplazamiento llevándote al menú, este patrón mantiene la navegación visible por lo tanto no es necesario el salto. Emplea el posicionamiento fijo para mantener la navegación en la parte más baja del navegador. La navegación al final de la página es realmente útil en las pantallas muy pequeñas. Este patrón se usa mucho y está siendo cada vez más habitual.

Planteamiento: Debido a la cantidad de enlaces que tenemos, haremos uso del patrón de ancla en el pié para las pantallas pequeñas. Tan pronto como el espacio lo permita, eliminaremos el botón y desplazaremos el menú de manera que que se sitúe al final de la ventana del navegador de forma fija y horizontal. Lo dejaremos allí hasta que exista suficiente espacio como para subirlo a lo alto de la página.

Paso 1: El HTML

El html es idéntico a lo que hemos visto más arriba en el patrón con ancla en el pié. Realmente, no hay nada más que ver aquí. Pasemos a lo siguiente.

Paso 2: El CSS Predeterminado

Sí. Lo mismo sucede aquí. Una vez más nada importante a revisar. Vamos a pasar hacia adelante.

Paso 3: Las Media Queries

Finalmente algo de nuevo código. Una vez que el navegador alcanza 37.5em (600px), existe suficiente espacio para posicionar el menú en sentido horizontal. Para empezar vamos a añadir algo de margen al borde inferior del pié ya que de otra forma se mantendría tras el menú posicionado. Desde el momento en el que el menú ya es visible, no necesitamos más el botón ancla, por lo tanto desabilitamos su visibilidad.

Para corregir la navegación debemos aplicarle estilos. Establecemos su posicionamiento a fijo y le asignamos un valor bottom de 0. El z-index previene que los créditos se muestren superponiendose cuando están tras el menú. Cualquier valor positivo servirá. 10 es un valor elegido de manera arbitraria. También aplicaremos al elemento nav un fondo y un ancho de 100% ya que la navegación no tiene el mismo ancho que la página por defecto.

@media screen and (min-width: 37.5em) {
  footer {
    margin-bottom: 4em;
  }
	
  .anchor {display: none;}

  nav {
    position: fixed;
    bottom: 0;
    z-index: 10;
    background: #474342;
    width: 100%;		
  }

  #demo-nav {
    padding: 0.5em 0;
  }
		
  #demo-nav li {
    border: 0;
    display: inline;
  }
		
  #demo-nav a {
    padding: 0.75em;
    float: left;
    background-color: transparent;
    background-image: none;
    border-width: 0;
  }
		
  #demo-nav a:hover {
    background-color: transparent;
    background-image: none;			
  }
}

El resto es igual a lo que hemos visto con anterioridad. En el interior del elemento nav, a los enlaces se han flotado hacia la izquierda y se les ha añadido algo de padding. Debemos además eliminar el color de fondo y el degradado, como hicimos antes. Creo que aquí ya está todo hecho. Sigamos adelante.

Consejos

Una vez más este patrón emplea el mínimo espacio vertical en la parte alta de la página. Resuelve de una vez dos problemas, la ocultación de la navegación y el salto hacia la misma, manteniendo la navegación visible en todo momento. O al menos casi.

En la demostración habían demasiados enlaces como para llevar el posicionamiento fijo por debajo de 600px, por ello mantuve el patrón de ancla en esas medidas. Hubiese sido mejor reducir las etiquetas de navegación a 4 o 5 palabras e incluso llevarlo un paso más allá y emplear iconos.

Este patrón no es tan común en la actualidad. Como ves solo he encontrado 2 ejemplos para enseñarte. Dado que muchos de nosotros usamos el pulgar para navegar cuando sujetamos dispositivos moviles con una mano, sospecho que cada vez veremos más este patrón o variaciones del mismo en el futuro.

Ejemplos

Resúmen

Todos los patrones que hemos visto aquí son modificaciones de un tema. En lugar de hacer uso del valioso y escaso espacio vertical en la parte superior de la página, los patrones mueven la navegación al final de la misma. La ventaja principal es que permite a la gente con pantallas pequeñas ver y acceder a tu contenido rápidamente. El inconveniente es que la navegación está al final de la página.

La primera variación del patrón movía la navegación de vuelta arriba una vez que el espacio lo permitía. Eso ayuda, pero sigue existiendo una búsqueda y desplazamiento para localizar el menú en las pantallas pequeñas. El ancla en el pié lo corrige utilizando una pequeña cantidad de espacio del encabezado para proporcionar un enlace directo y ágil acceso al menú. Sin embargo esto nos deja con un salto rápido y desorientador hacia el final de la página.

El patrón de pié fijo corrige esto manteniendo el menú visible al final de la página. Con algunas etiquetas de navegación o el empleo de iconos, el menú siempre puede estar visible con independencia de la anchura del navegador.

Aún tenemos que conseguir más patrones. La próxima vez volveremos a la zona superior de la página. Adaptaremos lo que hicimos en el ancla del pié de forma que en lugar de saltar a la navegación, la mostraremos en el sitio.

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!