Making Your Site Mobile-Ready Presented 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 Design Hybrid 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

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

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

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

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

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

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

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!