This document discusses responsive design principles for mobile applications. It covers topics like mobile design patterns, touch optimization, levels of depth, mobile-first design, and content as UI. It also describes common responsive layout patterns like mostly fluid, column drop, layout shifter, tiny tweaks, and off canvas. The document emphasizes that responsive design results in less work, more usability, and enables a mobile-focused mindset when building applications in Ignition 8.

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
● Responsive 101
● Mobile Design Principles
● A New Design Mindset
● Responsive Layout Patterns

7. Disclaimer
Subjects in the mirror may be deeper
than they appear!
Please provide feedback
What do you want to learn?

8. How did we get here?
● Proliferation of mobile devices
● Panning and scrolling
● Device detection and redirection
● Responsive introduced in 2010

9. A Common Desktop Site, circa 2005
● Common pre-mobile design
● Fundamentally usable on desktop
● Breaks down on mobile

10. Zoom Zoom

11. Early Mobile Solutions

12. Mobile-Specific Sites
Pros
● Improved Usability on Mobile
● Interaction & Glanceability
● Improved Readability
● Focus on Mobile Users
Cons
● New Product -> Additional Short and
Long-Term Costs
● Additional Complexity
● Difficulty with Feature Parity

13. The Birth of Responsive Design

14. So, What is ‘Responsive’?
Layouts and data adapt to their environment
New layout strategies allow apps to work well
across many screen sizes

15. Benefits of Responsive Design
● Lower development costs over
lifetime of application
● Single data model to maintain
● Support any device size
● Consistency in look and functionality

16. Drawbacks of Responsive Design
● Not one-strategy-fits-all
● Learning curve

17. Mobile Design Principles
1. Touch & Ergonomics
2. Mobile Device Testing
3. Levels of Depth
4. Mobile-First Design
5. Content as UI
6. Declutter

18. Optimize for Touch
Smaller touch targets are more difficult to
use than larger ones
The smaller the target, the more likely
input errors become

19. Optimize for Touch
Smaller touch targets are more difficult to
use than larger ones
The smaller the target, the more likely
input errors become

20. Touch Element Sizing
25px = touchable
40px = optimal
Test your touch inputs on real devices

21. Testing on Real Devices
Build up a library of test devices for
responsive designs
Cover at least those devices you know
your users will be on

22. Touch Ergonomics
Consider the ‘thumb zone’
Content to the top
Controls to the bottom
Destructive actions in hard-to-reach areas

23. Touch Beyond Mobile
Touch-Enabled Tablets Touch-Enabled Computers

24. Touch Beyond Mobile
Factory floor ergonomics
Consider:
● Operator safety
● Physical reach
● Lighting conditions

25. Adding Levels of Depth

26. Adding Levels of Depth

27. Mobile-First Design Approach
Progressive enhancement
Add features/content as the
available space increases

28. Think Beyond the ‘Mobile Stack’
Popularized by frameworks like
Bootstrap, Foundation
Not a viable mobile strategy

29. Content as UI
Users should interact directly with content
Embrace intuitive actions

30. Content as UI
Users should interact directly with content
Embrace intuitive actions

31. Remove UI Clutter
Space is limited, prioritize important
information
Minimize fixed docks for headers, footers
and navs

32. A New Design Mindset
1. Design Systems
2. Address User Needs
3. Content is King
4. Fluid Layouts

33. Designing Systems
Create design systems, not pages
Consistency through conventions
Reduce “design debt”

34. Designing Systems
Create design systems, not pages
Consistency through conventions
Reduce “design debt”

35. What Should a Design System Include?
It depends.
Start small, build up

36. Addressing User Needs
Users have “jobs to be done.”
Your application should support those goals.
Talk to your users, design applications that
empower them.

37. Content is King
Minimal navigation, maximum content
Focus on what matters most
Gradually reveal content and features
“Just-in-time design”

38. Fluid Layouts
Layouts are fluid in responsive apps
All content on the web is a box
Layout strategies should consider this

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

40. Perspective Containers
Containers indicate the layout strategy
of a view’s child components.
Current containers include:
● Breakpoint
● Column
● Coordinate
● Flex
● Tab

41. Multi-column layout that introduces larger
margins on big screens
A fluid grid reflows the main content and
stacks columns vertically on mobile.
Mostly Fluid

42. Works well for:
● Simple applications
● Reporting, documents
May Utilize:
● Flex container
● Coordinate container
Mostly Fluid

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

44. Works well for:
● Simple applications
● Dashboards
May Utilize:
● Flex container
● Column container
Column Drop

45. A heavier, more custom solution
Different layouts across breakpoints
Swaps components, not just layout
Layout Shifter

46. Works well for:
● Complex applications
● Complex dashboards
May Utilize:
● Breakpoint container
Layout Shifter

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

48. Works well for:
● Nested views
● Single-column layouts
May Utilize:
● Named styles
● Element states
Tiny Tweaks

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

50. Works well for:
● Complex applications
● Mobile applications
May Utilize:
● Docked views
Off Canvas

51. Bringing It All Together
Understand mobile design patterns
Utilize a strong responsive layout strategy
Embrace the mobile-responsive mindset
…Now you’re ready to design a mobile-
responsive application in Ignition 8!

52. Final Thoughts
1. Mobile-responsive is a thought process
2. Responsive results in less work and more usability
3. Ignition Perspective enables responsive design paradigms

53. References
1. “Responsive Web Design,” Ethan Marcotte
https://alistapart.com/article/responsive-web-design/
1. “Views and Containers in Perspective,” Ignition Docs
https://docs.inductiveautomation.com/display/DOC80/Views+and+Containers+in+Perspective
1. “A Complete Guide to Flexbox,” CSS Tricks
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
1. “Responsive Patterns,” Brad Frost
https://bradfrost.github.io/this-is-responsive/patterns.html
1. “Multi-Device Web Design,” Luke Wroblewski
https://static.lukew.com/onedesign_04092013.pdf
1. “Atomic Design,” Brad Frost
http://atomicdesign.bradfrost.com/