Introduction
Vertical menus are an increasingly popular method of presenting primary navigation for mobile phones. The screen shot below shows the kind of design we mean.
Designers want nice big buttons, that are easy to select, consistently styled and importantly that display really quickly. With 51Degrees.mobi there's a solution that addresses all 3 of these challenges. Read on to find out more.
Solution
This menu button design is made up of 3 components. An image icon, text and the background. Many designers will create unique images that encompass all of these components. Such a solution is difficult to maintain consistently over time, fonts will be inconsistent, button images can become distorted and will have different sizes depending on the mobile device. All the repeated image data will take a long time to load in the bandwidth constrained world of mobile.
An alternative approach is to create the button using an image, hyperlink and background control. For compatibility across difference mobile devices the best container and background to use is a table control with two cells, one for the image icon and the other for the text and hyper link. These standard ASP.NET components are enhanced with 51Degrees.mobi in to important ways for this solution:
- The image for the icon is sized precisely to fit into the area required in the menu. Therefore multiple, or one larger, icon file(s) can be provided and the icon will shrink down to the required size automatically without additional image data being send over the network. This results in the image loading quickly.
- The table control needs to be styled with rounded corners and a gradient background. No consistent solution exists for all mobile devices. The 51Degrees.mobi style control can be used to dynamically create the correct CSS information to achieve the best result on all platforms.
Site Maps
A further consideration is where to provide the data for the icons, text and navigation urls. This information could be hard coded into each page which would work, but is time consuming and inelegant. The answer is ASP.NET's Site Maps feature. Site Maps enable a simple XML document, usually called web.sitmap, to define all the navigation of the web site. The XML used with 51Degrees.mobi's mobile site is shown below as an example.
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControl1.ascx.cs" Inherits="MobileWebApplication4.WebUserControl1" %>
<script runat="server" type="text/C#">
/* Configure the dimensions of your menu items here. */
public Unit Height = new Unit(2.5, UnitType.Em);
internal Unit Width { get { return Height; } }
internal Unit Gap { get { return new Unit(Height.Value * 0.3, Height.Type); } }
internal Unit ImageWidth { get { return new Unit(Width.Value * 0.8, Width.Type); } }
internal Unit ImageHeight { get { return new Unit(Height.Value * 0.8, Height.Type); } }
</script>
<%--Data source control for the menu information set to retrieve menu information relevent to the current page.--%>
<asp:SiteMapDataSource ID="SiteMapDataSourceMenu" runat="server" StartFromCurrentNode="true" ShowStartingNode="false" StartingNodeOffset="-1" />
<%--Data list used to display the menu items from the data source.--%>
<mob:DataList runat="server" ID="DataListMenu" DataSourceID="SiteMapDataSourceMenu" AllowPaging="false" Width="80%" Style="margin: 0px auto;" CellPadding="0" CellSpacing="4" RepeatLayout="Table" CssIncludeGroup="Menu">
<ItemTemplate>
<mob:Table runat="server" ID="PanelMenuItem" StyleID="StyleMenuItemBackground" CellPadding="0" CellSpacing="2" Height='<%# Height %>' BorderColor="Gray" BorderStyle="Solid" BorderWidth="2px" BackColor="#909cb3" Width="100%">
<mob:TableRow runat="server" ID="TableRowMenuItem">
<mob:TableCell runat="server" ID="TableRowMenuItemImage" Width='<%# Width %>' Height='<%# Height %>' VerticalAlign="Middle" HorizontalAlign="Center">
<mob:HyperLink runat="server" ID="HyperLinkMenuIcon" ImageURL='<%# "~/Images/" + Eval("title") + ".png" %>' Height='<%# ImageHeight %>' Width='<%# ImageWidth %>' CalculateSizeMode="ClientHeight" NavigateUrl='<%# Eval("url") %>' Style="text-decoration: none;" />
</mob:TableCell>
<mob:TableCell runat="server" ID="TableCellMenuItemSpacer" Width='<%# Gap %>' />
<mob:TableCell runat="server" ID="TableCellMenuItemLabel">
<mob:HyperLink runat="server" ID="HyperLinkMenuText" Text='<%# Eval("description") %>' ForeColor="White" NavigateUrl='<%# Eval("url") %>' Width="100%" Style="text-decoration: none;"/>
</mob:TableCell>
</mob:TableRow>
</mob:Table>
</ItemTemplate>
</mob:DataList>
<%--Style controls used to control the menu items based on the browser capabilities.--%>
<mob:Style runat="server" ID="StyleMenuItemBackground">
<mob:Filter Property="IsMobileDevice" Method="Equals" Value="False">
<mob:Filter Property="deviceid" Method="Contains" Value="firefox" Style="-moz-border-radius: 0.5em; background-image: -moz-linear-gradient( top, #b2bbca 0%, #909cb3 50%, #8593ac 50%, #73839f 100%);"/>
<mob:Filter Property="IsMobileDevice" Method="Equals" Value="False" Style="border-radius: 0.5em; background-image: url('Images/GradientBackground.svg');"/>
</mob:Filter>
<mob:Filter Property="Platform" Method="Regex" Value="Android|iPhone OS" Style="-webkit-border-radius: 0.5em; background-image: -webkit-gradient(linear, left top, left bottom, from(#b2bbca), to(#73839f));"/>
<mob:Filter Property="Platform" Method="Equals" Value="webOS" Style="border-radius: 0.5em;"/>
<mob:Filter Property="Platform" Method="Equals" Value="Windows Phone OS" Style="background-image: url('Images/GradientBackground.svg');"/>
</mob:Style>
The above ASP.NET contains 4 major sections.
- The code block at the top defines the size information for the control. I've made everything scale based on the desired height, but you can change it to use any suitable method.
- The SiteMap data control.
- A mobile DataList bound to the SiteMap used to display the menu items in a table. Each menu items are also a table with two cells. I've used a table because it's the most compatible method of layout information like this.
- The Style block at the bottom is used to determine the CSS to apply to the menu item to determine the background and the border radius. Three methods of providing a gradient background are shown:
- Mozilla linear gradients.
- Webket gradients.
- Using an SVG file to provide the gradient.
Most IIS configurations do not enable SVG files to be downloaded by default. Therefore you may need to add the following to the system.webserver section of the web.config file.
<staticContent>
<mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
staticContent>
Finally you'll need to add the user control to all the pages that have navigation links. Just add the user control reference at the top of the aspx page.
<%@ Register Src="~/Menu.ascx" TagPrefix="uc" TagName="Menu" %>
Then place the control on the page.
<uc:Menu runat="server" ID="MenuPage" Height="2em" />
When the ASPX page is loaded the SiteMap data source will work out the relevant navigation links. The 51Degrees.mobi DataList and Style controls will do the rest.
Conclusion
Site Maps provide a very easy and simple method to configure flexible navigation. When combined with 51Degrees.mobi mobile navigation can be implemented quickly and easily for all mobile device types. Probably quicker to set-up than the time required to create 15 separate menu images and you'll avoid all the pain of maintenance and poor performance.
Happy mobile navigating.