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

Slides:



Advertisements
Similar presentations
Coding a Responsive HTML
Advertisements

RESPONSIVE AND MOBILE DESIGN BY: CHRIS PASQUARETTE APRIL, 2013.
What is jQuery Mobile? How to use it? Doncho Minkov Telerik Corporation Technical Trainer.
Cascading Style Sheets
1 Web Developer & Design Foundations with XHTML Chapter 9 Key Concepts.
Web Pages and Style Sheets Bert Wachsmuth. HTML versus XHTML XHTML is a stricter version of HTML: HTML + stricter rules = XHTML. XHTML Rule violations:
Sculpt Framework Mobile-First with Progressive Enhancement.
Mobile at USC Common Solutions Group University of Minnesota, June 2011.
| imodules.com Mobile Templates: It’s time to go responsive! Presented by Chris Smith, Design Services Team Lead.
Let me control over my pages: Tables, Frames, and CSS.
| imodules.com Building Time-Saving Templates Presented by Chris Smith, Design Services Team Lead.
| imodules.com Building Time-Saving Templates Presented by Chris Smith, Design Services Team Lead.
Responsive Wed Design : An Emerging Technology Archana Jain.
Developing Content for Mobile Devices Larry D. Lee Web Developer for K4Health.
LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE HTML and CSS 8th Edition Chapter 12: Building Responsive Webpages.
TUTORIAL 8: Enhancing a Web Site with Advanced CSS
CIT 256 Mobile Web Development Dr. Beryl Hoffman.
| imodules.com Making Your Site Mobile-Ready Presented by: Mark Werner & Chris Smith.
Principles of Web Design 6 th Edition Chapter 2 – Web Site Design Principles.
UNIT 7 MOBILE APPLICATIONS. OBJECTIVES  CO3 Create a website that is optimized for viewing on a mobile device. 2.
CMS Confusion….You only need one ! November 2012 Chris Schofield
Using Styles and Style Sheets for Design
Basic Responsive Design Techniques. Let’s take a look at this basic layout. It has a header and two columns of text, in a box that is centered on the.
ASBDC Annual Conference Grapevine, TX September © 2014 Watermelon Mountain Web Marketing2 Jan Zimmerman, Author Web Marketing for Dummies Social.
| imodules.com Summer 2013 Release Review Presented by Mark Werner Director of Product Management.
Responsive design - Bedrock to our site Responsive site templates included.
Copyright 2012 Adobe Systems Incorporated. All rights reserved. ® Copyright 2010 Adobe Systems Incorporated. All rights reserved. ® Copyright 2012 Adobe.
Presented by Mark Thompson High Level Overview and Demo.
Cascading Style Sheets: Got Branding?. What is CSS? CSS = Cascading Style Sheets Styles define how HTML (web) elements are displayed. One (or more) style.
Chapter 2 Developing a Web Page. A web page is composed of two distinct sections: – The head content – The body Creating Head Content and Setting Page.
Mr. Justin “JET” Turner CSCI 3000 – Fall 2015 CRN Section A – TR 9:30-10:45 CRN – Section B – TR 5:30-6:45.
| imodules.com Product Roadmap Presented by Mark Werner Director of Product Management.
Proprietary and Confidential S TRONG V IEW M ARKETING S ERVICES TAKING YOUR MOBILE.
Strategies for Building Mobile Apps Using ArcGIS API for JavaScript Andy Gup, Lloyd Heberlie.
Introduction to HTML. What is HTML?  Hyper Text Markup Language  Not a programming language but a markup language  Used for presentation and layout.
| imodules.com Best Practices in Content Management Craig Juneau / Web Designer.
Designing web pages for handheld mobile devices Improving the client experience.
Forms and tables NOTE THAT FOR THE FORMS AND IFRAMED CONTENT TO BE RESPONSIVE THE CONTENT OWNER NEEDS TO MAKE THEM RESPONSIVE ACCORDING TO INTERNET RESPONSIVE.
| imodules.com Best Practices in Content Management Craig Juneau / Web Designer.
Responsive Web Designing Using CSS3 & HTML5 -Sandip Jadhav “We are building a web, for all device ”
Web Design: Responsive Layouts Sarah Murto 09/29/ W - Graduate Workshop.
| imodules.com HTML Best Practices: The Key to a Successful Starts with the Template Presented by Chris Smith, Manager of Design.
© 2012 Adobe Systems Incorporated. All Rights Reserved. Copyright 2012 Adobe Systems Incorporated. All rights reserved. ® REUSABLE DESIGN.
Responsive Design Design that Adapts to Different Devices SoftUni Team Technical Trainers Software University
GO MOBILE. GO RESPONSIVE. 185 mil mobile internet users in India
| imodules.com Demystifying Website Redesigns Presented by: Chris Smith & Chris Grosdidier.
| imodules.com Bringing It All Together – Planning for Success with iModules Presented by Jennifer McGee, Engagement Manager.
 An HTML, CSS, Javascript framework you can use as a basis for creating web sites  Uses CSS settings, fundamental HTML elements styled and enhanced.
| imodules.com How to Use Encompass like an iModules Designer Presented by Craig Juneau, Erin Messel & John Stringer iModules Design Team.
An Introduction to JQuery Mobile By Trevor Seeney.
Leveraging Web Content Management in SharePoint 2013 Christina Wheeler.
| imodules.com It’s a Mobile World Out There, Shouldn’t Your be as Well? Presented by Chris Smith, Manager of Design Services.
Mobile Application Development Kevin Payne & Andi Saputra JWH Group.
Paul Hassall Pets At Home Mobile Commerce Deployment.
Basic Elements of Responsive Web Design Jason Bengtson, MLIS, AHIP Emerging Technologies/R&D Librarian UNM Health Sciences Library and Informatics Center.
1 Company Confidential Need a Mobile DotNetNuke Site? Get One the Quick and Easy Way Using CSS Media Queries Amelia Marschall Partner & Creative Director.
I MPORTANT E LEMENTS IN R ESPONSIVE D ESIGNING OF E COMMERCE W EBSITES By TOPS Technologies
© 2012 DigitalDay | MOBILE WEB DESIGN PRINCIPLES Best Practices Workshop 1.
Web Design Principles. Designing a Website Choice of a site color scheme. Choice of text font and size. Placeholder text. Use of white space. Location.
DESKALERTS. INTERNAL COMMUNICATIONS | | DeskAlerts Enterprise Edition Features.
iModules Introduction, Possibilities and Next Steps
A better approach to mobile
Responsive Web Pages.
Styling For Print From Screen to Paper
Making Your Site Mobile-Ready
TEMPLATE.
Introducing the New Directory Search
Go Mobile with MX! Enhanced Responsiveness in MX 8.2
WEB DESIGN FOR MULTIPLE SCREENS
Calidad de Conducción y Seguridad Vial
Presentation transcript:

| imodules.com 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

| imodules.com Design & Demo

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

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

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

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

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

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

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

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

| imodules.com Thank you!