SlideShare uma empresa 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

Mais conteúdo relacionado

Semelhante a Responsive Web Design for Enterprise Apps

Technology Planning for River Groups
Technology Planning for River GroupsTechnology Planning for River Groups
Technology Planning for River Groups
Sean Larkin
 
Multi Platform User Exerience
Multi Platform User ExerienceMulti Platform User Exerience
Multi Platform User Exerience
Tanya Zavialova
 
Effective course design
Effective course designEffective course design
Effective course design
WCET
 
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
 
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
Dipesh Mukerji
 

Semelhante 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

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Último (20)

Spring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUKSpring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Cyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdfCyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdf
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 

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