Introduction
The most common way of accessing the web today has turned out to be mobile devices. Carrying the web along with us everywhere we go, it's easy to access internet features like mails, e-commerce, entertainment and others. This means websites should be fully optimised to allow users accessing via mobile to have pleasure and comfort surfing through them.
Mobile websites are very technical since they will be viewed from numerous types of devices.
This tip entails how to easily implement a mobile site functionality to your existing or new websites/apps. Going straight to the point without much to handle. I had to put this up when I created a large web application which sometimes will be viewed from mobile, seeing that the pages are too large to view on mobile. I have implemented this technique in different websites which actually works fine for me.
Background
Good knowledge of CSS is needed to implement this, a good command of ASP.NET as well. I use VB for my codes.
To use your desktop browser as a mobile browser, you will need an Extension, like in Mozilla Firefox, I am making use of User Agent Switcher. The browser will be seen as mobile depending on the option you've selected. You can download it by searching for "User Agent Switcher" in Mozilla Extensions and Plugins page.
Using the Code
First, in my website, I have to create two (2) masterpages and two (2) CSS files which will work hand-in-hand to serve all the pages in the website. This will eliminate the stress of building another website from scratch just for mobile.
Step 1
How do we implement this faster?
- Create a masterpage for the desktop view as
Master_pc.master
.
- Make sure you are done creating the masterpage, then duplicate the
master_pc
and rename to Master_mobile.master
. - Rename the class of the mobile masterpage in code-behind to
Master_mobile
.
- Change the
inherit
value in the HTML section of the page to Master_mobile
.
- Duplicate the Style_pc.css file and rename to Style_mobile.css.
Step 2 (Manipulating the CSS Files)
This is where the main work lies, because we need it to do the transformation in appearance needed by the pages. The website is having two CSS files with same classes/ids, this consistency is done so that when we switch masterpages and CSS, it will still apply in the pages that have used them.
The values of the elements are changed to fit a mobile device while the unwanted ones or the one that can't be displayed by a mobile browser will be removed.
Step 3
Now, we create a class file MainClass.vb
which has two (2) public
methods and a variable. The SwitchToMobileSite
method allows the user to select a view type when the website pages comes up while the MobileSiteDefault
is used to set the website pages to mobile by default.
Cookies are used to save the user site preference to the browser, the value will be used until the session expires. The value of the cookie will be Desktop Site or Mobile Site.
How Do We Detect the Device Type?
We can do this by using the request class which contains various methods. From a web page code-behind, we can just use Request.Browser.IsMobileDevice
, in a class file we have to call it from the HttpContext
class as HttpContext.Current.Request.Browser.IsMobileDevice
which is a boolean property of the browser.
Imports Microsoft.VisualBasic
Public Class MainClass
Public Shared SiteType As String
Public Shared Sub SwitchToMobileSite(ByVal CurrentPage As Page)
If SiteType = "Mobile Site" Then
CurrentPage.MasterPageFile = "~/Master_mobile.master"
End If
End Sub
Public Shared Sub MobileSiteDefault(ByVal CurrentPage As Page)
If HttpContext.Current.Request.Browser.IsMobileDevice Then
CurrentPage.MasterPageFile = "~/Master_mobile.master"
End If
End Sub
End Class
Step 4
Master_pc.master (HTML section)
<link href="Styles/Site_pc.css" rel="stylesheet" type="text/css" />
vb code-behind
Partial Class Master_pc
Inherits System.Web.UI.MasterPage
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Try
If IsNothing(Response.Cookies("SiteType").Value) Then
Response.Cookies("SiteType").Value = "Desktop Site"
SiteType = Response.Cookies("SiteType").Value
End If
Catch ex As Exception
End Try
End Sub
Protected Sub lnkMobileSite_Click(ByVal sender As Object, ByVal e As System.EventArgs) _
Handles btnMobileSite.Click
Try
If SiteType = "Desktop Site" Then
Response.Cookies("SiteType").Value = "Mobile Site"
SiteType = "Mobile Site"
Response.Redirect(Request.Url.ToString)
End If
Catch ex As Exception
End Try
End Sub
End Class
On click of the MOBILE SITE LinkButton
at the top right corner of the page, the SwitchToMobileSite(Me)
method will be executed. The method will be executed in the Page_PreInit Event
because a page masterpage can only be set dynamically from the PreInit
.
Page code-behind (VB)
Partial Class _Default
Inherits System.Web.UI.Page
Protected Sub Page_PreInit(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreInit
SwitchToMobileSite(Me)
End Sub
End Class
Step 5
Master_mobile.master (HTML section)
This time around in the mobile masterpage, the CSS file will be changed to Style_mobile.css.
<link href="Styles/Site_mobile.css" rel="stylesheet"
type="text/css" media="all" />
Step 6
web.config
The class is being referenced as a namespace so it can be easily used in all pages.
<configuration>
<system.web>
<compilation debug="true" strict="false"
explicit="true" targetFramework="4.0"/>
<pages maintainScrollPositionOnPostBack="false">
<namespaces autoImportVBNamespace="true">
<add namespace="MainClass" />
</namespaces>
</pages>
</system.web>
</configuration>
Point of Interest
The pattern used in accomplishing this task can be implemented easily without stress. Feel free to explore, modify and implement the code.