SlideShare una empresa de Scribd logo
1 de 9
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.
RWD Companions
•   Semantic Web
•   Mobile-First Design Approach
•   Designing for Emotion
•   Graceful Degradation
•   Progressive Enhancement
•   Flexible Grid
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

Más contenido relacionado

Similar a Responsive Web Design for Enterprise Apps

Metadata & Interoperability: Free Tools
Metadata & Interoperability: Free ToolsMetadata & Interoperability: Free Tools
Metadata & Interoperability: Free ToolsMike Jennings
 
Designing Experiences that Drive Consumer Engagement
Designing Experiences that Drive Consumer EngagementDesigning Experiences that Drive Consumer Engagement
Designing Experiences that Drive Consumer EngagementAshley Dzick
 
What is SaaS vs Open Source | Open Source CMS (Content Management System) vs ...
What is SaaS vs Open Source | Open Source CMS (Content Management System) vs ...What is SaaS vs Open Source | Open Source CMS (Content Management System) vs ...
What is SaaS vs Open Source | Open Source CMS (Content Management System) vs ...ClickTecs
 
Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)
Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)
Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)Carrie Anton
 
Kevin Whinnery: Best Practices for Cross-Platform Mobile Development
Kevin Whinnery: Best Practices for Cross-Platform Mobile DevelopmentKevin Whinnery: Best Practices for Cross-Platform Mobile Development
Kevin Whinnery: Best Practices for Cross-Platform Mobile DevelopmentAxway Appcelerator
 
Technology Planning for River Groups
Technology Planning for River GroupsTechnology Planning for River Groups
Technology Planning for River GroupsSean Larkin
 
SharePoint as a Business Platform Why, What and How? – No Code
SharePoint as a Business Platform Why, What and How? – No CodeSharePoint as a Business Platform Why, What and How? – No Code
SharePoint as a Business Platform Why, What and How? – No Codedox42
 
Improving the User Experience of UiPath Apps
Improving the User Experience of UiPath AppsImproving the User Experience of UiPath Apps
Improving the User Experience of UiPath AppsDianaGray10
 
Sitecore, the good, the bad and the ugly Code Camp 2016 Skopje
Sitecore, the good, the bad and the ugly Code Camp 2016 SkopjeSitecore, the good, the bad and the ugly Code Camp 2016 Skopje
Sitecore, the good, the bad and the ugly Code Camp 2016 SkopjeAleksandar Trajanovski
 
Multi Platform User Exerience
Multi Platform User ExerienceMulti Platform User Exerience
Multi Platform User ExerienceTanya Zavialova
 
Data warehouse and User interface
Data warehouse and User interface Data warehouse and User interface
Data warehouse and User interface RabiaIftikhar10
 
Effective course design
Effective course designEffective course design
Effective course designWCET
 
The Global Marketing Center: A Crafter CMS and Alfresco Case Study
The Global Marketing Center: A Crafter CMS and Alfresco Case StudyThe Global Marketing Center: A Crafter CMS and Alfresco Case Study
The Global Marketing Center: A Crafter CMS and Alfresco Case StudyCrafter Software
 
Sharpest tool in the box: Choosoing the best authoring tool for your learning...
Sharpest tool in the box: Choosoing the best authoring tool for your learning...Sharpest tool in the box: Choosoing the best authoring tool for your learning...
Sharpest tool in the box: Choosoing the best authoring tool for your learning...Brightwave Group
 
UXD - A quick overview on what you need to work with your UX team
UXD - A quick overview on what you need to work with your UX team UXD - A quick overview on what you need to work with your UX team
UXD - A quick overview on what you need to work with your UX team Guilherme Rodrigues
 
Model-driven and low-code development for event-based systems | Bobby Calderw...
Model-driven and low-code development for event-based systems | Bobby Calderw...Model-driven and low-code development for event-based systems | Bobby Calderw...
Model-driven and low-code development for event-based systems | Bobby Calderw...HostedbyConfluent
 
Design Like a Pro: Building Better HMI Navigation Schemes
Design Like a Pro: Building Better HMI Navigation SchemesDesign Like a Pro: Building Better HMI Navigation Schemes
Design Like a Pro: Building Better HMI Navigation SchemesInductive Automation
 
Design Like a Pro: Building Better HMI Navigation Schemes
Design Like a Pro: Building Better HMI Navigation SchemesDesign Like a Pro: Building Better HMI Navigation Schemes
Design Like a Pro: Building Better HMI Navigation SchemesInductive Automation
 
Mobile App Development: Off the-Shelf vs Platform
Mobile App Development: Off the-Shelf vs PlatformMobile App Development: Off the-Shelf vs Platform
Mobile App Development: Off the-Shelf vs PlatformDipesh Mukerji
 

Similar a Responsive Web Design for Enterprise Apps (20)

Metadata & Interoperability: Free Tools
Metadata & Interoperability: Free ToolsMetadata & Interoperability: Free Tools
Metadata & Interoperability: Free Tools
 
Designing Experiences that Drive Consumer Engagement
Designing Experiences that Drive Consumer EngagementDesigning Experiences that Drive Consumer Engagement
Designing Experiences that Drive Consumer Engagement
 
