SlideShare ist ein Scribd-Unternehmen logo
1 von 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

Weitere ähnliche Inhalte

Ähnlich wie 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
 

Ähnlich wie 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
 

Kürzlich hochgeladen

Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxLoriGlavin3
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxLoriGlavin3
 
What is Artificial Intelligence?????????
What is Artificial Intelligence?????????What is Artificial Intelligence?????????
What is Artificial Intelligence?????????blackmambaettijean
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity PlanDatabarracks
 
unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxunit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxBkGupta21
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.Curtis Poe
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .Alan Dix
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxLoriGlavin3
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLScyllaDB
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024Lonnie McRorey
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfMounikaPolabathina
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersRaghuram Pandurangan
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii SoldatenkoFwdays
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxLoriGlavin3
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteDianaGray10
 

Kürzlich hochgeladen (20)

Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
 
What is Artificial Intelligence?????????
What is Artificial Intelligence?????????What is Artificial Intelligence?????????
What is Artificial Intelligence?????????
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity Plan
 
unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxunit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptx
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdf
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information Developers
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
 

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