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.

2. Moderator
Don Pearson
Chief Strategy Officer,
Inductive Automation

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

5. Presenters
Perry Arellano-Jones
Senior Software Engineer,
Inductive Automation
Ray Sensenbach
UI/UX Designer,
Inductive Automation

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

14. Mobile Design Principles
Designing Systems
● Create design systems, not pages
● Reduce “design debt”
● Design reusable components

15. Responsive Layout Patterns
1. Mostly fluid
2. Column drop
3. Off canvas
4. Tiny tweaks
5. Layout shifter

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.

17. Simple column layout
Max-width for column container
Styles for centering View
Building Mostly Fluid

18. Simple column layout
Max-width for column container
Margin `0 auto` for centering
Building Mostly Fluid

19. Simple column layout
Max-width for column container
Margin `0 auto` for centering
Building Mostly Fluid

20. Off Canvas
Move content off-screen
Content is one click away

21. Leverage Perspective docking
Docked views provide on-demand
content and menus for the user
Building Off Canvas

22. Leverage Perspective docking
Docked views provide on-demand
content and menus for the user
Building Off Canvas

23. Leverage Perspective docking
Docked views provide on-demand
content and menus for the user
Building Off Canvas

24. Column Drop
Similar to mostly fluid, without
the fluid content
Content size remains fixed,
dropping to full-width for mobile

25. Column container
Breakpoint container
Docks
Building Column Drop

26. Content, not layout changes
Style changes to support usability
Tiny Tweaks

27. Leverage style classes
Increase legibility and spacing between
mobile and desktop contexts
Building Tiny Tweaks

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!

31. Project Planning
1. Understand the Requirements

32. Project Planning
1. Understand the Requirements
2. Plan Your Design Using Wireframes

33. Use Wireframes to Plan

34. Project Planning
1. Understand the Requirements
2. Plan Your Design Using Wireframes
3. Leverage Project Inheritance

35. Project Inheritance
Inheritable
Project A Project B B inheriting A

36. Project Planning
1. Understand the Requirements
2. Plan Your Design Using Wireframes
3. Leverage Project Inheritance
4. Start with a Design System

37. Starting Our Project
❏ Requirements
❏ Wireframe Design
❏ Project Inheritance
❏ Design System

38. What Goes Into Our Design System?

39. Start a Design System

40. Our First Responsive Component

41. Our First Responsive Component

42. Color Swatch Component

43. Color Swatch Component

44. Color Swatch Component

45. Color Swatch Component

46. Color Swatch Component

47. Color Swatch Component

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

49. Using Our Embeddable View

50. Using Our Template View

51. Configuring Our Embedded View

52. Using Our Embeddable View

53. Testing Our Base Palette

54. Testing Our Base Color Palette

55. Our Embedded View, Made More Responsive

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

57. Our Embedded View, Made More Responsive

58. Our Embedded View, Made More Responsive

59. Tiny Tweaks with Style Classes
Stylistic changes to same content, same layout
● Text & Font
● Padding Around Elements
● Borders and Highlights

60. Tiny Tweaks to Text
Example Text Style Class

61. Tiny Tweaks to Text

62. Tiny Tweaks to Text
Text Sample Color Swatch

63. Tiny Tweaks to Text
Use Transforms to Conform Parameter Data to Your Needs

64. Tiny Tweaks to Text

65. Tiny Tweaks to Text

66. Tiny Tweaks to Text

67. Tiny Tweaks with Style Classes
min-width
320px - Mobile Portrait
480px - Mobile Landscape
768px - Tablet Portrait
1024px - Desktop/Ipad Landscape
1600px - Desktop Browser

68. Tiny Tweaks with Style Classes

69. Tiny Tweaks with Style Classes

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!

71. Additional Resources
● “Official Perspective Documentation,” Inductive Automation
● “Views and Containers in Perspective,” Ignition Docs
● “A Complete Guide to Flexbox,” CSS Tricks
● “Responsive Patterns,” Brad Frost
● “Atomic Design,” Brad Frost