Product Description

Print Friendly and PDF Follow

Product Description

The iModules Mobile Web product offering is an extension of the client's current iModules, made up of three primary components – a design layout that utilizes responsive and adaptive design technology; device detection for identifying the viewing device and responsive forms collecting the transaction information in whichever device is being used.

iModules provides two distinct mobile web offerings - Mobile Ready Template Design and Mobile Ready Hybrid Design:

Mobile Ready Template Design

As a lower cost alternative to the new Hybrid Design Web solution, there is also an option to use a more basic solution based on a standard templates designed and optimized for smartphone and for tablets. This is still a very powerful mobile solution strategy for engagement across devices.

In this case, in addition to the existing client desktop design, iModules provides the client two additional standardized templates for smartphone and tablet. This solution utilizes the new device detection capability in the iModules system to detect the device that is viewing the site, and then automatically deliver the template suited for that device based on the devices viewing size and in some cases whether the device is in landscape or portrait mode.

When the viewing device is detected to be a smartphone by the auto device detection capability, then this template is automatically swapped out for the desktop design. The visitor’s interaction with the forms utilizes the responsive flexible forms capability for online donations, event registration and others, in the same ways as with the iModules Mobile Web experience. While providing less control over the user experience and control of institution look and feel, this template swapping solution is an excellent option for engaging constituents across the desktop, smartphone and mobile environments the mobile environment.

Template Design Example

The first image is the home page users would see on their PC, and below is the what they would see on their mobile phone:

PC Version - Template Design

Mobile Phone Version – Template Design

Content is managed via the Content Management system site map for both the smartphone and tablet content templates, as this content is not displayed to the user in the desktop version. The navigation elements are shared in the smartphone and tablet versions.

Template Design:

  • Includes customized mobile navigation (will have a search box to allow them to search other sections that are not on the mobile nav)
  • Existing mobile clients will have a separate mobile channel in the Site Map. New clients may or may not have a separate mobile channel based on how the site was set up. Content Managers will be able to do a limited amount of customization of the mobile pages.
  • The default areas that are included in the Template Design product are News, Events and a Contact Us page. Clients can pick other areas to include as well. (The whole site map can be included in the Template Design product, but this is NOT recommended. This makes the mobile navigation very crowded and is not user-friendly.)
  • The system will detect the device being used and will automatically switch the user to the mobile version of the content.


Mobile Ready Hybrid Design

Hybrid Design Web is based on a custom site design that is built to include two additional “breakpoints” at predefined viewing sizes set for tablet and smartphone. This in effect provide three different designs within the same overall site design, ensuring that clients have complete control and maintain branding consistency in the look and feel across all devices. All constituents, across all the devices they may use at various times, will have a site experience that clearly reflects the overall institution branding look and feel.

The custom CSS in the Hybrid Design utilizes media queries to determine the nature of the device that this accessing the site and to then deliver the appropriate look and feel for that device.

Hybrid Design Example

The first image is the home page users would see on their PC, and below is the what they would see on their mobile phone:

PC Version - Hybrid Design

Mobile Phone Version - Hybrid Design

The additional component is the recently enhanced iModules form system, which has been modified so that the transaction inputs respond to the viewing device. Because of this, forms in your system will respond and adapt to the screen size and capability of the mobile device. The form inputs will move and and stack in the smaller device viewing areas so that users will have a better user experience interacting with the form. Also, on a desktop a year input may be a mouseclick and a dropdown selection, in the smartphone view it would utilize the year selection capability native to the phone interface.

Hybrid Design:

  • Requires extensive advance planning of page content - choosing what will display on mobile and what won't.
  • The whole site has to be built to accommodate mobile users, but gives you more control of the look and feel.
  • Everything on the site map will display on mobile devices so this must be taken into account when creating a page. Pages will shrink down to display on mobile - it does not redirect to a mobile template. Instead it uses a different style sheet which is designed based on the client's wishes and priorities.
  • No special channel in the site map is created.
  • In the Hybrid Design product, member tools such as Login, First Time login, and a link to Support are available on the mobile nav.

Product Matrix - Template vs. Hybrid

 Template DesignHybrid Design
Supported Platforms Desktop, smartphone and tablet Desktop, smartphone and tablet

Automatically delivers mobile experience

System automatically delivers mobile interface to user


Utilizes automatic device detection capability in iModules platform to deliver appropriate template


Utilizes CSS media queries to determine screen size of viewing device to deliver the appropriate template break point for that device

Responsive Forms / Form Accessibility

Forms respond to device, enabling transactions via mobile device


Single flexible form template


Single flexible form template

eCommerce conducted via existing payment gateway integration Yes Yes
Custom mobile "vanity" URL required No No
Require separate pages for content No No
Only one template required for all devices Yes No
Template designed with multiple adaptive breakpoints No Yes
Number of Design Templates

3 Templates

  • Standard Smartphone
  • Standard Tablet
  • Homepage and internal

2 Templates - custom, multi-breakpoint design for all devices

  • Home
  • Internal
Requires a mobile template separate from desktop version Yes No
Supports custom or match design to main client site

No (Standardized mobile template design)

Multiple templates to manage Yes

No (All navigation is available and navigable)

All pages must have flexible content for mobile accessibility Yes Yes
Supports CMS content
  • News
  • Events
  • Rotators
  • RSS
Yes Yes
Includes support for iModules constituent features
  • Directory
  • Profile
  • Class Notes
  • Etc.


Working throughout 2013 to enhance these features

All iModules user controls supported

  • Advanced Display Designations
  • Scheduled Payments
  • Membership Levels

No - Working to enhance these controls in Q2 2013

  • No
  • No
  • No

No - Working to enhance these controls in Q2 2013

  • No
  • No
  • No
Supports address validation integration Yes (Initium) Yes (Initium)
Supports HEP Gift Matching No No
Implementation Time 4-6 Weeks 5-7 Months



Have more questions? Submit a request