Using One or Separate Sites for Mobile and Desktop Development
Use responsive CSS if possible.
I've been spending time looking at the ongoing battles between developers over one of the fundamental headaches of web design, should you build separate sites for mobile devices and desktop computers. Some of the changes that Google have introduced like syncing your bookmarks for the IPhone and Chrome are really useful, this has led me to the single site conclusion, but a lot the code below could be used to redirect to a seperate site.
The site should be easy enough to use on either, while you can turn some things on or off with some simple detection.
There is also a cookie stored on the users device that remembers the last option selected.
This is what the detection does on this site. It is a simple dropdown with three options; Desktop, Apple and Mobile. There is also a dual menu system, which offers a simplified breadcrumb for the user as well.
HTML
<asp:ListItem>Desktop</asp:ListItem>
<asp:ListItem>Apple</asp:ListItem>
<asp:ListItem>Mobile</asp:ListItem>
</asp:DropDownList>
<div id="SubMenu">
<div id="Current" runat="server" clientidmode="Static"></div>
<div id="SubMenuList" runat="server" clientidmode="Static"></div>
</div>
VB
If Session("View") Is Nothing Then
If Request.Cookies("ViewType") Is Nothing Then
If Request.Browser.IsMobileDevice = True Then
Dim ua As String = Request.UserAgent.ToString().ToLower()
If ua.Contains("iphone") Or ua.Contains("ipad") Or ua.Contains("ipod") Then
Session("View") = "Apple"
Else
Session("View") = "Mobile"
End If
Else
Session("View") = "Desktop"
End If
Else
Session("View") = Request.Cookies("ViewType").Value.ToString
End If
End If
SelDevice.SelectedValue = Session("View").ToString
If Session("View").ToString = "Apple" Then
cssLink.Href = "/gsclaytonmob.css"
ElseIf Session("View").ToString = "Mobile" Then
cssLink.Href = "/gsclaytonmobold.css"
Else
cssLink.Href = "/gsclayton2.css"
End If
GetMenus()
End Sub
C#
{
if (Session("View") == null)
{
if (Request.Cookies("ViewType") == null)
{
if (Request.Browser.IsMobileDevice == true)
{
string ua = Request.UserAgent.ToString().ToLower();
if (ua.Contains("iphone") | ua.Contains("ipad") | ua.Contains("ipod"))
{
Session("View") = "Apple";
}
else
{
Session("View") = "Mobile";
}
}
else
{
Session("View") = "Desktop";
}
}
else
{
Session("View") = Request.Cookies("ViewType").Value.ToString;
}
}
SelDevice.SelectedValue = Session("View").ToString;
if (Session("View").ToString == "Apple")
{
cssLink.Href = "/gsclaytonmob.css";
}
else if (Session("View").ToString == "Mobile")
{
cssLink.Href = "/gsclaytonmobold.css";
}
else
{
cssLink.Href = "/gsclayton2.css";
}
GetMenus();
}
VB
Session("View") = SelDevice.SelectedValue
Response.Cookies("ViewType").Value = Session("View")
Response.Cookies("ViewType").Expires = DateTime.Now.AddDays(1000)
If Session("View").ToString = "Apple" Then
cssLink.Href = "/gsclaytonmob.css"
ElseIf Session("View").ToString = "Mobile" Then
cssLink.Href = "/gsclaytonmobold.css"
Else
cssLink.Href = "/gsclayton2.css"
End If
GetMenus()
End Sub
C#
{
Session("View") = SelDevice.SelectedValue;
Response.Cookies("ViewType").Value = Session("View");
Response.Cookies("ViewType").Expires = DateTime.Now.AddDays(1000);
if (Session("View").ToString == "Apple")
{
cssLink.Href = "/gsclaytonmob.css";
}
else if (Session("View").ToString == "Mobile")
{
cssLink.Href = "/gsclaytonmobold.css";
}
else
{
cssLink.Href = "/gsclayton2.css";
}
GetMenus();
}
VB
Dim m As String = Page.RouteData.Values("PageMenu")
Select Case m
Case "Home"
'HomeSubMenu.Attributes.CssStyletyle = "Active"
Current.InnerHtml = "Home"
Dim a As New HyperLink
a.NavigateUrl = "Home/"
a.Text = "Home"
SubMenuList.Controls.Add(a)
Dim b As New HyperLink
b.NavigateUrl = "About/"
b.Text = "About"
SubMenuList.Controls.Add(b)
Dim c As New HyperLink
c.NavigateUrl = "Login/"
c.Text = "Login"
SubMenuList.Controls.Add(c)
End Select
End Sub
C#
{
string m = Page.RouteData.Values("PageMenu");
switch (m)
{
case "Home":
//HomeSubMenu.Attributes.CssStyletyle = "Active"
Current.InnerHtml = "Home";
HyperLink a = new HyperLink();
a.NavigateUrl = "Home/";
a.Text = "Home";
SubMenuList.Controls.Add(a);
HyperLink b = new HyperLink();
b.NavigateUrl = "About/";
b.Text = "About";
SubMenuList.Controls.Add(b);
HyperLink c = new HyperLink();
c.NavigateUrl = "Login/";
c.Text = "Login";
SubMenuList.Controls.Add(c);
break;
}
}
You can then style each of the Menus differently in your CSS, for example each of the links in my Sub Menu area are styled differently. The first one is for mobile (full width), and the second for desktop.
CSS
{
color: #332700;
float: left;
width: 100%;
display: block;
text-decoration: none;
padding: 5px 0px 5px 0px;
font-size: large;
border-bottom: 1px solid Grey;
}
#SubMenu a
{
color: #45144D;
padding-left: 8px;
float: right;
text-decoration: none;
}
Website design by Claytabase
This is a section of code that has been modified from Ousia Content Management System code, one of the quickest and most optimised systems on the market, part of our website design services.
These are available with sites starting at around £500.
We recommend using responsive CSS as we do in our system.