Advertisement
HTML/CSS

Quick Tip: Don't Forget the optgroup Element

by

One popular navigation design pattern for the responsive web is collapsing your website's navigation into a select menu. However, representing hierarchy or categorical distinctions in select elements often leads to butchered HTML with manual hyphens and lots of   spaces. In this tutorial we'll introduce you to a somehwat obscure HTML tag called optgroup which will provide you with an easy (and semantic) way of grouping related content in select menus.


Introduction

Figuring out how to optimally fit website navigation into the small screen real estate of mobile devices is an ongoing challenge of responsive web design. There are various responsive web design navigation patterns that work quite well. One of the more popular methods is condensing website navigation into a form select element.

This technique has been covered and explained in various tutorials across the web, including in an article on Webdesigntuts+ by Ian Yates: Building a Responsive Layout with Skeleton. However, converting site navigation into a native form control is not without controversy. Some argue it's a bad idea, as form elements were simply not meant for navigation.

select: A Quick Overview

The select element is great a UI element because it can hide many options under a single control, thus saving lots of screen real estate (an attractive proposition on mobile devices). It also allows designers to keep the site navigation at the top of the page, where users are accustomed to finding it.

In addition, there is one interaction benefit select menus provide that other HTML elements simply cannot: native controls. When active, select menus give users access to native controls that provide possibly the most favorable interaction, independent of the user's device or input method.

Deciding whether or not to convert your navigation into a select at mobile sizes is ultimately up to you as the designer. Every case is different. If you do decide to go down this route, this tutorial will provide more information on how to optimally group your navigable links using the optgroup HTML tag.


Example: Webdesigntuts+

We're going to use Webdesigntuts+ as a simple example of how to theoretically use the optgroup tag.

Note: This example is in no way a suggestion of how to properly solve a navigation design problem for Webdesigntuts+ or any site. It is merely a quick illustration of how one could use the optgroup element.

Let's say we wanted to condense the three separate navigation elements on the Webdesigntuts+ homepage into a select element.


Without optgroup

Converting navigable links into a select element while maintaining categorical grouping can prove to be messy if not done correctly. Some designers/developers might create a giant select menu using manual spaces ( ) and hyphens as separators:

<select>
	<option value="Without Optgroup">Nav Without &lt;optgroup></option>

	<option value="Browse Webdesign Tuts+">Browse Webdesign Tuts+</option>
	<option value="Home">&nbsp;&nbsp; - Home</option>
	<option value="Home">&nbsp;&nbsp; - Tutorials</option>
	<option value="Articles">&nbsp;&nbsp; - Articles</option>
	<option value="Tips">&nbsp;&nbsp; - Tips</option>
	<option value="Sessions">&nbsp;&nbsp; - Sessions</option>
	<option value="Videos">&nbsp;&nbsp; - Videos</option>
	<option value="Premium">&nbsp;&nbsp; - Premium</option>

	<option value="About Webdesign Tuts+">About Webdesign Tuts+</option>
	<option value="Advertise">&nbsp;&nbsp; - Advertise</option>
	<option value="Write For Us">&nbsp;&nbsp; - Write For Us</option>
	<option value="About">&nbsp;&nbsp; - About</option>
	<option value="Usage">&nbsp;&nbsp; - Usage</option>

    <option value="Tuts+ Network">Tuts+ Network</option>
    <option value="Tuts+ Hub">&nbsp;&nbsp; - Tuts+ Hub</option>
    <option value="Psdtuts+">&nbsp;&nbsp; - Psdtuts+</option>
    <option value="Nettuts+">&nbsp;&nbsp; - Nettuts+</option>
    <option value="VectorTuts+">&nbsp;&nbsp; - VectorTuts+</option>
    <option value="Audiotuts+">&nbsp;&nbsp; - Audiotuts+</option>
    <option value="Aetuts+">&nbsp;&nbsp; - Aetuts+</option>
    <option value="Cgtuts+">&nbsp;&nbsp; - Cgtuts+</option>
    <option value="Phototuts+">&nbsp;&nbsp; - Phototuts+</option>
    <option value="Mobiletuts+">&nbsp;&nbsp; - Mobiletuts+</option>
    <option value="Webdesigntuts+">&nbsp;&nbsp; - Webdesigntuts+</option>
    <option value="Wptuts+">&nbsp;&nbsp; - Wptuts+</option>
    <option value="Mactuts+">&nbsp;&nbsp; - Mactuts+</option>
    <option value="Gamedevtuts+">&nbsp;&nbsp; - Gamedevtuts+</option>
    <option value="Crafttuts+">&nbsp;&nbsp; - Crafttuts+</option>
