Responsive Enterprise Apps: How-Tos and What Nots Param Rengaiah @its_param
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
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
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
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.
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.
Tools and Technologies• Flexible Grid, Flexible Images and Media Queries• CSS3• HTML5• JQuery• Modernizr• API-based Services
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