Web design and hosting, database, cloud and social media solutions that deliver real business results
  • Business Solutions
    • Robotic Process Automation
    • Bespoke Software
    • Database Services
      • Data Integration
      • Datawarehouse Services
      • Power BI
    • Web Services
      • Logo Design
      • Payment Gateways
      • Web Site Optimisation
      • Web Site Security
      • Technical Tools
    • Cloud Services
      • Amazon Web Services
      • Google Cloud Services
      • Microsoft Azure
    • Microsoft Office
    • Social Media Services
  • Academy
    • Our Test Environment
    • Learning Databases
      • The Basics
      • Get Open Query
      • SQL Server Data
      • SQL Server Maintenance
      • Using SQL Server Dates
      • Using SQL Server Functions
      • Using SQL Server Pivot-Unpivot
      • Technical Tools
    • Learning Web Design
      • Building Ousia Content Management System
      • Using ASP-NET
      • Using CSS
      • Using JavaScript
    • Learning Cloud and IT Services
      • Task Scheduler Error 2147943645
      • Requesting SSL and Generation of PFX file in OpenSSL Simple Steps
    • Using Social Media
      • Asking for a Google Review
      • Changing a Facebook account from personal to business
      • Choosing where to focus Social Media effort
      • Social Media Image Sizes
      • Using Meta Data to set Social Media Images
  • About
    • Blog
      • Building an entry level gaming machine
      • Google Core Update Jan 2020
      • Hot Chilli Internet Closure
      • How To Choose Content For Your Website Adverts Leaflets
      • Preventing Online Scam
      • Skimmers of the gig economy
      • The most annoying things about websites on the Internet
      • Top 5 websites for free Vector Graphics
    • Portfolio
    • Team
      • Adrian Anandan
      • Ali Al Amine
      • Ayse Hur
      • Chester Copperpot
      • Fernando Ancona Camara
      • Gavin Clayton
      • Sai Gangu
      • Suneel Kumar
      • Surya Mukkamala
      • Trevor Momanyi

Using One or Separate Sites for Mobile and Desktop Development

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:DropDownList ID="SelDevice" runat="server" ClientIDMode="Static" Width="100px" AutoPostBack="True">
    <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>
Now this code is used in the Page Load event, setting the linked style sheet before rendering on the page. You could also for instance change the visibility of certain items within the If statement.
LoaderVBC#

VB

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    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#

protected void Page_Load(object sender, EventArgs e)
{
    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();
}
In the code above you would replace the setting of CSS with a redirect.
We will need some code to recognise that the user has changed their view type. We will also stored a cookie here to remember the value next time they access the site.
LoaderVBC#

VB

Protected Sub SelDevice_SelectedIndexChanged(sender As Object, e As EventArgs) Handles SelDevice.SelectedIndexChanged
    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#

protected void SelDevice_SelectedIndexChanged(object sender, EventArgs e)
{
    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();
}
Once the menu type has been set we can also populate the menu manually in code behind, adding the references dependant on the menu provided.
LoaderVBC#

VB

Protected Sub GetMenus()
    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#

protected void GetMenus()
{
    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

#SubMenu a
{
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;
}

Author

Gavin Clayton
Gavin Clayton
I formed Claytabase in 2010 as a way of carrying on my work with SQL Server and ASP.NET. This has culminated in the Ousia Content Management System being taken from concept to one of the quickest CMS's on the market.

Helpful?

Please note, this commenting system is still in final testing.

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.

more: Responsive and fast. Web Development, Design and Hosting with Content Management System
Copyright Claytabase Ltd 2021, registered in England and Wales 08985867

Site Links

RSS Login ContactCookie PolicySitemap

Social Media

facebook.com/Claytabaseinstagram.com/claytabase/twitter.com/Claytabaselinkedin.com/company/claytabase-ltd

Get in Touch

+442392064871info@claytabase.co.ukGround Floor, Building 1000, Lakeside North Harbour, Western Road, Portsmouth, Hampshire, United Kingdom, PO6 3EZ

Partnered With

Partners
The settings on this site are set to allow all cookies. These can be changed on our Cookie Policy & Settings page.
By continuing to use this site you agree to the use of cookies.
Ousia Logo
Ousia CMS Loader