Making iServices SubscriberMore 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 2013.5

Fixed width, left navigation not mobile friendly

Can’t see all fields on display

Requires scrolling side-to-side

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

After: Bemidji Pioneer 2013.5

Better match to website branding

Before & After: Bemidji Pioneer 2013.5

Progress Indication Moved from

horizontal image progress bar to vertical CSS progress bar

Before & After: Bemidji Pioneer 2013.5

HTML email Branding and

“quick” links into iServices

Before & After: Janesville Gazette 2013.7

Before & After: Janesville Gazette 2013.7

Before & After: Janesville Gazette 2013.7

Before & After: Janesville Gazette 2013.7

HTML email Branding and

“quick” links into iServices

Mobile Phone Screenshots

Mobile Tablet Screenshots

Requirements

• iServices Subscriber version 2013.4+• 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 yourselfhttp://tinyurl.com/iservices2014

Technical Details

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

More Info

• iServices Subscriber Manual Responsive Design Configuration

• Twitter Bootstrapgetbootstrap.com/2.3.2/

• Responsive Web Design by Ethan Marcotte

• Questions?

Thank You!`