51Degrees-Logo

How To Add a "Visit Mobile Web Site" Link To Your Web Site

Engineering

7/11/2011 2:48 PM

Mobile Development

Forward thinking web sites will have at least 2 different versions of their content. 1 for mobile browsers, and the other for the big screen desktop and laptop devices. 51Degrees.mobi does an excellent job of detecting the device type and redirecting the device to the correct content. To provide users with choice and enable them to switch between the different versions.

The following self contained user control can be added to any ASP web page to provide an optional link in the top left hand corner of the web page to enable users viewing the desktop big screen web page to switch to the mobile site. Importantly the link will only appear when the page is being viewed on a mobile handset or tablet.

<%@ Control Language="C#" AutoEventWireup="true" Inherits="System.Web.UI.UserControl" %> <script runat="server" language="C#"> protected void Page_Load(object sender, EventArgs e) { Visible = Request.Browser.IsMobileDevice; } </script> <asp:Panel runat="server" ID="PanelMobileSite" BackColor="Silver" BorderColor="DarkGray" BorderStyle="Solid" BorderWidth="1px" Style="position: absolute; top: 0px; left 0px; line-height: 2em;"> <asp:HyperLink runat="server" ID="HyperLinkMobileSite" NavigateUrl="http://m.51degrees.mobi" Text="Mobile Site" style="padding-left: 1em; padding-right: 1em; vertical-align: middle;" /> </asp:Panel>

ASCX User Control

Add the above code to an ASP user control, and then add the user control to your master pages, or ASPX web pages. The link will only appear when the page is accessed via a mobile device and provides an elegant method of enabling users to switch between content types.

Happy mobile web development.