1. Making iServices Subscriber More Mobile Friendly `

2. Why Responsive Design? Improved mobile user experience Device independent Faster, easier to customize Easier to deploy and maintain

3. Becoming fluid and responsive It is easier than you think –One simple Business Rule

4. Before & After: Bemidji Pioneer 2013.5 Fixed width, left navigation not mobile friendly  Can’t see all fields on display  Requires scrolling side-to- side

5. Before: Bemidji Pioneer 2013.5 Rigid Header and Footer  More difficult to match the brand with the main website Image based navigation  Needs more customization

6. After: Bemidji Pioneer 2013.5 Better match to website branding

7. Before & After: Bemidji Pioneer 2013.5 Progress Indication  Moved from horizontal image progress bar to vertical CSS progress bar

8. Before & After: Bemidji Pioneer 2013.5 HTML email  Branding and “quick” links into iServices

9. Before & After: Janesville Gazette 2013.7

12. HTML email  Branding and “quick” links into iServices

13. Mobile Phone Screenshots

14. Mobile Tablet Screenshots

15. Requirements iServices Subscriber version 2013.4+ Bootstrap Cascading Style Sheets (CSS) Bootstrap JavaScript (JS)

16. How to Steps Change Subscriber-Web User Interface Business Rule - Is the layout fluid and responsive to browser screen size? Customize navigation and form buttons Add responsive to FAQ and privacy policy Other CSS customizations Try it out yourself http://tinyurl.com/iservices2014 http://tinyurl.com/iservices2014

17. Technical Details Twitter Bootstrap v2.3.2 CSS/JS Grid layout jQuery v1.9.1

18. More Info iServices Subscriber Manual Responsive Design Configuration Twitter Bootstrap getbootstrap.com/2.3.2/ Responsive Web Design by Ethan Marcotte

19. Questions?

20. Thank You! `