() translation by (you can also view the original English article)
Un diseño de patrón de navegación muy popular para los sitios web adaptables es hacer colapsar la navegación de su sitio web en un menú select. Sin embargo, representar al jerarquía o las distinciones de categorías en los elementos select a menudo conduce a un HTML destrozado con guiones manuales y muchos espacios . En este tutorial le presentaremos un poco de la extraña etiqueta HTML llamada optgroup que le ofrecerá a usted una forma fácil (y semántica) de agrupar contenido relacionado en menus select.
Introducción
Determinar como de manera óptima adaptar la navegación de su sitio web en una pantalla pequeña de un dispositivo móvil es un desafío constante del diseño web flexible. Hay varios patrones de navegación de diseños web adaptables que funcionan muy bien. Uno de los métodos populares es condensar la navegación de un sitio web en un elemento select de la etiqueta form.
Esta técnica ha sido abordada y explicada en varios tutoriales a en toda la web, incluyendo en un artículo de Webdesigntuts+ escrito por Ian Yates: Construyendo un Diseño Responsive con Skeleton. Sin embargo, convertir la navegación de un sitio en un control nativo de una etiqueta form no es sin controversia. Algunos alegan que es una mala idea, debido a que los elementos de una etiqueta form, simplemente, no fueron diseñados para la navegación.
select: Una Descripción General
El elemento select es un estupendo elemento UI porque puede ocultar muchas opciones debajo de un solo control, de este modo ahorramos mucho espacio valioso de la pantalla (una propuesta atractiva para los dispositivos móviles). Además, permite a los diseñadores conservar la navegación del sitio arriba de la página, en donde los usuarios están acostumbrados a encontrarla.
Además, hay un beneficio de interacción con los menús que proporciona el elemento select que otros elementos HTML simplemente no pueden: controles nativos. Cuando está activo, los menús select dan a los usuarios acceso a los controles nativos que proporcionan posiblemente la interacción más favorable, independiente de los dispositivos de los usuarios o de los métodos input.
Decidir si quiere o no convertir su navegación en un elemento select para los tamaños móviles, eso depende de usted como diseñador. Cada caso es diferente Si usted decide seguir esta ruta, entonces este tutorial le ofrecerá más información sobre cómo de manera óptima hacer navegable sus enlaces usando la etiqueta HTML: optgroup.
Ejemplo: Webdesigntuts+
Vamos a usar el sitio web Webdesigntuts+ como un ejemplo de cómo, teóricamente, usar la etiqueta optgroup.
Nota: Este ejemplo no es en ninguna manera una sugerencia de cómo resolver adecuadamente el problema del diseño de la navegación para el sitio web Webdesigntuts+ o de cualquier otros sitio Es meramente una ilustración rápida de cómo un sitio podría usar el elemento optgroup.
Digamos que queremos condensar los tres elementos de la navegación separados en la página de inicio de Webdesigntuts+ en un elemento select.
Sin optgroup
Convertir los elementos navegables en un elemento select mientras mantiene los grupos organizados por categorías puede resultar ser desordenado si no se hace correctamente. Algunos diseñadores o desarrolladores podrían crear un enorme menú select usando espacios manuales ( ) y guiones como separadores:
1 |
<select>
|
2 |
<option value="Without Optgroup">Nav Without <optgroup></option> |
3 |
|
4 |
<option value="Browse Webdesign Tuts+">Browse Webdesign Tuts+</option> |
5 |
<option value="Home"> - Home</option> |
6 |
<option value="Home"> - Tutorials</option> |
7 |
<option value="Articles"> - Articles</option> |
8 |
<option value="Tips"> - Tips</option> |
9 |
<option value="Sessions"> - Sessions</option> |
10 |
<option value="Videos"> - Videos</option> |
11 |
<option value="Premium"> - Premium</option> |
12 |
|
13 |
<option value="About Webdesign Tuts+">About Webdesign Tuts+</option> |
14 |
<option value="Advertise"> - Advertise</option> |
15 |
<option value="Write For Us"> - Write For Us</option> |
16 |
<option value="About"> - About</option> |
17 |
<option value="Usage"> - Usage</option> |
18 |
|
19 |
<option value="Tuts+ Network">Tuts+ Network</option> |
20 |
<option value="Tuts+ Hub"> - Tuts+ Hub</option> |
21 |
<option value="Psdtuts+"> - Psdtuts+</option> |
22 |
<option value="Nettuts+"> - Nettuts+</option> |
23 |
<option value="VectorTuts+"> - VectorTuts+</option> |
24 |
<option value="Audiotuts+"> - Audiotuts+</option> |
25 |
<option value="Aetuts+"> - Aetuts+</option> |
26 |
<option value="Cgtuts+"> - Cgtuts+</option> |
27 |
<option value="Phototuts+"> - Phototuts+</option> |
28 |
<option value="Mobiletuts+"> - Mobiletuts+</option> |
29 |
<option value="Webdesigntuts+"> - Webdesigntuts+</option> |
30 |
<option value="Wptuts+"> - Wptuts+</option> |
31 |
<option value="Mactuts+"> - Mactuts+</option> |
32 |
<option value="Gamedevtuts+"> - Gamedevtuts+</option> |
33 |
<option value="Crafttuts+"> - Crafttuts+</option> |
34 |
</select>
|
Con el elemento optgroup
Sin embargo, usando el elemento optgroup, éste le proporcionará un HTML más limpio y un mantenimiento interno para las categorías a través de una lista select. Usamos el atributo label para determinar que será mostrado:
1 |
<select>
|
2 |
<option value="With Optgroup">Nav With &lt;optgroup></option> |
3 |
|
4 |
<optgroup label="Browse Webdesign Tuts+"> |
5 |
<option value="Home">Home</option> |
6 |
<option value="Home">Tutorials</option> |
7 |
<option value="Articles">Articles</option> |
8 |
<option value="Tips">Tips</option> |
9 |
<option value="Sessions">Sessions</option> |
10 |
<option value="Videos">Videos</option> |
11 |
<option value="Premium">Premium</option> |
12 |
</optgroup>
|
13 |
|
14 |
<optgroup label="About Webdesign Tuts+"> |
15 |
<option value="Advertise">Advertise</option> |
16 |
<option value="Write For Us">Write For Us</option> |
17 |
<option value="About">About</option> |
18 |
<option value="Usage">Usage</option> |
19 |
</optgroup>
|
20 |
|
21 |
<optgroup label="Tuts+ Network"> |
22 |
<option value="Tuts+ Hub">Tuts+ Hub</option> |
23 |
<option value="Psdtuts+">Psdtuts+</option> |
24 |
<option value="Nettuts+">Nettuts+</option> |
25 |
<option value="VectorTuts+">VectorTuts+</option> |
26 |
<option value="Audiotuts+">Audiotuts+</option> |
27 |
<option value="Aetuts+">Aetuts+</option> |
28 |
<option value="Cgtuts+">Cgtuts+</option> |
29 |
<option value="Phototuts+">Phototuts+</option> |
30 |
<option value="Mobiletuts+">Mobiletuts+</option> |
31 |
<option value="Webdesigntuts+">Webdesigntuts+</option> |
32 |
<option value="Wptuts+">Wptuts+</option> |
33 |
<option value="Mactuts+">Mactuts+</option> |
34 |
<option value="Gamedevtuts+">Gamedevtuts+</option> |
35 |
<option value="Crafttuts+">Crafttuts+</option> |
36 |
</optgroup>
|
37 |
</select>
|
Usted puede ver que el marcado HTML permite representar una relación padre/hijo sin tener que insertar un espacio especial ni tampoco una lista con guiones.
Móvil
Cómo mencione, una ventaja de usar el elemento select es el acceso a los controles nativos en los dispositivos móviles o los dispositivos de pantallas táctiles. Aquí hay algunos ejemplos de cómo se verían estos menús:
Conclusión
¡Eso es todo lo que hay! Sólo recuerde que el elemento optgroup ofrece una solución más semántica y sostenible para organizar los grupos por categorías de enlaces en una lista select. Ya sea que use o no un menú con el elemento select para condensar la navegación de su sitio web en los dispositivos móviles, esa es una decisión que usted necesita hacer como diseñador, no obstante, ¡usted ahora tiene un elemento de conocimiento que es muy valioso en su cinturón de herramientas para el dominio en el diseño web adaptable!
Recursos adicionales
- <optgroup> en la Red de Desarrolladores de Mozilla
- <optgroup> especificaciones de la W3C
