Making iServices Subscriber More Mobile Friendly `
-
Upload
sherman-walton -
Category
Documents
-
view
214 -
download
0
Transcript of Making iServices Subscriber More Mobile Friendly `
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!`