5 things you need to know about TeamSite Mobile module

Share Button

UPDATED September 16, 2014 – to reflect new, on-the-field, experiences delivering Mobile First design…



Starting TeamSite 7.4, HP users can  avail the mobile add-on module. Here are 5 things you need to know about this module:

1. The Mobile Module is an add-on license to TeamSite 7.4. This is a separate license and you will need to contact your HP representative for the actual cost of this license. When installed, the license will activate the mobile add-on features within SitePublisher and LiveSite.


2. Yes, you can implement a completely client-side Responsive Design without using HP’s Mobile Module – however you will lose out on some features mentioned below. An example of a recent website launched in the US, that does NOT use the mobile module and is yet Responsive is the Official Website of the City of New York. Another good example of a completely client-side responsive site that autowoven team implemented is Wyndham Vacation Resorts.  TeamSite’s Mobile module provides you with a hybrid technology that allows you to get the best of both worlds client side responsive and/or server-side responsive design. Working with a good implementation partner will help you make the decision that is right for you. At autowoven our team has implemented both Client Side Responsive as well as used the TeamSite Mobile Module to deliver great results. Bottom line is that, it is not always an either/or solution.

3. You get to Preview your site(s) in over 1400 mobile devices. The ability to preview within the authoring interface (prior to deployment) a complete rendering of your website is really high in most customers’ list of must-have features, and this feature does not disappoint.

In the absence of Mobile Module’s device emulation feature, you could use a pure browser emulators like Browser Stack. Our testing has shown pretty accurate results using Browser Stack, including the ability to catch small idiosyncrasies with iOS devices.


4. The mobile module ships with a database of 1400 device renderings – which pretty much covers every existing Android and Apple devices currently in the market. HP is also promising to provide a frequent mobile device database update – a simple update to the list of devices that you can preview in.


5. Most Responsive Design sites – sites that implement an author-once, render in multiple devices paradigm, fail in the area of performance. Because you are pushing all your CSS, Javascript and Image rendering logic to the client’s browser, you are now dependent upon the device’s processing power and network bandwidth. HP TeamSite, with it’s powerful LiveSite framework does Server-Side payload filtering based on client device. Because your servers are not pushing tons of unnecessary data to your client’s device, you can expect far better performance than a pure Client-Side responsive technology. SitePublisher – the authoring module and LiveSite – the rendering module, achieve this using device specific rendering tags. Here’s a description from HP TeamSite 7.4 manual that explains this in more detail:


Device-Awareness Tags for Mobile Components

TeamSite allows you to create custom mobile/tablet components using device-awareness tags. These tags allow you to target specific device groups and perform actions based on the client device. Adding device-awareness tags within a component’s definition allows you to customize the experience for users. You create and manage device-awareness tags in ContentCenter.

A sample tag is shown below

<img src=”hello.jpg” data-tg-iphone-src=”hello_iphone.jpg”/>

In this example, the tag overwrites the default src attribute of the image tag with

the value hello_iphone.jpg when the page is requested by iPhone devices. Device-awareness tags are always prefixed with the strings
 data-tg-groupname (HTML)
 -tg-groupname in CSS

Device-awareness tags can be used for

 HTML attribute overwriting
 Showing and Hiding HTML blocks  CSS property overwriting 


As with any “Performance” discussion – it is in the hands of the implementor. If RWD media-queries are not used properly or a user embeds a non-web, high resolution digital asset, the page is going to load slow (everything else being equal), regardless of the technology used. It is therefore important to understand that “Performance” discussions are premature without an existing implementation or prototype at hand.


Ask us for more details on how you can implement the Mobile Module of TeamSite!