5 things you need to know about TeamSite Mobile module
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.
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
-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!