What is SaaS vs Open Source | Open Source CMS (Content Management System) vs ...
What is SaaS vs Open Source | Open Source CMS (Content Management System) vs ...What is SaaS vs Open Source | Open Source CMS (Content Management System) vs ...
What is SaaS vs Open Source | Open Source CMS (Content Management System) vs ...
 
Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)
Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)
Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)
 
Kevin Whinnery: Best Practices for Cross-Platform Mobile Development
Kevin Whinnery: Best Practices for Cross-Platform Mobile DevelopmentKevin Whinnery: Best Practices for Cross-Platform Mobile Development
Kevin Whinnery: Best Practices for Cross-Platform Mobile Development
 
Technology Planning for River Groups
Technology Planning for River GroupsTechnology Planning for River Groups
Technology Planning for River Groups
 
SharePoint as a Business Platform Why, What and How? – No Code
SharePoint as a Business Platform Why, What and How? – No CodeSharePoint as a Business Platform Why, What and How? – No Code
SharePoint as a Business Platform Why, What and How? – No Code
 
Improving the User Experience of UiPath Apps
Improving the User Experience of UiPath AppsImproving the User Experience of UiPath Apps
Improving the User Experience of UiPath Apps
 
Sitecore, the good, the bad and the ugly Code Camp 2016 Skopje
Sitecore, the good, the bad and the ugly Code Camp 2016 SkopjeSitecore, the good, the bad and the ugly Code Camp 2016 Skopje
Sitecore, the good, the bad and the ugly Code Camp 2016 Skopje
 
Multi Platform User Exerience
Multi Platform User ExerienceMulti Platform User Exerience
Multi Platform User Exerience
 
Data warehouse and User interface
Data warehouse and User interface Data warehouse and User interface
Data warehouse and User interface
 
Effective course design
Effective course designEffective course design
Effective course design
 
The Global Marketing Center: A Crafter CMS and Alfresco Case Study
The Global Marketing Center: A Crafter CMS and Alfresco Case StudyThe Global Marketing Center: A Crafter CMS and Alfresco Case Study
The Global Marketing Center: A Crafter CMS and Alfresco Case Study
 
Sharpest tool in the box: Choosoing the best authoring tool for your learning...
Sharpest tool in the box: Choosoing the best authoring tool for your learning...Sharpest tool in the box: Choosoing the best authoring tool for your learning...
Sharpest tool in the box: Choosoing the best authoring tool for your learning...
 
Websites
WebsitesWebsites
Websites
 
UXD - A quick overview on what you need to work with your UX team
UXD - A quick overview on what you need to work with your UX team UXD - A quick overview on what you need to work with your UX team
UXD - A quick overview on what you need to work with your UX team
 
Model-driven and low-code development for event-based systems | Bobby Calderw...
Model-driven and low-code development for event-based systems | Bobby Calderw...Model-driven and low-code development for event-based systems | Bobby Calderw...
Model-driven and low-code development for event-based systems | Bobby Calderw...
 
Design Like a Pro: Building Better HMI Navigation Schemes
Design Like a Pro: Building Better HMI Navigation SchemesDesign Like a Pro: Building Better HMI Navigation Schemes
Design Like a Pro: Building Better HMI Navigation Schemes
 
Design Like a Pro: Building Better HMI Navigation Schemes
Design Like a Pro: Building Better HMI Navigation SchemesDesign Like a Pro: Building Better HMI Navigation Schemes
Design Like a Pro: Building Better HMI Navigation Schemes
 
Mobile App Development: Off the-Shelf vs Platform
Mobile App Development: Off the-Shelf vs PlatformMobile App Development: Off the-Shelf vs Platform
Mobile App Development: Off the-Shelf vs Platform
 

Último

All These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFAll These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFMichael Gough
 
Accelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessAccelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessWSO2
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsRavi Sanghani
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Kaya Weers
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfIngrid Airi González
 
Infrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsInfrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsYoss Cohen
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityIES VE
 
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security ObservabilityGlenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security Observabilityitnewsafrica
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality AssuranceInflectra
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Alkin Tezuysal
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...Nikki Chapple
 
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...BookNet Canada
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Strongerpanagenda
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkPixlogix Infotech
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentPim van der Noll
 
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesAssure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesThousandEyes
 
Irene Moetsana-Moeng: Stakeholders in Cybersecurity: Collaborative Defence fo...
Irene Moetsana-Moeng: Stakeholders in Cybersecurity: Collaborative Defence fo...Irene Moetsana-Moeng: Stakeholders in Cybersecurity: Collaborative Defence fo...
Irene Moetsana-Moeng: Stakeholders in Cybersecurity: Collaborative Defence fo...itnewsafrica
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesManik S Magar
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI AgeCprime
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Farhan Tariq
 

Último (20)

All These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFAll These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDF
 
Accelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessAccelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with Platformless
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and Insights
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdf
 
Infrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsInfrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platforms
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a reality
 
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security ObservabilityGlenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
 
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App Framework
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
 
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesAssure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
 
Irene Moetsana-Moeng: Stakeholders in Cybersecurity: Collaborative Defence fo...
Irene Moetsana-Moeng: Stakeholders in Cybersecurity: Collaborative Defence fo...Irene Moetsana-Moeng: Stakeholders in Cybersecurity: Collaborative Defence fo...
Irene Moetsana-Moeng: Stakeholders in Cybersecurity: Collaborative Defence fo...
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI Age
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
 

Responsive Web Design for Enterprise Apps

  • 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