1. Making Your Site Mobile-Ready
Presented by Chris Smith and Mark Werner

2. What is Mobile-Ready?
The ability for your constituents to engage with your institution at any time via any device

3. 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

4. Two Mobile Ready Options
Template Design
Hybrid Design
Both options utilize new flexible forms capability for collecting data and transactions
Both require content to be curated for mobile

5. 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

6. 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

7. Design & Demo

8. Mobile-Ready Template Design
Demo Site:
demofs.imodules.com

9. Mobile-Ready Template Design
Demo Site: demofs.imodules.com
Key Features:
Device Detection
Tablet Templates
Smartphone Templates

10. Mobile-Ready Template Design
Demo Site: demofs.imodules.com
Key Features:
Device Detection
Tablet Templates
Smartphone Templates

11. Mobile-Ready Template Design
Demo Site: demofs.imodules.com
Key Features:
Device Detection
Tablet Templates
Smartphone Templates
Flexible Forms
Affordable Cost

12. Mobile-Ready Hybrid Design
Demo Site:
csdemo.imodules.com

13. Mobile-Ready Hybrid Design
Demo Site: csdemo.imodules.com
Key Features:
One template covers
Desktop, Tablet and Smartphone
Flexible Forms
Fully customizable look and feel

14. 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

15. 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

16. Mobile-optimized Email
Best practice suggestions:
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

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

18. Thank you!