Your SlideShare is downloading. ×
0
Responsive Web Design for Enterprise Apps
Responsive Web Design for Enterprise Apps
Responsive Web Design for Enterprise Apps
Responsive Web Design for Enterprise Apps
Responsive Web Design for Enterprise Apps
Responsive Web Design for Enterprise Apps
Responsive Web Design for Enterprise Apps
Responsive Web Design for Enterprise Apps
Responsive Web Design for Enterprise Apps
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Responsive Web Design for Enterprise Apps

587

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
587
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

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

×