Spanish (Español) translation by Andrea Jiménez (you can also view the original English article)
Crearemos una navegación de sitio web sencilla y adaptable. Nuestra solución nos ayudará a poner énfasis en el contenido de nuestra página, posiblemente la principal prioridad al diseñar para dispositivos móviles. No habrá JavaScript involucrado, y lo abordaremos desde un enfoque Mobile First.
Navegación móvil
Si has leído Mobile First de Luke Wroblewski, estarás familiarizado con su afirmación de que:
Como regla general, el contenido tiene prioridad sobre la navegación en dispositivos móviles.
Lo que quiere decir con esto es que los usuarios de dispositivos móviles a menudo buscan respuestas inmediatas; quieren el contenido que fueron a buscar, no más opciones de navegación.
Muchos sitios, incluso los adaptables, se apegan a la costumbre de que la navegación pertenece a la parte superior de cualquier página. Este enfoque puede causar problemas de usabilidad en dispositivos móviles porque los usuarios de dispositivos móviles a menudo no tienen dos cosas: espacio de pantalla y tiempo. Si la navegación principal se coloca en la parte superior de una página, es muy probable que oscurezca toda la pantalla del dispositivo móvil. Este problema se ve agravado aún más por los grandes enlaces de menú táctiles, lo que obliga a los usuarios a desplazarse más allá de la navegación para acceder a cualquier contenido valioso.
Tomemos este ejemplo de London & Partners:
Un diseño adaptable perfectamente decente, pero en las dimensiones estándar de la ventana gráfica móvil (320px x 480px) todo lo que realmente ves es un menú de navegación. Seguramente, después de haber llegado a la página de inicio, ¿quiero ver algo más que eso? No son solo London & Partners quienes demuestran esto, es una práctica que se ve en muchos diseños adaptables en la web.
Entonces, ¿cuáles son las soluciones?
Hemos visto algunas formas de solucionar esto, a menudo apoyándonos en jQuery para resolver las cosas por nosotros. Tomemos la explicación de Chris Coyier del menú desplegable adaptable de Cinco sencillos pasos.
Pantalla grande, pantalla pequeña.Usando jQuery, se crea un duplicado del menú en forma de un menú desplegable <select>, inicialmente oculto a la vista usando CSS. Cuando las consultas de medios detectan una pantalla más pequeña, hacen que el menú desplegable sea visible y la navegación original sea invisible. Esto es perfecto para dispositivos móviles, ya que los menús desplegables ocupan un espacio mínimo y hacen uso de la interfaz de usuario particular del dispositivo (como el scroller del iPhone).
Alternativamente, puedes ocultar tu navegación, pero hacer que se muestre cuando se haga clic en un botón de 'menú'. Puedes ver este efecto en acción con el último Bootstrap de Twitter.
Las pantallas más pequeñas ocultan los enlaces de navegación y muestran un icono de "lista" (que se acepta rápidamente como "menú") que revela la navegación cuando se hace clic en él. Nuevamente, a los visitantes móviles se les presenta la mayor cantidad de contenido posible, pero tienen opciones de navegación disponibles si las desean.
Solución CSS pura
Usaremos una técnica discutida por Luke, que hace uso de CSS y un enfoque Mobile First. ¿Qué queremos decir con un enfoque Mobile First? En pocas palabras, diseñaremos un diseño móvil sencillo y luego mejoraremos progresivamente el diseño para pantallas más grandes. Usaremos consultas de medios que detectan un aumento constante del tamaño de la pantalla, añadiendo estilo y características a medida que avanzamos.
Esto significa que solo se cargará el mínimo de CSS y recursos cuando nuestro diseño se vea en un dispositivo móvil. También significa que las versiones anteriores de IE (que no reconocen las consultas de medios) se presentarán con el sitio móvil. Consulta Dejando atrás el antiguo Internet Explorer de Joni Korpi para obtener más información al respecto.
1. Formatos
Explicaré las ideas detrás de esta solución a medida que avancemos, así que por el momento juntaremos algunos formatos, comenzando con un documento HTML5 en blanco.
1 |
<html lang="en"> |
2 |
<head>
|
3 |
|
4 |
<meta charset="utf-8"> |
5 |
<title>Mobile First Responsive Navigation</title> |
6 |
<meta name="description" content="CSS only mobile first navigation"> |
7 |
<meta name="author" content="Ian Yates"> |
8 |
|
9 |
<!--Mobile specific meta goodness :)-->
|
10 |
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> |
11 |
|
12 |
<!--css-->
|
13 |
<link rel="stylesheet" href="styles.css"> |
14 |
|
15 |
<!--[if lt IE 9]>
|
16 |
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
17 |
<![endif]-->
|
18 |
|
19 |
<!-- Favicons-->
|
20 |
<link rel="shortcut icon" href="img/favicon.ico"> |
21 |
|
22 |
</head>
|
23 |
<body id="home"> |
24 |
|
25 |
|
26 |
</body>
|
27 |
</html>
|
Nota: ¡No olvides la metaetiqueta de la ventana gráfica!
Una vez hecho esto, agregaremos alguna estructura de página. Cosas sencillas y todo para los propósitos de nuestra demostración. Usé texto de relleno del Santo Grial de Monty Python (gracias Chris Valleskey) la cual es una buena manera de poner una sonrisa en tu rostro mientras estás trabajando :)
1 |
<body id="home"> |
2 |
|
3 |
<div class="wrapper"> |
4 |
|
5 |
<header>
|
6 |
|
7 |
<h1 class="logo"><a href="">Nav</a></h1> |
8 |
|
9 |
</header>
|
10 |
|
11 |
<article>
|
12 |
|
13 |
<h2>Blue. No, yel…</h2> |
14 |
|
15 |
<p>Shut up! Will you shut up?! But you are dressed as one… Camelot! You don't vote for kings.</p> |
16 |
|
17 |
</article>
|
18 |
|
19 |
<article>
|
20 |
|
21 |
<h2>We want a shrubbery!!</h2> |
22 |
|
23 |
<p>Look, my liege! Shut up! But you are dressed as one…</p> |
24 |
|
25 |
<ul>
|
26 |
<li>The nose?</li> |
27 |
<li>Shh! Knights, I bid you welcome to your new home. Let us ride to Camelot!</li> |
28 |
<li>Look, my liege!</li> |
29 |
</ul>
|
30 |
|
31 |
</article>
|
32 |
|
33 |
<article>
|
34 |
|
35 |
<h2>Help, help, I'm being repressed!</h2> |
36 |
|
37 |
<p>Why? Listen. Strange women lying in ponds distributing swords is no basis for a system of government. Supreme executive power derives from a mandate from the masses, not from some farcical aquatic ceremony. Be quiet! A newt?</p> |
38 |
|
39 |
</article>
|
40 |
|
41 |
<footer>
|
42 |
|
43 |
<p>Copyright ©2012 Ian Yates <a href="http://webdesign.tutsplus.com">Webdesigntuts+</a></p> |
44 |
|
45 |
</footer>
|
46 |
|
47 |
</div><!--end wrapper--> |
48 |
|
49 |
</body>
|
2. Formato de navegación
Reunimos una página html básica, así que ahora es el momento de la atracción principal; nuestra navegación principal..
1 |
|
2 |
<nav id="primary_nav"> |
3 |
|
4 |
<ul>
|
5 |
|
6 |
<li><a href="">Portfolio</a></li> |
7 |
|
8 |
<li><a href="">About Me</a></li> |
9 |
|
10 |
<li><a href="">Nonsense</a></li> |
11 |
|
12 |
<li><a href="">Services</a></li> |
13 |
|
14 |
<li><a href="">Contact</a></li> |
15 |
|
16 |
<li><a href="#home">Top</a></li> |
17 |
|
18 |
</ul>
|
19 |
|
20 |
</nav><!--end primary_nav--> |
Sí, lo viste correctamente, lo añadimos en la línea 68, después del último artículo. No olvides que estamos diseñando para dispositivos móviles ahora, hablaremos del escritorio más adelante. Colocamos la navegación en la parte inferior de nuestra página para que esté completamente fuera del camino. Ahora colocaremos un enlace en la parte superior de nuestra página para que los usuarios puedan encontrar la navegación si lo desean.
1 |
|
2 |
<header>
|
3 |
|
4 |
<h1 class="logo"><a href="">Nav</a></h1> |
5 |
|
6 |
<a class="to_nav" href="#primary_nav">Menu</a> |
7 |
|
8 |
</header>
|
3. Reinicio de CSS
Dependiendo de cómo comiences normalmente los proyectos web, este paso puede diferir en tu flujo de trabajo habitual. Siempre he encontrado que el reinicio de Eric Meyer es una base sólida para trabajar, especialmente porque lo ha modificado recientemente. Agregaremos sus reglas de reinicio a una hoja de estilo para iniciar nuestro CSS:
1 |
/* http://meyerweb.com/eric/tools/css/reset/
|
2 |
v2.0b1 | 201101
|
3 |
NOTE: WORK IN PROGRESS
|
4 |
USE WITH CAUTION AND TEST WITH ABANDON */
|
5 |
|
6 |
html, body, div, span, applet, object, iframe, |
7 |
h1, h2, h3, h4, h5, h6, p, blockquote, pre, |
8 |
a, abbr, acronym, address, big, cite, code, |
9 |
del, dfn, em, img, ins, kbd, q, s, samp, |
10 |
small, strike, strong, sub, sup, tt, var, |
11 |
b, u, i, center, |
12 |
dl, dt, dd, ol, ul, li, |
13 |
fieldset, form, label, legend, |
14 |
table, caption, tbody, tfoot, thead, tr, th, td, |
15 |
article, aside, canvas, details, figcaption, figure, |
16 |
footer, header, hgroup, menu, nav, section, summary, |
17 |
time, mark, audio, video { |
18 |
margin: 0; |
19 |
padding: 0; |
20 |
border: 0; |
21 |
outline: 0; |
22 |
font-size: 100%; |
23 |
font: inherit; |
24 |
vertical-align: baseline; |
25 |
}
|
26 |
/* HTML5 display-role reset for older browsers */
|
27 |
article, aside, details, figcaption, figure, |
28 |
footer, header, hgroup, menu, nav, section { |
29 |
display: block; |
30 |
}
|
31 |
body { |
32 |
line-height: 1; |
33 |
}
|
34 |
ol, ul { |
35 |
list-style: none; |
36 |
}
|
37 |
blockquote, q { |
38 |
quotes: none; |
39 |
}
|
40 |
blockquote:before, blockquote:after, |
41 |
q:before, q:after { |
42 |
content: ''; |
43 |
content: none; |
44 |
}
|
45 |
|
46 |
/* remember to highlight inserts somehow! */
|
47 |
ins { |
48 |
text-decoration: none; |
49 |
}
|
50 |
del { |
51 |
text-decoration: line-through; |
52 |
}
|
53 |
|
54 |
table { |
55 |
border-collapse: collapse; |
56 |
border-spacing: 0; |
57 |
}
|
4. Estilos básicos
Por el momento, nuestra página se ve bastante aburrida..
.. así que mejoremos las cosas agregando un estilo sencillo.
1 |
/*begin our styles*/
|
2 |
|
3 |
body { |
4 |
font: 16px/1.4em 'PT Sans', sans-serif;; |
5 |
color: #1c1c1c; |
6 |
}
|
7 |
|
8 |
p, |
9 |
ul { |
10 |
margin: 0 0 1.5em; |
11 |
}
|
12 |
|
13 |
ul { |
14 |
list-style: disc; |
15 |
padding: 0 0 0 20px; |
16 |
}
|
17 |
|
18 |
a { |
19 |
color: #1D745A; |
20 |
}
|
21 |
|
22 |
h1 { |
23 |
|
24 |
}
|
25 |
|
26 |
h2 { |
27 |
font-family: 'PT Serif', serif; |
28 |
font-size: 32px; |
29 |
line-height: 1.4em; |
30 |
margin: 0 0 .4em; |
31 |
font-weight: bold; |
32 |
}
|
33 |
|
34 |
/*layout*/
|
35 |
|
36 |
.wrapper { |
37 |
}
|
38 |
|
39 |
article { |
40 |
border-bottom: 1px solid #d8d8d8; |
41 |
padding: 10px 20px 0 20px; |
42 |
margin: 10px 0; |
43 |
}
|
44 |
|
45 |
/*header*/
|
46 |
|
47 |
header { |
48 |
background: #1c1c1c; |
49 |
padding: 15px 20px; |
50 |
}
|
51 |
|
52 |
/*shorter clearfix http://nicolasgallagher.com/micro-clearfix-hack/*/
|
53 |
header:before, |
54 |
header:after { |
55 |
content:""; |
56 |
display:table; |
57 |
}
|
58 |
|
59 |
header:after { |
60 |
clear:both; |
61 |
}
|
62 |
|
63 |
/* For IE 6/7 (trigger hasLayout) */
|
64 |
header { |
65 |
zoom:1; |
66 |
}
|
67 |
|
68 |
h1.logo a { |
69 |
color: #d8d8d8; |
70 |
text-decoration: none; |
71 |
font-weight: bold; |
72 |
text-transform: uppercase; |
73 |
font-size: 20px; |
74 |
line-height: 22px; |
75 |
float: left; |
76 |
letter-spacing: 0.2em; |
77 |
}
|
78 |
|
79 |
a.to_nav { |
80 |
float: right; |
81 |
color: #fff; |
82 |
background: #4e4e4e; |
83 |
text-decoration: none; |
84 |
padding: 0 10px; |
85 |
font-size: 12px; |
86 |
font-weight: bold; |
87 |
line-height: 22px; |
88 |
height: 22px; |
89 |
text-transform: uppercase; |
90 |
letter-spacing: 0.1em; |
91 |
-webkit-border-radius: 2px; |
92 |
-moz-border-radius: 2px; |
93 |
border-radius: 2px; |
94 |
}
|
95 |
|
96 |
a.to_nav:hover, |
97 |
a.to_nav:focus { |
98 |
color: #1c1c1c; |
99 |
background: #ccc; |
100 |
}
|
Todo esto es algo básico (fuentes, alturas de línea, colores, entre otros), lo que es crucial hasta ahora es que diseñé el botón 'menú' para que flote hacia la derecha dentro del <header>, donde a menudo esperaría que se encontrara la navegación.
Si pasas el cursor sobre él verás el estado de desplazamiento; no es necesario para los dispositivos de pantalla táctil, por supuesto, pero esta experiencia también se entregará a las versiones que no cooperen de Internet Explorer. Lo que hemos definido para el beneficio de los usuarios móviles es un estado :focus. Es lo mismo que el estado :hover, pero ofrecerá comentarios cruciales para dispositivos con pantalla táctil. Nuestros usuarios sabrán que han tenido éxito al tocar el botón de menú.
De todos modos, haz clic en él y serás llevado a la navegación, genial.
Ahora modifiquemos un poco el estilo del menú.
5. Estilos de navegación
De hecho, diseñaremos nuestra navegación principal de manera muy similar al ejemplo de London & Partners que se mostró anteriormente, excepto que esta vez obviamente está en la parte inferior de la página.
1 |
/*navigation*/
|
2 |
|
3 |
#primary_nav ul { |
4 |
list-style: none; |
5 |
background: #1c1c1c; |
6 |
padding: 5px 0; |
7 |
}
|
8 |
|
9 |
#primary_nav li a { |
10 |
display: block; |
11 |
padding: 0 20px; |
12 |
color: #fff; |
13 |
text-decoration: none; |
14 |
font-weight: bold; |
15 |
text-transform: uppercase; |
16 |
letter-spacing: 0.1em; |
17 |
letter-spacing: 0.1em; |
18 |
line-height: 2em; |
19 |
height: 2em; |
20 |
border-bottom: 1px solid #383838; |
21 |
}
|
22 |
|
23 |
#primary_nav li:last-child a { |
24 |
border-bottom: none; |
25 |
}
|
26 |
|
27 |
#primary_nav li a:hover, |
28 |
#primary_nav li a:focus { |
29 |
color: #1c1c1c; |
30 |
background: #ccc; |
31 |
}
|
32 |
|
33 |
/*footer*/
|
34 |
|
35 |
footer { |
36 |
font-family: 'PT Serif', serif; |
37 |
font-style: italic; |
38 |
text-align: center; |
39 |
font-size: 14px; |
40 |
}
|
Mucho mejor. Hicimos que los enlaces del menú sean agradables y grandes (lee más sobre Tamaños de objetivo táctiles en el propio blog de Luke Wroblewski) y una vez más determinamos un estado :focus para los comentarios de los usuarios.
También queda claro que incluimos un enlace "superior" que llevará a los usuarios a la parte superior de la página si es necesario.
6. Cada vez más grande
Bien, nos ocupamos de nuestro diseño móvil sencillo, así que ahora es el momento de realizar algunas mejoras progresivas. Usaremos consultas de medios para determinar cuándo nuestro diseño para dispositivos móviles ya no es apropiado.
Pero, ¿en qué momento se vuelve inapropiado? Hay muchas formas de abordar las consultas de medios, pero trabajaremos partiendo de la base de que una ventana gráfica móvil es de 320 px x 480 px. Tiene 320px de ancho cuando se ve en vertical, 480px de ancho cuando se ve en horizontal, por lo que podríamos establecer con razón nuestra primera consulta de medios para detectar cualquier pantalla de más de 480px.
Sin embargo, el siguiente paso es posiblemente la tableta. El iPad tiene una resolución de 980px x 768px, por lo que podemos asumir con seguridad que cualquier cosa menor que 768px es apropiada para nuestro diseño móvil. Cualquier cosa mayor que 768px puede soportar más diseños de navegación similares a los de un escritorio.
Por lo tanto, podemos comenzar a agregar reglas, así que configuremos una consulta de medios:
1 |
/*media queries*/
|
2 |
|
3 |
@media only screen and (min-width: 768px) { |
4 |
|
5 |
}
|
Esta consulta de medios ejecutará todos los estilos que contiene cuando la ventana gráfica tenga al menos 768 px de ancho. Ten en cuenta la inclusión de la palabra clave only, lo que garantiza que Internet Explorer 8 no se confunda e intente procesar la consulta. Consulta mi explicación anterior para obtener más detalles.
Comencemos haciendo desaparecer nuestro botón de 'menú':
1 |
|
2 |
@media only screen and (min-width: 768px) { |
3 |
|
4 |
a.to_nav { |
5 |
display: none; |
6 |
}
|
7 |
|
8 |
}
|
Con el navegador hecho un poco más ancho, el botón de menú ya no se muestra.
7. Cambio de navegación
Ahora debemos llevar nuestra navegación principal a la parte superior de la página. Lo haremos eliminándola del flujo de documentos, colocándola absolutamente en la parte superior.
1 |
|
2 |
@media only screen and (min-width: 768px) { |
3 |
|
4 |
a.to_nav { |
5 |
display: none; |
6 |
}
|
7 |
|
8 |
.wrapper { |
9 |
position: relative; |
10 |
width: 768px; |
11 |
margin: auto; |
12 |
}
|
13 |
|
14 |
#primary_nav { |
15 |
position: absolute; |
16 |
top: 5px; |
17 |
right: 10px; |
18 |
background: none; |
19 |
}
|
20 |
|
21 |
#primary_nav li { |
22 |
display: inline; |
23 |
}
|
24 |
|
25 |
#primary_nav li a { |
26 |
float: left; |
27 |
border: none; |
28 |
padding: 0 10px; |
29 |
-webkit-border-radius: 2px; |
30 |
-moz-border-radius: 2px; |
31 |
border-radius: 2px; |
32 |
}
|
33 |
|
34 |
}
|
Para que eso sea posible, primero tenemos que hacer que su padre (.wrapper) esté relativamente posicionado. Podemos hacerlo aquí en la consulta de medios o determinarlo al comienzo de nuestra hoja de estilo.
Una vez que el menú está posicionado absolutamente, necesitamos eliminar algunos de los estilos de anclaje. No hay mucho que hacer, pero necesitamos que los elementos de la lista se muestren en línea, y debemos eliminar los bordes y el relleno exagerado de los anclajes. Los estados hover que dictamos anteriormente están bien, por lo que no es necesario cambiarlos.
8. Una última cosa
Si has estado prestando atención, habrás notado que todavía tenemos un enlace 'superior' en la navegación; realmente ya no lo necesitamos, ¿eh?
Podemos eliminar esto de varias maneras, pero para estar seguros de lo que está sucediendo, primero agregaremos una clase al elemento de la lista:
1 |
|
2 |
<li class="top"><a href="#home">Top</a></li> |
Y luego podemos deshacernos de él dentro de nuestra consulta de medios:
1 |
|
2 |
#primary_nav li.top { |
3 |
display: none; |
4 |
}
|
Conclusión
¡Eso es todo! Hay un montón de maneras de aprovechar esta idea (la implementación del ícono de lista es solo una) y, por supuesto, puedes seguir agregando consultas de medios para satisfacer el crecimiento de las pantallas. Esperemos que ahora tengas las bases para hacerlo. Creamos una navegación sencilla, adaptable y táctil, a partir de un enfoque mobile first al tiempo que le damos énfasis al contenido y la usabilidad. ¡¿Quién puede pedir más?!
Más recursos
Algunos enlaces útiles mencionados en el tutorial, agrupados en una lista práctica:
- Mobile First de Luke Wroblewski
- Menú desplegable adaptable basado en jQuery de Chris Coyier
- Cinco sencillos pasos
- Bootstrap de Twitter
- Dejando atrás el antiguo Internet Explorer de Joni Korpi
- ¡No olvides la metaetiqueta de la ventana gráfica!
- Texto de relleno Monty Python de Chris Valleskey (entre otras cosas)
- Reinicio revisado de Eric Meyer
- Tamaños de objetivos táctiles de Luke Wroblewski
- Mi explicación de la palabra clave 'only' de la consulta de medios
- Patrones de navegación adaptables de Brad Frost
- Construye una navegación móvil inteligente sin hackeos en la revista .net de Aaron Gustafson
Opción Premium
Hay muchas plantillas mobile first para dispositivos móviles disponibles en Envato Market para uso inmediato en tus proyectos.
Por ejemplo, first es un tema del panel de administración/aplicación web para dispositivos móviles con una interfaz de usuario plana basada en Bootstrap 3. Es liviano pero con muchos componentes que se adaptan a tus necesidades. También es totalmente adaptable, y los widgets y componentes son mobile first.
By
