Making iServices Subscriber More Mobile Friendly `

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

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

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

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

After: Bemidji Pioneer Better match to website branding

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

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

Before & After: Janesville Gazette

HTML  Branding and “quick” links into iServices

Mobile Phone Screenshots

Mobile Tablet Screenshots

Requirements iServices Subscriber version Bootstrap Cascading Style Sheets (CSS) Bootstrap JavaScript (JS)

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

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

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

Questions?

Thank You! `