1. Responsive Enterprise Apps:
How-Tos and What Nots
Param Rengaiah
@its_param

2. Current Status of Enterprise Apps
• Fixed for a screen resolution
• Fixed for device or platform
• Not supported on all browsers
• Focus just on the business needs, not users
• You will get only “Filth” in Filthy-Rich client interface
• No emotional connection
• Tight binding to specific tools / technologies

3. Responsive Approach
• Focus on the context
• Focus on the content
• Focus on the user
• Keep it simple, for the user
• Give your application a Personality
• Use Textures, Icons, Color Themes and Typography
• API-centric and AJAX based implementation

4. Focus on the context
• Layouts – Horizontal vs. Vertical
• Controls for Interaction – Left, Right, Top or Bottom
• Show what’s essential for the context - Mapmaker
technique
• Context-aware content formatting
• Platform-aware Tools and Technologies

5. Focus on the content
• Break down complex business process into simple
independent interactions.
• Make the controls and content accessible to all platform.
• Don’t design for mouse, keyboard interface, assume
touch first.
• Ask what’s must, use appropriate defaults for rest.

6. Focus on the user
• Define Personas for your system users.
• Develop language as appropriate for your Personas.
• Don’t create forms, create conversations.
• Don’t force your users to follow your choice - offer
explanations and alternatives.
• Don’t impose - be gentle, be humane.
• Remember your users behaviors and adopt.

7. RWD Companions
• Semantic Web
• Mobile-First Design Approach
• Designing for Emotion
• Graceful Degradation
• Progressive Enhancement
• Flexible Grid

8. Tools and Technologies
• Flexible Grid, Flexible Images and Media Queries
• CSS3
• HTML5
• JQuery
• Modernizr
• API-based Services

9. Implementation Details
• Guidelines for CSS
• Guidelines for Markup
• Prototyping as part of development iterations
• Alternative Form Elements -
o On-Off Slider instead of checkbox
o Pull-Downs instead of Radio Buttons and Checkbox Groups
o Use New HTM5 Input Elements
o Placeholders instead of field labels
• Self-Adjusting Data Grids