</select>

With optgroup

However, using the optgroup element will provide you with cleaner HTML and built-in support for categorization in a select list. We use the label attribute to determine what will be displayed:

<select>
	<option value="With Optgroup">Nav With &amp;lt;optgroup></option>
	
	<optgroup label="Browse Webdesign Tuts+">
		<option value="Home">Home</option>
		<option value="Home">Tutorials</option>
		<option value="Articles">Articles</option>
		<option value="Tips">Tips</option>
		<option value="Sessions">Sessions</option>
		<option value="Videos">Videos</option>
		<option value="Premium">Premium</option>
	</optgroup>

    <optgroup label="About Webdesign Tuts+">
    	<option value="Advertise">Advertise</option>
    	<option value="Write For Us">Write For Us</option>
    	<option value="About">About</option>
    	<option value="Usage">Usage</option>
    </optgroup>

    <optgroup label="Tuts+ Network">
        <option value="Tuts+ Hub">Tuts+ Hub</option>
        <option value="Psdtuts+">Psdtuts+</option>
        <option value="Nettuts+">Nettuts+</option>
        <option value="VectorTuts+">VectorTuts+</option>
        <option value="Audiotuts+">Audiotuts+</option>
        <option value="Aetuts+">Aetuts+</option>
        <option value="Cgtuts+">Cgtuts+</option>
        <option value="Phototuts+">Phototuts+</option>
        <option value="Mobiletuts+">Mobiletuts+</option>
        <option value="Webdesigntuts+">Webdesigntuts+</option>
        <option value="Wptuts+">Wptuts+</option>
        <option value="Mactuts+">Mactuts+</option>
        <option value="Gamedevtuts+">Gamedevtuts+</option>
        <option value="Crafttuts+">Crafttuts+</option>
    </optgroup>
</select>

You can see that HTML markup allows you to represent a parent/child relationship without having to insert special spacing and hyphenated lists.


Mobile

As mentioned, an advantage of using the select element is the access to native controls on mobile or touch screen devices. Here are some examples of what these menus would look like:


Conclusion

That's all there is to it! Just remember the optgroup element provides a more semantic and maintainable solution for categorizing groups of links in a select list. Whether or not you use a select menu for condensing website navigation on mobile devices is a decision you need to make as a designer; however, you now have an additional nugget of knowledge in your tool belt for mastering responsive web design!


Further Resources

Related Posts
  • Web Design
    HTML & CSS
    How to Add Branded Branch Locations to Google MapsMap thumb
    In this tutorial we'll walk through the process of creating a branded Google map for an imaginary client.Read More…
  • Web Design
    HTML/CSS
    Build a Top Bar Off-Canvas Navigation With Foundation 5Foundation menu
    Today, we are going to combine ZURB's Foundation 5 Off-Canvas feature with our top bar navigation. The result will be a nice custom navigation for desktop users and a sleek off -canvas menu for tablet and mobile users. Read More…
  • Code
    Theme Development
    Custom Controls in the Theme CustomizerTheme customizer custom control 400
    In the last article, we explored the advanced controls available in the Theme Customizer, and how to implement them. We’re going to look at how to create our own custom control, allowing you to choose which Category of Posts are displayed on the home page. To get started, download version 0.6.0 of our Theme Customizer Example.Read More…
  • Code
    PhoneGap
    PhoneGap: Build a Feed Reader - Project StructurePhonegap feed reader@2x
    Although not specifically created to work together, jQuery Mobile and Cordova (also known as PhoneGap) are a very powerful duo to create hybrid, mobile apps. This series will teach you how to develop a feed reader using web technologies and these two frameworks. Over the course of this series, you'll also become familiar with the Cordova Connection and Storage Core Plugins and the Google Feed API.Read More…
  • Code
    HTML & CSS
    Pure: What, Why, & How?Pure retina preview
    This tutorial will introduce you to Pure, a CSS library made of small modules, that can help you in writing completely responsive layouts, in a very fast and easy way. Along the way, I'll guide you through the creation of a simple page in order to highlight how you can use some of the library's components.Read More…
  • Design & Illustration
    News
    Something New and Exciting: Tuts+ HubPreview400
    We're ready to announce something new and exciting — the Tuts+ Hub beta! As you know, Tuts+ is all about helping people learn. With Hub, we’ve worked to deliver an experience that makes it easy for you to find exactly what you'd like to learn, with a delightful interface for reading. What you see is a brand new layer that sits atop our current websites. All the articles and tutorials are still here (along with your comments), but we’ve designed a new way of presenting them and built new tools to help you navigate the library. Take a look now, and read on to find out more.Read More…