Responsive Web Design for Enterprise Apps

Transcript

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