The document discusses how to create responsive enterprise applications. It recommends focusing on context, content, and users rather than devices or platforms. Developers should use techniques like flexible grids and break complex processes into simple interactions. Personas should be defined and the interface should use conversational language tailored to different user types. The content emphasizes creating emotional connections and adapting to user behaviors.

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