Welcome Dialog

Welcome to the Community!

We have a brand new look! Take a tour with us and explore the latest updates on Adobe Support Community.


Deploying your site across Mobile and Tablet devices

Mentor ,
Mar 26, 2012 Mar 26, 2012

Copy link to clipboard

Copied

In this tutorial, you will learn how to use device classes to setup device specific CSS, provide device specific content or redirect users to another URL based on what device the customer is using to view the website. This allows you to  produce  different user experiences on different devices.

This tutorial requires a general understanding of CSS and JavaScript, for details on creating and customizing site wide templates for specific devices, see this article.

Device Classes

The system will  detect server-side what device is used to access a page and maps it to one of these device classes:

  • desktop
  • tablet
  • phone

The mapping is done based on user agent strings and some internal rules. If the device cannot be determined by its user agent or it does not fall in any of the existing device classes, the default desktop device class will be used.  The module {system_visitorDeviceClass} renders the device class value (e.g. phone) corresponding to the device used to browse the site. This module won't be counted against the  75 modules limit per page.

Device-specific styling

You may want to provide specific styling for certain devices, there are two options:

1. Including device-specific stylesheets as below:

<link rel="stylesheet" type="text/css" href="/css/{system_visitorDeviceClass}.css" />

This will include desktop.css, tablet.css or phone.css.

2. Include the tag as a class on your body tag

<body class="{system_visitorDeviceClass}">

Redirect visitors to a mobile site version

Using javascript, you could test for specific device class values and performs custom actions. For example, a site homepage could redirect phone visitors to a focused mobile website:

<head>
<script type="text/javascript">           
if ('{system_visitorDeviceClass}' == 'phone') {
        window.location = 'http://mysite.com/m/';           }        
</script>
</head>

Device-specific content

If you'd like to serve device-specific content  as part of a template or page, you could achieve this by using the device classs as part of a content holder name as below:

<!-- {system_visitorDeviceClass} -->
{module_contentholder, name="home_{system_visitorDeviceClass}"} 

The above snippet will include one of these content holders: home_desktop, home_tablet, home_phone

Technical details

Choosing what device class is used is done by the following criteria, in priority order:

  1. URL query string parameter, if set (e.g. ?visitorDeviceClass=phone). This will also set a cookie with the specified value. ?visitorDeviceClass=auto will clear the cookie and enable again auto-detection.
  2. device class cookie, if set
  3. user agent string auto-detection and defined device classes capabilities
  4. default content

Best practices

Here are some articles outlining best practices when building multiscreen sites:

TOPICS
Documentation

Views

7.3K

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jun 03, 2012 Jun 03, 2012

Copy link to clipboard

Copied

Mario,

Really learn a lot from your input. Thank you again for the help on htmlonlymenus. Got it working fine now.

Was curious after reading this tutorial about your mgtrain site that you showed me

http://mgtrain.businesscatalyst.com/Home.htm

Was curious if it displayed fine on an iPad in landscape and protrait mode, and it did perfect adjustments. But in inspecting the site with FireBug and Web Inspector I did not see any code that performed any of the above examples. How did you get it to display properly on an iPad without any system_visitorDeviceClass detetion, or can I just not see it with these tools?

rocky

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Mentor ,
Jun 04, 2012 Jun 04, 2012

Copy link to clipboard

Copied

HI Rocky,

That site is one of those Online Business Builder templates and I guess it's just the way in which it's been coded. I guess you need to use fluid design to make the site look good on desktops as well as tablets.

Cheers,

-mario

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jun 05, 2012 Jun 05, 2012

Copy link to clipboard

Copied

Mario,

I think you're right.

Rocky

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jul 16, 2012 Jul 16, 2012

Copy link to clipboard

Copied

How does this work with ecommerce and catalogs, etc - ? 🙂

My boss setup Mobify but the BC platform keeps altering the code, even though its in a cdata tag - so we are trying to figure out the best alternative for a mobile site where our customers and distributors can place an order. Right now we are using responsive css  but it doesnt render the "cart" part correctly...


Thanks,

Tom

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jul 20, 2012 Jul 20, 2012

Copy link to clipboard

Copied

Mario - here is a question for you- If you redirect to a mobile site version from a site's home page, then want a link on the mobile version giving users the option to view the full site, how do you recommend linking back without the mobile detection kicking in again?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 20, 2012 Jul 20, 2012

Copy link to clipboard

Copied

Well your mobile redirection you should do based on a set cookie. So set the cookie first time around.

Replace the cookie with an overide value that you always check for when the site loads. IF that cookie exists then go to the full version.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jul 23, 2012 Jul 23, 2012

Copy link to clipboard

Copied

Thanks, Liam!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Nov 27, 2012 Nov 27, 2012

Copy link to clipboard

Copied

Where can I find information on what Adobe uses to categorise the different devices? Is it done via pixel size and if so what are the breakpoints?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Nov 27, 2012 Nov 27, 2012

Copy link to clipboard

Copied

Hi Shane,

Adobe says nothing about your device.

How BC handles device detection is shown above with the tag and Mario shows you how to use it.

But to do things with CSS you use Media queries.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Nov 27, 2012 Nov 27, 2012

Copy link to clipboard

Copied

Hi Liam, Yes I did mean BC when I talking about Adobe.

I am trying to find out how they define the different 'devices' for which you then use the tags.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Nov 27, 2012 Nov 27, 2012

Copy link to clipboard

Copied

User Agent

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jan 31, 2014 Jan 31, 2014

Copy link to clipboard

Copied

LATEST

Hi Liam,

Android tablets are not recognized properly. They appear as being a phone. Is there no difference between the user agent of Android phone and tablet? iOS is detected properly.

Regards, Dennis

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Dec 10, 2012 Dec 10, 2012

Copy link to clipboard

Copied

My colleague has a HTC Evo and it comes up as a Desktop device. How is BC determining whether a device is a phone?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jan 31, 2014 Jan 31, 2014

Copy link to clipboard

Copied

Hi,

i just tested all available Android tablet devices at Browser Stack, and each one shows the mobile (phone) version of my website, which is wrong. So your device detection fails when it comes to Android Tablets. iPad works fine (in any version).

Although I might have made a mistake, I believe that you definitely should check and fix your detection criteria when it comes to Android devices!

Regards, Dennis

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines