loading Loading...
add chat to your website

ProProfs Touch

ProProfs Touch is an optimized version of your site for smart phones and tablets. ProProfs Touch makes your documentation look and feel like a native app right in the web browser, with nothing to download or install. Powered by HTML5 and CSS3, it works on Apple, Android, BlackBerry, and Windows devices.


Single-Source Content

Single-source publishing allows the same content you create for the desktop site to be viewed on smart phones and tablets with no additional work required. ProProfs automatically detects the device and resolution and then delivers the appropriate display.

Supported Devices

ProProfs Touch is 100% web based, which means there is nothing for you or your customers to download or install. It runs in a device's web browser.  Large images, such as screenshots, are resized to fit smaller screens.  The site will also automatically adapt to vertical and horizontal orientations.

 

Here is a list of supported devices:

 

Apple iPad iOS 4+

Apple iPhone 4S, 4, 3GS iOS 4+

Apple iPod touch iOS 4+

BlackBerry Q10 BB OS 10

BlackBerry Z10 BB OS 10

BlackBerry PlayBook BB Tablet OS 1

BlackBerry 9800 BB OS 6+

Nokia Lumia 920 Windows Phone 8

Nokia Lumia 900 Windows Phone 8

Amazon Kindle Fire Kindle OS 6.2.2

Asus Transformer Prime Android 4 w/Chrome

Motorola Xoom 1, 2 Android 4.0.3+

Motorola Droid Bionic Android 2.3+

Motorola Droid X Android 2.3+

Motorola Droid 2, 3, 4, 5 Android 2.2+

Motorola Atrix Android 2.3+

Samsung Galaxy S1, S2 Android 2.3+

Samsung Galaxy Nexus Android 4 w/ Chrome

HTC Desire Android 2.2+

HTC Desire S Android 2.3+

HTC Evo 4G Android 2.3+

Because of the diversity of Android devices on the market, we can only test so many. This support matrix is not intended to be exhaustive, but to give you an idea of the support for Android devices. Others may be supported that are not listed here.

Making a Mobile-Friendly Site

Making a site look nice on desktop/mobile/tablet takes effort. Often companies format pages or apply CSS through the editor that makes a site look good on desktop but not mobile/tablet.

 

This section will outline some best practices to ensure that the same content you create for desktop is also mobile and tablet friendly.

  • Fixed widths - Do not define objects in absolute sizes. For example if you have a table or a DIV, do not define it as or . This will cause problems because the content will not be fluid. If you need to define widths, it is best to use percentages to define the object's width.  The goal is to make your content fluid so that it will expand or shrink to fill the devices' view port without requiring the user to scroll horizontally.
  • No Flash - Most mobile phones do not support Flash, so it’s advisable not to include it in your pages. For videos, make sure you use HTML5 players.
  • No frames - Frames just don’t work well on mobile devices, and they’re very difficult to read.
  • Tables - Do not use tables for layout on a page. Also try to avoid tables in general. They aren’t supported on every device. If you do use tables make sure the widths are fluid.
  • No nested tables - If you must use a table, make sure not to nest it in another table.
  • Fewer fonts - Don't assume all the fonts you’re used to having on a computer will be available on mobile devices.
  • Font sizes - It is best to use font sizes as ems or percentages, such as 150% instead of 13px. See Mobile-Only CSS (below) for more information on scaling font sizes. Also avoid applying font sizes using the editor because this will apply inline CSS, which will hard code the font sizes.
  • Images - The system will automatically scale down images to fit onto a page, so you do not have to worry about the size.

Enabling ProProfs Touch

  1. Log in to your account (as an Administrator), and click Settings.
  2. Click Configure & Brand.
  3. Select the site you want to enable with ProProfs Touch.
  4. Check Enable ProProfs Touch to activate this feature.
  5. Click Save.

Additional options:

  • Start page for phones - The start page is the page that first shows when a user visits your site on any smart phone. By default this field is blank and the desktop home page will be used. If you want to use a different page as the start page, click the Select button. An overlay will open up with a list of pages. Click on the page title of the page that you want to be the new start page for phones.
  • Start page for tablets - The start page is the page that first shows when a user visits your site on any tablet. By default this field is blank and the desktop home page will used. If you want to use a different page as the start page, click the Select button. An overlay will open up with a list of pages. Click on the page title of the page that you want to be the new start page for tablets.
A page that was set as start page for phones or tablets will not have an entry in the Table of Contents for end-users/logged out users but the page will act as your site's home page when ProProfs detects that the user is viewing the help site from a phone or tablet. 

New Home Page

This section only applies if you signed up for a ProProfs account before 8/1/2013.  The home page is the page that shows up first when a user visits your site. This is also referred to as the start page. When you first signed up for ProProfs, a default home page was added to your account. With the release of ProProfs Touch we have updated the default home page to be responsive, so the same page works on desktops, tablets, and smart phones.

 

To use the new home page you will be required to update your current home page. To do so, please download the latest home page HTML and the latest CSS.

  • Open the file and copy all the HTML.
  • Edit your home page in ProProfs and view the page Source from the editor.
  • Select all and paste it in the new HTML.
  • Once updated you will be required to update the page links and any content.

Hiding Content from Mobile or Tablet Devices or Both

If you do not want certain content to display on mobile phones or tablets, you can hide it using a custom HTML attribute: exclude_device="mobile,tablet"

 

If a user views the page on a tablet or mobile phone, the content will not be displayed. Here are a few examples:

 

<div exclude_device="mobile,tablet" id="searchContainer">content here</div>
<h2 exclude_device="mobile,tablet">Have a question you need help with?</h2>

 

The values include: mobile, tablet

 

To apply the attribute, click Source from the page editor toolbar, and type in the attribute on the desired element.

 

This is a temporary solution until we have a more robust conditional content feature available for pages, folders, and content.

Themes

Our revolutionary theme builder allows you to customize your mobile site to match any color scheme. Change the colors of the toolbar, icons, buttons, and more to match your company brand. Our name is never mentioned anywhere. There is no way for anyone to know you are using ProProfs.

To generate a new theme

  1. Select the desired colors.
    • Color most elements derive their color scheme from
    • Color used on elements such as buttons and icons
    • Color used for the neutral elements such as for toolbars
  2. Click Save.

A theme will be generated. You can view it by visiting your site on a mobile phone or tablet. If you want to revert back to the original color, click under the input on Revert theme to default. This will restore the original color.

Mobile-Only CSS

By default the CSS used on your desktop site will be used on the mobile site. Additional CSS is also added by the system to make font sizes larger so that content is readable on smaller screens. 

To use a mobile-only CSS, select Use Mobile CSS. To edit the CSS, click edit

 

Once you click edit, your desktop site's CSS and some mobile-specific CSS is imported into the editor. You can use this to help you get started, or delete it and start from scratch.

 

The mobile-specific CSS that gets imported uses media queries. This CSS is optional and can be deleted.  However, media queries allow you to target specific devices like the iPhone 5. A media query consists of expressions that limit the CSS scope by feature, such as the device's screen width. If the expression is true (and only if), then the CSS inside the media query will get applied.  

Example of a media query:

 

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
  .hiq-t {
  font-size: 115% !important;}
 
  .hiq-t  .classname{
   color: red;}
}

 

The above CSS means that the minimum device screen width is 320px and the maximum is 480px. If the user is on a device that matches this rule, then the CSS inside the media query will be applied.   

 

To prevent conflicts with other CSS, you must begin each statement with .hiq-t such as .hiq-t H1, .hiq-t .classname

 

For more information on media queries.