1. 913.888.0772 | imodules.com 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. 913.888.0772 | imodules.com Design & Demo

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

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

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

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

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

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

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: 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

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

18. 913.888.0772 | imodules.com Thank you!