ProProfs Touch

ProProfs Touch is an optimized version of your site for smartphones and tablets. ProProfs Touch makes your documentation look like a native app in the web browser, with nothing to download or install. It is powered by HTML5 and CSS3 and works on iOS and Android devices.

Benefits:

• Increased reach and extensive self-support mechanism

• Easy to access the help center anywhere on any device

This article covers the following:

• Single-Source Content
• Supported Devices
• Making a Mobile-Friendly Site
• Enabling ProProfs Touch
• Mobile-Only CSS

Single-Source Content

Single-source publishing allows the same content you create for the desktop site to be viewed on smartphones 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.

The knowledge base will open on every iOS & Android device. 

Making a Mobile-Friendly Site

Making a website look nice on desktop/mobile/tablet takes effort. Often companies format pages or apply CSS through the editor that makes a website 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 it will cause problems because the content will not be fluid. Using percentages to limit the object's width is best if you need to define widths. The goal is to make your content fluid to expand or shrink to fill the device's viewport 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 are complicated to read and don't work well on mobile devices.

• 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, ensure 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 include complex code for the font sizes.

• Images - The system automatically scales down pictures to fit onto a page, so you do not have to worry about size.

Enabling ProProfs Touch

1. Log in to your account (as an Administrator), and click Settings.

2. Select the site you want to enable with ProProfs Touch.

3. Click Configure.

4. Go to the Mobile tab.

5. Check Enable Mobile Site to activate this feature.

6. 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 smartphone. This field is default blank; users will see the desktop homepage. If you want to use a different page as the start page, click the Select Other Page option. An overlay will open up with a list of pages. Click on the page title 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. This field is default blank; users will see the desktop home page. If you want to use a different page as the start page, click the Select Other Page option. An overlay will open up with a list of pages. Click on the page title that you want to be the tablet's new start page.

Mobile-Only CSS

By default, the CSS on your desktop & mobile site will be the same. The system also adds additional CSS to make font sizes larger so that content is readable on smaller screens.

To use a mobile-only CSS, switch the Use Mobile CSS option to Yes. To edit the CSS, click edit.

Once you click edit, your desktop site's CSS and some mobile-specific CSS are imported into the editor. You can use this to help you start 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. 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, it will apply the CSS inside the media query.

That is all about ProProfs Touch.