5 Mobile-Responsive Layout Strategies

5 Mobile-Responsive Layout Strategies

• 2.
  Presenters Travis Cox Co-Director ofSales Engineering Inductive Automation Don Pearson Chief Strategy Officer Inductive Automation
• 3.
  Agenda • Introduction toIgnition • Mobile-Responsive Design • Ignition Perspective Container Types • Design Use Cases (Combining Different Containers) • Resources, Audience Q&A
• 4.
  Ignition by InductiveAutomation The Unlimited Platform for SCADA and So Much More • Connect, Design, Deploy Without Limits: ○ One central hub for everything on the plant floor ○ Create any kind of industrial application ○ Web-deploy clients to desktops, industrial displays & mobile devices • Unlimited licensing • Industrial-strength security and stability • Trusted by thousands of companies worldwide
• 5.
  Mobile-Responsive Design ● Mobile-responsivedesign is all about building screens that look great on small, medium, and large devices ● Mobile devices generally have less available width ● With smaller screens, focus on mandatory elements first ● Save “nice to have" elements for larger screens
• 6.
  Mobile-Responsive Design Benefits: ● Lowerdevelopment costs ● Single data model to maintain ● Support any device size ● Consistency in look and functionality Drawbacks: ● Not one-strategy-fits-all ● Learning curve
• 7.
  Mobile-Responsive Design Layout strategy:Mostly Fluid ● On smaller screens, main content reflows and columns stack vertically ● On larger screens, it adjusts margins but usually remains the same size ● Usually only one breakpoint between small and large screens ● Works well for: Simple applications, reporting, documents
• 8.
  Mobile-Responsive Design
• 9.
  Mobile-Responsive Design Layout strategy:Column Drop ● Full-width multi-column layout ● Similar to Mostly Fluid but without the fluid content ● Stacks columns vertically when the width is too narrow for the content ● Works well for: Simple applications, dashboards
• 10.
  Mobile-Responsive Design
• 11.
  Mobile-Responsive Design Layout strategy:Layout Shifter ● The most responsive pattern ● Different layouts across breakpoints ● Swaps components, not just layout ● Works well for: Complex applications, complex dashboards
• 12.
  Mobile-Responsive Design
• 13.
  Mobile-Responsive Design Layout strategy:Tiny Tweaks ● Small changes to the content, like font & image size ● No changes to the layout ● Works well for: Nested views, Single-column layouts
• 14.
  Mobile-Responsive Design
• 15.
  Mobile-Responsive Design Layout strategy:Off Canvas ● Moves infrequently used content off-screen, shows it when the screen is large enough ● Content is only one click away ● Works well for: Complex applications, mobile applications
• 16.
  Mobile-Responsive Design
• 17.
  Containers in IgnitionPerspective Module ● Containers are one of the ways that Perspective has mobile-responsive design built into its structure. ● Containers let you lay out and organize components within a View. ● Containers are like a box for content. The content is like fluid that shifts, moves around, and takes up available space in the container. ● The different container types support different layout strategies.
• 18.
  Containers in IgnitionPerspective Module Five different container types: ● Coordinate Container ● Tab Container ● Flex Container ● Column Container ● Breakpoint Container
• 19.
  Coordinate Container Features: ● Thesimplest container type ● Components use basic X, Y, Width, and Height position properties ● Components can be fixed size, or grow/shrink proportionally when the view is stretched ● Component size and location are relative to the parent container size and location ● Components can be rotated
• 20.
  Coordinate Container When touse it: ● When components need to overlap each other ● When you don't want components to resize ● For Mostly Fluid layouts
• 21.
  Demo
• 22.
  Tab Container Features: ● Classictab strip navigation buttons ● 2 Variants: ○ Classic - traditional menu with boxed tabs ○ Modern - no border around each tab and selection is indicated with an underline
• 23.
  Tab Container When touse it: ● Use when you only want to display one component in each tab ● Useful for complex devices or processes
