913.888.0772 | imodules.com Making Your Site Mobile-Ready Presented by Chris Smith and Mark Werner

913.888.0772 | imodules.com913.888.0772 | imodules.com

Making Your Site Mobile-ReadyPresented by Chris Smith and Mark Werner

What is Mobile-Ready?

The ability for your constituents to engage with your institution at any time via any device

There is no one-size fits all solution

Mobile Web vs. Mobile Apps• Mobile Web = based on web browser tech• Mobile Apps = based on the native device operating system

Mobile web is our current priority:• Leverages our clients investment in iModules browser-based tech• Availability and compatibility across devices and operating systems

In 2015 iModules will be developing Mobile Apps for both constituents and admin applications

Two Mobile Ready Options

Template DesignHybrid Design

• Both options utilize new flexible forms capability for collecting data and transactions• Both require content to be curated for mobile

Mobile-Ready Template Design

• Lower cost offering with easier to manage content• Based on standardized mobile templates to present content• Uses device detection in iModules platform to determine

viewing device, then delivers the appropriate template• Includes both smartphone and tablet templates with some

branding customization

Mobile-Ready Hybrid Design

• Advanced design option that builds three separate design displays for desktop, tablet and phone

• Uses CSS media queries to determine (query) the device and then adjusts template to the appropriate break point

• Provides clients greater control over the branding look and feel of the mobile interface


Design & Demo


Demo Site:demofs.imodules.com


Key Features:• Device Detection

‒ Tablet Templates‒ Smartphone Templates

Demo Site: demofs.imodules.com








• Flexible Forms• Affordable Cost



Demo Site:csdemo.imodules.com


Key Features:• One template covers

‒ Desktop, Tablet and Smartphone

• Flexible Forms• Fully customizable look

and feel

Demo Site: csdemo.imodules.com

Choosing a Mobile-Ready Option

Here are some things you should consider when trying to decide which product is right for your organization:• Do you have the right size staff to properly support managing your

content?• What is the size of your budget?• Does your organization have strict branding guidelines that require a

consistent look and feel across all devices?• Are only certain portions of your site needed for mobile access or does

the entire site need to be accessible

Managing Content for Mobile• Crop Images to the size you need, on mobile devices

every pixel counts• Stay away from inline styling, let your site’s

stylesheet do the work for you by using paragraph and header styles

• Refrain from using tables, use the Mobile Ready content blocks instead

• Keep your content simple and light

Mobile-optimized Email

Best practice suggestions:• Email width: 320px – 600px• Font sizes: 13px+ body │ 20px+ headlines• Always crop your images to the correct size when you can• Finger friendly buttons: 40px by 40px at a minimum• Minimum content and add plenty of space between elements• Single column is easiest to manage

iModules Mobile Development

• Template and Hybrid Mobile-Ready Design Tech• Flexible Forms• Mobile Ready Content Block• Mobile Email Templates• New Member Profile Page – Q3 2014• New Directory Search Q1 2015• User Interface Revamp of Constituent Features – 2015• Mobile Application Development - 2015


Thank you!

Documents

913.888.0772 | imodules.com Making Your Site Mobile-Ready Presented by Chris Smith and Mark Werner