Software engineering and design experts from Inductive Automation demonstrate how to use the features in Ignition Perspective to redesign common industrial applications into mobile applications that are simple, well-organized, and always in-step with the user’s needs.
3. About Inductive Automation
• Founded in 2003
• HMI, SCADA, MES & IIoT software
• Over 1,900 integrators
• Used by 48% of Fortune 100 companies
• Just released Ignition 8, the new, upgraded
version of our software platform
Learn more at: inductiveautomation.com/about
4. Ignition: Industrial Application Platform
One Universal Platform for HMI, SCADA, MES & IIoT:
• Unlimited licensing model
• Cross-platform compatibility
• Based on IT-standard technologies
• Scalable server-client architecture
• Web-based & web-managed
• Launch on desktop or mobile
• Modular configurability
• Rapid development & deployment
6. Today’s Webinar
Outline
● Session 1 Recap
● Planning Your Project
● Layout Tools & Strategies
● Building Reusable Elements
● Putting It All Together
7. Session 1 Recap
● Responsive 101
● Principles of Mobile Design
● Developing a Design Mindset
● Responsive Layout Patterns
○ + Building with Perspective
8. What is Mobile-Responsive?
Design ‘Responds’ to the User’s Context
Content ‘Responds’ to Screen Size
Developer ‘Responds’ to Changing User Needs
9. Benefits and Drawbacks
Benefits
● Lower development costs over the
lifetime of an application
● Single data model to maintain
● Supports any device size
● Consistency in look and functionality
Drawbacks
● Not one-strategy-fits-all
● Learning curve
10. Mobile Design Principles
1. Touch & Ergonomics
2. Mobile Device Testing
3. Levels of Depth
4. Mobile-First Design
5. Content as UI
6. Declutter
7. Design Systems
11. Mobile Design Principles
Touch & Ergonomics
● Larger input targets
● Leave space between inputs
Mobile Device Testing
● Real devices > emulators
● Design for your user’s context
12. Mobile Design Principles
Levels of Depth
● Progressive disclosure
● More zoom = more details
Mobile-First
● Add features/content as the
available space increases
13. Mobile Design Principles
Content as UI
● Users interact directly with content
● Embrace intuitive actions
Remove UI Clutter
● Space is limited
● Minimize fixed elements
16. Mostly Fluid
Multi-column layout that introduces larger
margins on big screens
A fluid grid reflows the main content and
stacks columns vertically on mobile.
28. A heavier, more custom solution
Different layouts across breakpoints
Swaps components, not just layout
Layout Shifter
29. Check out the live Ignition demo!
Cards on mobile shift to table
component on desktop
demo.ia.io
Building Layout Shifter
30. Segue to Real Projects
● Understand mobile design patterns
● Utilize a strong responsive layout
strategy
● Embrace the mobile-responsive mindset
… Now we’re ready to design a mobile-
responsive application with Ignition 8.
Let’s do this!
48. Component Success!
Creating a ‘Color Swatch’ Template View
a. Choose appropriate Container
b. Use Parameters to send values to (or from) View
c. Use Bindings to ‘bind’ data from Parameters to
component Properties
56. Our Embedded View, Made More Responsive
Images by Scott Domes @ https://medium.freecodecamp.org/even-more-about-how-flexbox-works-explained-in-big-colorful-animated-gifs-
a5a74812b053
70. Wrapping Up
● Style Classes Provide Responsiveness via Media Rules
○ Performant
○ Shareable
○ Use Multiple Style Classes to Add Responsive Tweaks to
Existing Components
○ Mix and Match functionality!