• 24.
  Demo
• 25.
  Flex Container Features: ● Altersa component’s width and height to accommodate all types of devices and screen sizes ● Expands components to fill free space or shrinks them to prevent overflow ● Allows a great deal of control over how different components expand and shrink ○ Static widths ○ Even scaling
• 26.
  Flex Container When touse it: ● Go-to container for mobile-responsive screens ● Use when the size of components is unknown or dynamic ● Use when operators will not have consistent screen sizes or devices ● For Column Drop layouts
• 27.
  Demo
• 28.
  Column Container Features: ● 3breakpoints: ○ Small ○ Medium ○ Large ● 12 columns per breakpoint ● Unlimited rows
• 29.
  Column Container When touse it: ● Use when you want the same components on all screen sizes but in different positions depending on size ● On a narrow screen, each component may take up all 12 columns but have its own row ● On a wide screen, components may share a row ● For Column Drop layouts
• 30.
  Demo
• 31.
  Breakpoint Container Features: ● Createmultiple versions of a single container using a pixel width as the cutoff, which completely changes the look or structure on mobile vs desktop sessions ● Swaps sub-containers based on a breakpoint in pixels ● Consists of a single breakpoint with two child views
• 32.
  Breakpoint Container When touse it: ● When you want completely different components on mobile and desktop ● When you want the most comprehensive choice for developing a project that works for sessions of many shapes and sizes ● When you want small and large versions to have: ○ Differing components ○ Differing properties, bindings, or layout behavior ○ Differing navigation options ● For Layout Shifter layouts
• 33.
  Demo
• 34.
  Named Styles andElement States / Media Queries ● Tiny Tweaks layouts can be made using Named Styles and Element States or Media Queries. ● Styles are the main way to change the look of a component in Perspective. ● A Style Class is a group of style settings that can be quickly applied to multiple components. ● When you create a new Style Class, you can save it and name it. ● Element States are used on Style Classes to change the style configuration on a component based on the state of the component or media queries.
• 35.
  Named Styles andElement States / Media Queries
• 36.
  Docked Views ● OffCanvas layouts can be made using Docked Views. ● A View that is anchored or “docked” to the edge of a session ● Features multiple properties that alter the behavior of the dock in unique ways: Display, Resizable?, Modal?, Auto Breakpoint, and several more.
• 37.
  Docked Views
• 38.
  Power Chart ● ThePower Chart works with the Tag Historian system to chart history data across the Perspective platform. ● Has a responsive design and a mobile-optimized display ● Has a mobile breakpoint to fit better on mobile devices
• 39.
  Power Chart
• 40.
  Design Use Cases(Combining Perspective Containers) ● Perspective is even more powerful when you combine container types: ○ Hierarchy ○ Nesting ○ Containers within containers ○ Different layouts at different sizes and at different levels ● Combine Perspective containers in an endless number of ways!
• 41.
  Design Use Cases(Combining Perspective Containers) Let’s look at examples from: ● The Perspective Demo Project ● Mobile-Responsive Layouts in Quick Start
• 42.
  Design Use Cases
• 43.
  Resources: Learn MoreAbout Perspective ● Inductive University offers Credential Courses and Elective Studies about Perspective ● Extensive documentation in the Ignition Online User Manual ● Paid training courses also available ● Free resources for Perspective on the Ignition Exchange ● Download Ignition and the Perspective Module for free at inductiveautomation.com
• 45.
  International Distributors Australia iControlsPty Ltd. www.icontrols.com.au Brazil FG Automação Industrial www.fgltda.com.br Central America NV Tecnologías S.A. www.nvtecnologias.com France AXONE-iO www.axone-io.com Italy EFA Automazione S.p.A www.efa.it Norway Autic System AS www.autic.no South Africa Element8 https://element8.co.za/ Switzerland MPI Technologies https://mpi.ch/ Contact International Distribution Manager Annie Wise at: [email protected]