5 Mobile-Responsive Layout Strategies

Speakers

Travis Cox

Co-Director of Sales Engineering

Inductive Automation

Don Pearson

Chief Strategy Officer

Inductive Automation

In our smartphone-dominated world, developers need to make HMI screens and applications that will look great on small, medium, and large devices. Are you familiar with the mobile-responsive layout strategies that make this possible?

In this webinar, we’ll delve into the five leading strategies for responsive design, each of which are supported by a different container type in the Ignition Perspective Module. We’ll show how what each container type does and how you can combine them to create more powerful interfaces. Join us to learn about new ways to display information gracefully and provide an excellent user experience across various screen sizes and orientations.

• Leverage tabs and overlapping components
• Use components that adjust to the available space
• Create one set of components that can be arranged multiple ways
• Use layouts that offer two different views with different content

Webinar Transcript

00:00
Don Pearson: Welcome everyone to our webinar today, “5 Mobile-Responsive Layout Strategies: Designing with Container Types in Ignition Perspective.” I'm Don Pearson, Chief Strategy Officer at Inductive Automation. My co-presenter today is Travis Cox, the Co-Director of Sales Engineering here at Inductive Automation. On the agenda, after we introduce you to Ignition software, we'll talk about some of the fundamentals of mobile-responsive design. Then we're gonna do some layout strategies, and the Ignition Perspective container types that correspond to them. After that we'll look at design use cases that combine different container types. We'll wrap up by sharing some Perspective resources, and then we'll answer as many audience questions as we can get to. What is this Ignition software that we're talking about here? Many of you already know that, but those who don't, we kinda think of it as, the best way to sum it up, by saying it's the unlimited platform for SCADA and so much more. Because it does everything you'd expect a world-class SCADA solution to do, and it also lets you connect, design, and deploy without limits. Ignition provides one central hub for everything on the plant floor. It lets you easily create any kind of industrial application like HMI, MES, IIoT and a lot more, and you can instantly web deploy clients to desktops, industrial displays, and mobile devices.

01:27
Don: So with Ignition's unlimited licensing, now you can have all the clients, the tags, the connections you need for one affordable price. And it's got the industrial strength in the security and stability area that today's world demands. Which is why I think it's trusted by thousands and thousands of companies worldwide now, including 54% of Fortune 100 companies, and I think somewhere in the 40% plus of Fortune 500. If you wanna learn more about Ignition, you can do it for free. Visit us at inductiveautomation.com. Let's get started by going over some of the basics of mobile-responsive design. Whenever you're designing a screen, you have to think about the amount of space that you have to work with. And today, the amount of space varies widely because people are using devices of many different sizes. We need to design not only for someone sitting in an office looking at a desktop, but also for someone out in the field with a mobile phone or a tablet. That reality has given rise to mobile-responsive design, which is really just a set of ideas and practices for building screens that look great on small, medium and large devices, and in either a portrait or landscape orientation. There are a few basic things to consider. In general, mobile devices have less available width, on a desktop the width is greater than the height.

02:54
Don: You need to sort of sort out which elements absolutely have to be included on the screen, and which elements are optional. When you're designing for smaller screens, you should focus on the mandatory elements first. What do we want the user to see, even if they're looking at the smallest possible screen? Then we can try to add the nice-to-have elements on larger screens that have more available width. There are many benefits to design responsive applications compared to designing separate applications for mobile and non-mobile.

03:29
Don: A couple of those are, well, first off, the development costs are lower overall, and there's only one data model to maintain instead of many. It lets you support an infinite number of device sizes with one design, and it makes it easy to get consistent UI and functionality across various screens and various projects. It takes less time to train operators, and there are fewer mistakes when the apps are consistent. There also happen to be a few drawbacks to responsive design. Certainly there's no one strategy that fits all projects, every project is different based on its content and the context. There's also a learning curve, of course here, it takes time to get fully proficient in it, but that's true of any new tool you use and the skills you gain are definitely worth it here. That's just a couple of really simple overview points of the responsive design concept, so let's get into some specific design strategies. And for that, Travis, I'm gonna hand it over to you to take it from here.

04:34
Travis Cox: Alright, perfect, thank you, Don. So getting your design started is a lot easier when you have a strategy. Let's talk about some of the common layout strategies that work well across desktops and mobile devices. These strategies combine containers, columns, and breakpoints in different ways to define how your screen will change to fit different screen sizes. The first is called Mostly Fluid, this pattern mostly consists of a fluid grid that re-flows the main content and vertically stacks columns on smaller screens. On medium or large screens, it usually remains the same size and adjusts the margins to fit the width. The main advantage is that it usually requires only one breakpoint between small and large screens. In case you don't know, the breakpoint is the point where there will be a big change in the application's layout so that it's using the space most effectively. Mostly Fluid is pretty simple because it has one breakpoint, so it works well for simple applications, reporting, and documents. You'll see a little example of what we're talking about here with the Mostly Fluid, there's that one breakpoint. On the small display, of course you get everything stacked on top of each other, where on the medium and larger displays, you get that content but it would adjust the margin to see the spacing on the ends there, over on larger displays. You see a lot of websites that follow this paradigm out there.

06:06
Travis: One example of that here is BMW's website, and so on larger displays, they have some padding on the outside, and then ultimately when it gets down to that smaller display, everything's kind of stacked in that column format. This is a good example of Mostly Fluid. Another design strategy is called Column Drop, and this is a pattern for full width multi-column layouts. This is very, very similar to the last one, Mostly Fluid, but without the fluid content because the size of the elements stay the same. It stacks columns vertically as the width of the window becomes too narrow for the content. This pattern works really well for simple applications and dashboards. And as you can see here, that on the largest display, we've got those three columns, everything is next to each other, we have enough real estate for that, and as we get smaller, we start basically dropping a column down. And so here we just have two columns with that third being dropped down to the bottom, of course, all of this stuff at the bottom you can get to through scrolling, and then we get down here to the smallest displays and everything is dropped in a vertical column. So very similar to Mostly Fluid, but it can have multiple breakpoints here. So a good example of this is, there's lots of them out there, but this is one that we chose here, the Boston Globe, and as you can see, how we have the three columns on the large and a lot of new sites do this where you didn't drop the two and then drop to that single column, where that column drop is a very common paradigm and there's some great ways that we can accomplish that, of course in Perspective.

07:48
Travis: The next strategy is the Layout Shifter strategy, and this is the most responsive pattern. It has multiple breakpoints across several different screen widths, and it has different layouts across those breakpoints. It swaps components, not just the layout, the content moves around instead of re-flowing or dropping under other columns. Because of that, the Layout Shifter is more complex to maintain, but it's a good strategy to use for complex applications and complex dashboards. And it's one that you see a lot especially from your desktop, websites that are on desktop too, and they're on a mobile device because they want to shift things around for that mobile device to be oriented in a much better way. So a good example of this is Google Maps, where on a desktop you can see the orientation of the map and the information, the directions on the left and then on a mobile device, how that is shifted around so that the actions are at the bottom there, the search is at the top. This concept is very common, and you'll see that a lot especially with moving the navigation buttons down to the bottom whereas on a desktop, it might be to the left or to the top.

09:02
Travis: These are very common patterns that people work with. So this is one that really, has the most flexibility for sure. Then there's Tiny Tweaks. And this strategy is not a complete mobile-responsive design strategy for the entire content. But it's one that, as the screen size changes, the layout doesn't change, but there are small changes within the layout, like font sizes are different or image sizes are different, just small little tweaks that happen and of course this can be combined with other strategies, but this really works well for nested views or single column layouts, where you want things to slightly change as you reach those breakpoints. So here's a good example of a website that as you can see, it's very, very similar on all of these sizes. But if you look down on the very small size, mobile size, that this font got smaller here and the image got smaller, and so those little tiny tweaks are important. And so it's not just looking at the entire layout as a whole and how you might approach that but it's also the little things that you could be modifying too, adding something in or taking something out or basically having font sizes or variations of that change. So this is one that you could certainly take advantage of.

10:29
Travis: The last pattern is Off Canvas, and this is one that you see quite a bit. Some content like navigation or menus isn't used very frequently. In this pattern, that content is shown when the screen size is large enough, but on smaller screens, this pattern moves the content off-screen instead of stacking it vertically. On smaller screens, the content is only one click away, so it's still convenient for the user. So Off Canvas works really, really well for complex applications and mobile applications where you don't want a lot of scrolling, you're not stacking everything in a column, you're not going to scroll to that page but you want to be able to click a quick little button to basically bring out that content right in that same view. So you're not having to scroll or anything like that, but everything can be available when you need it or more on demand.

11:20
Travis: So an example of that out there is this website. I mean, you see this example everywhere with all the navigations that are there. If you look on the smaller one here, how we have the hamburger icon and that can bring out a menu, over here on the right there is another icon that can bring out the cart. Things like that. And it keeps everything in that same view. We're not having to scroll through that whereas we probably would on a larger display because we have more real estate for it. So these strategies, these five strategies, you can certainly take... There's lots of good education and content out there on these strategies. And you're going to look at applying one or more of these within Ignition and Perspective. Now that we've gone over some of the basic mobile-responsive strategies, let's see how we can apply them in the Ignition Perspective Module. Perspective is optimized specifically for mobile devices and it has mobile-responsive design built into its structure.

12:17
Travis: One of Perspective's important mobile-responsive features is in containers. Containers provide a way of laying out and organizing components within a view. You can think of containers as a box for the content, and the content is like fluid that shifts, moves around and takes up the available space in that container. The different container types in Perspective support different layout strategies, like the ones we've shown you. But containers aren't the only thing that contribute to mobile-responsive design. We have the ability to, for certain components are built with mobile-responsive design built into them. There is styling, where we can actually do tweaks based on media queries, and there are docked views that we can bring in and use in very interesting ways. And we'll go through examples of all of these but the containers is definitely the main one, and the one that is most important to really understand. If you can understand all these container types and how they work, it really helps you to figure out which one you're going to use or which combinations of ones you're going to use as you go forward. So there are five different container types in Ignition Perspective.

13:28
Travis: The Coordinate Container, Tab Container, Flex Container, Column Container, and Breakpoint Container. And we're gonna take a look at each one of these in more detail. And that starts with that Coordinate Container. And this is the simplest container type, and with this, the components are... They use basic X, Y, width and height position properties, so we specify that in terms of pixels and where that component is gonna be located within the screen, and what size that component's gonna have. Now, the size can be... Of those components can be fixed, or they can grow or shrink proportionally when the view gets stretched. The component size and location are relative to the parent container size and location. That's one important thing to understand, especially as we're nesting these containers together, that the components are gonna be relative to its parent, and that container could be relative to its parent, and so on. But that's just how you want that layout, and each of those parent containers can... Everything kinda funnels down if you will. The components in a Coordinate Container can also be rotated, which is the only container type that allows that, because of the fact that we can organize this in a fixed position.

14:46
Travis: When to use the Coordinate Container? Well, for cases when you need components to overlap each other, so examples are labels on top of a motor display, or a sparkline chart that is centered inside of a tank, or adding a component on top of another component as an overlay that's a perfect example and for cases when you don't want components to resize. A lot of time... An HMI screen, P&ID, or a diagram, where each element is in a separate component, and you want them to be organized that way, and you don't want them to be moving around changing things. And really this Coordinate Container is for Mostly Fluid type layouts. As we talked about the Fluid layouts, there's typically one breakpoint and then a larger breakpoint, we just kinda keep the content centered on the screen in a particular size. Like an HMI would stay that way, you may not want to resize it. But as we said, it is also possible for a coordinate to resize components based on aspect ratio, and so I'm gonna show you an example of this one in particular. We'll look at all of them and show a good example of that. And we're gonna do it two-fold, one is to bring out... Here I have a Perspective project with a... We're looking at the Coordinate Container, so an example of that. We are also gonna look at that in a designer real quick, so you can see what that container looks like.

16:08
Travis: So here is the Coordinate Container with all of these, the vessels, the pump, and the valve and the pipes that are all organized in that fixed position. And right now it's in a fixed mode, which means that these components are not resizing, and as you can see, we get scroll bars when the screen is small enough or smaller than that content, but that content never moves around. It never shifts, never resizes. If you want it to be based on a percentage, then it's a percentage of the component size to the parent size. If you have a lot of dead space, that ratio will be different, but you can base that off of an aspect ratio, where as the screen gets bigger, these components are going to resize on there. There are often times where on a HMI screen, you have developed the HMI screen for the smallest resolution that you want, maybe 1024 x 768, and as you get bigger, you want that to scale up, get bigger. But when you get down to a mobile device, there's question of whether or not you want that to scale smaller, but we're gonna talk about that later as we combine these strategies together.

17:13
Travis: But again, the Coordinate Container, real simple, it allows us to do the resizing and/or having the position being fixed. And really it's a very, very simple one. In the designer, when you are configuring a project, you can create a new view and you can specify what container type we're talking about here, and on that Coordinate Container, that is this one here, each of these components simply have a X, Y, width and height that position, and on the actual root of the container, there is a mode where this can be fixed or percentage based. And here you could see the aspect ratio that I put there, and the aspect ratio is based on the size that I wanted to design this in. Very, very simple, and this one also in Perspective, this is what... The Coordinate Container is what provides the pipes, the piping tool is only available within that Coordinate Container. Alright, let's look on to the next one, and that is our Tab Container. We're probably all very familiar with switching between tabs from years of using web browsers, and the navigation that's in there, the Tab Container gives you that same classic tab strip navigation inside of Ignition.

18:20
Travis: The container comes with two variants, it's Classic and Modern. And in Classic, you can see on the slide has traditional style menu with box tabs that can change the color based on the tab you're currently looking at. Of course you can be in complete control of those colors and what that is. The Modern version gets rid of the border around each of the tab buttons, instead indicating which tab you're seeing by simply underlying the title of that. And so it's just the styling of how those tabs work, but with the tabs, only one set of content is visible at a time. If I look at tab one, it's one set of content, tab two will be a different set. We can have lots of different sets of content within the same view, with a very intuitive, very easy way to go between those pieces of content. A very, very useful container type. And for when we wanna use that, it's when we wanna keep our information, our components separate, as only one of them are being displayed on each of those tabs, essentially allows you to have all the components you need without causing confusion by crowding them next to each other, or putting them vertically on top of each other as well. A really great container type that you can use. And let's take a look at an example of this. I'm gonna go back to...

19:37
Travis: Our browser here and so now we're looking at the tabs and you can see at the very top there are my three tabs, Process, Alarms, and History. And if I look at Process, this is just looking at that same view we had before so this is one piece of content that's there, and then Alarms would be my second set of content, so that's using our Alarm Status component, and then History would be that third set. And so you can see all three of these are organized different sets of content and these tabs can be dynamic, but ultimately it allows us to, rather than navigating to different screens or whatever, all that content can be accessible very, very easily. An important thing to note that with the Tab Container in terms of mobile-responsive design is that the tabs are gonna be there, but the content inside of it can adapt based on the size. So the same Coordinate Container we showed before is inside here, is gonna react the same way in that Tab Container and so will other components like that.

20:37
Travis: So very, very simple one, in terms of the configuration. We add in a Tab Container and on there we can set the tabs that we want, so here we have three and you just can add new ones and we can also set which tab is selected and we can do that programmatically if we want. And we can go between that Modern style, as you can see now up there, and that Classic style of these tabs. So very, very simple, but if I wanted to add a new tab, something else, let's say, admin or whatever, you can see that there's the tab in our design environment, we just simply can put that there. Let's say I wanna put a component in there like the Dashboard Component and then now that's the content that's in that tab and so we can drag any kind of content we want in that Tab Container. So very, very simple for how that works.

21:28
Travis: Alright, let's move on to the Flex Container. The Flex Container is perfect if you need to change the size of the actual components for different screen sizes. The Flex Container alters a component's width and height to best fill the available space to accommodate all types of devices and screens. Depending on the screen you're using, components will either expand to fill available free space or shrink or wrap to prevent overflow. Something else that's really beneficial is that the Flex Container allows a great deal of control over how components expand and shrink. You can set static widths making it so that one component never changes size while the other ones around them expand and contract. Alternatively, even scaling lets components expand and shrink more or less compared to other components. And so this is really a flexible container type. It is based on CSS Flexbox. There are lots of different ways that we can organize views this way, but there's two modes that a Flex Container will have. It'll either have components organized in a column where every component is a separate row or we organize them into a row where every component is a separate column. So it's either a row or a column. You can't do both, but you can embed... In one row, you can embed another Flex Container that can be based on a column or a row or something like that. So you can... And the nesting of these become really important and we'll show an example here in just a moment.

23:00
Travis: So when to use the Flex Container. So think of this as your go-to container for designing mobile-responsive screens because it provides an efficient way to lay out, align and distribute space among components even when their size is unknown or dynamic. Anytime operators are not using a consistent screen or device size, you're gonna want to typically start with the Flex Container. And with how smartphone-dominated the world has become, it's incredibly common for a screen to need both a desktop or workstation version as well as a re-sized version for iPads and iPhones. It also works for the Column Drop layouts that we talked about earlier. It's a good one for that.

23:38
Travis: Now the best way to really show this one is to talk about this one and show an example of it. And so let's go over here to our browser and we're gonna change the size of this so you can see how these components are organized. But first and foremost, before I do that, let's talk about how this particular one is organized. So here is our Flex Container and the very top level of this is a direction of a column, so what that means is that every component is a row. So this first one that I selected, this is the first row right here, and then the second one, this label is the second row and then we have that third row down at the bottom. And so you'll note that every row will contain one component. So in the middle it's this label, but in the top and the bottom, it's another Flex Container and you'll see that this Flex Container inside of that is a direction of a row. So there inside of that, we have each one of these being a separate column. There's three separate columns.

24:37
Travis: So with all of this, with the Flex, we have that ability to specify how these components are gonna resize and how they're going to grow or shrink. And so you can see that this very top one, we are not growing, we're not shrinking, and we're setting the height to a static 100 pixels. So that height is never gonna vary, but the width most certainly will because the components inside of that, in that row, we have one that is gonna be 250 pixels, but it can shrink past that. We have one that is gonna fill in all the available space, so that's growing and shrinking. And then the last one, that is just a static. It's not growing, not shrinking, and it's at 75 pixels.

25:16
Travis: So the point here being is that you really can lay out data where you can easily fill in that space and kinda figure out what, have it automatically detect the size of the content and content can easily scroll especially vertically on a screen because of this. And so often it's one that we start out with and we'll talk more about that here. But if I look at this, you can see that top one, this view here is gonna fill in all that space, this one's static size, and this one is 250 pixels until it gets smaller. So let's watch as it gets smaller, you're gonna see that now that one's gonna start, this one's gonna start getting smaller and you can see how that fills in that space. Now look at vertically because we have that, the very top row is staying at a static height, this view in the middle is getting bigger. It's filling in that available space as you can see and then the bottom one is also allowed to shrink as things get smaller, but it's kind of automatically detecting its content size. So really, really, very flexible. That's why it's called the Flex Container, but there's a lot of good uses and we'll talk more about the combination of these things, but often we start with this Flex layout and most of the views that we are building in Ignition.

26:35
Travis: Alright, the next container type that we're gonna talk about here is the Column Container. And this container type has three breakpoints, small, medium and large by default. Now you can create multiple breakpoints here. So this is the first one you're gonna see where in Ignition you're defining the breakpoints of sizes and how you want these components to adapt based on those sizes. And every breakpoint that you have, there's 12 vertical columns that you can organize content against.

27:06
Travis: You can have as many rows as you want, but those 12 columns... Very common 12-column layout for a lot of websites. But what this allows us to do is basically with a given... It's the same set of components, but with each of those breakpoints, each of those sizes, we can say where we want to position that component and how many columns do we want to spread that across, just to control that position. And so it's really a great one that is just easiest for doing mobile-responsive design. So it's a container... It's great when you have the same components on all the screen sizes. But you want their size and orientation to shift based on those new proportions. And on a smaller screen or narrow screen, each component will take up typically all 12 columns on... And have its own row. On a wider display the components may share a row because there's enough floors on a room. Again this is perfect for Column Drop layouts where you want... As you get smaller, you're dropping columns down on there.

28:04
Travis: So let's show a good example of this. I'm just gonna go back to our examples. So here is our Column Container. And again before we... Well, we can show this one first then go and look at the design part of it. But right now I'm on a large display, so you can see how our components are oriented. So I've got seven components on here. The first four are in the first row, and there are different columns there. We have enough real estate for that. This view... This might be an HMI or something. It's big, and so it's taking up that entire row, all the columns. And then you have these last few are just sharing a size. But then as I go down, we have different breakpoints.

28:44
Travis: So as we get past that first breakpoint... Here we go. Then now you can see that we... The top, instead of having all four of those in the same row, we don't have enough space. So now we've dropped a couple down... Three and four got dropped down here. We've kinda organized those a little differently. And then we get down to an even smaller breakpoint, you can see that now, everything got dropped into a single column. So everything's now a row.

29:08
Travis: So a very, very simple one, and you can control how you want that to work. Basically, what you're doing on this is you are setting those breakpoints. So here we have three breakpoints. We have that large and the medium and the small. And in the design, you can actually see what that's gonna look like. If you click on each one of those, how they're gonna change the position. So basically on each of them, each of these components have a separate position. So if I look at this label here on the largest display, that's where it's positioned. And if I go to the medium, it has... It's now spreading across... It's positioned in the same place, but it's using more columns now... If I go to small... It's again in the first row and all of the columns are being taken.

29:50
Travis: So all you do with these is specify where you want these things to go on, and you just move around. If I wanted this into a different row here, and I wanted this to be the full thing, we can certainly do that very easily. And then if I go to a medium you can see how we can change these things as much as we want for how that will look. So very, very powerful one. Very useful. And when we go to the demos, you'll see more examples of this. Alright, so with the Column Container, the layout changes to fit the screen size, but the content is identical. But what if you wanted to redefine that, have different content to render for that breakpoint?

30:31
Travis: So as I get down to a smaller size, what if I want that content completely changed. And that brings up the fifth container type, the Breakpoint Container. And this lets you create multiple versions of a single container using a pixel width as the cut-off. Meaning that you can completely change the look or structure for displays on mobile versus desktop. The Breakpoint Container consists of a single breakpoint with two child views. In other words, it gives you the opportunity to create two different views that are shown at two distinct ranges of layout widths. The breakpoint is configured by selecting the small and large breakpoints at the top and then dragging a view into each one of those breakpoints.

31:08
Travis: So again, we're gonna show an example of this, but they are ideal for cases where you want complete different components available between a mobile and desktop. And especially for HMI-type screens, we're gonna show a good example of this. It is the most comprehensive choice when you want to develop a project that works for sessions of many shapes and sizes. So an operator who is using mobile phones and need different control options than desktop computers, this is a perfect one to use. So it is really also good for the Layout Shifter pattern. So where we want things to completely change and shift things around.

31:44
Travis: So let's do a quick demonstration of this one. Let's go back here. And so this one's really simple actually, and you can see that I'm on the large size, and if I get past the breakpoint there, now it is on the small view. So this is... There's nothing too exciting on here. We'll show a better example, but we're just showing two different views for the small and large. So if we look at this in our design environment, we can clearly see that there's a breakpoint, 640 pixels in my case. And on the large display of that, we have this label that's a large view. If I go to the small display, then it's this component that is a small view. And so this could be any component. This could be another container type. So you can have a... And a large display can have an HMI and a Coordinate Container, and the small one could be a Flex Container, if we wanted that to be. So a lot of good options for how that could work.

32:38
Travis: So those are the five layout patterns and the five Perspective container types. We saw that you can use the Coordinate Container for Mostly Fluid, and the Column Container for Column Drop, and the Breakpoint Container for Layout Shifter. But what about other layouts, Tiny Tweaks and Off Canvas, it turns out that there are other areas in Perspective for doing mobile-responsive design. We can utilize name styles with their element state's immediate queries to accomplish that. Styles are to accomplish Tiny Tweaks, they're the main way to change the look of a component in Perspective. A style class is a group of style settings that can define style elements in one place, and can be quickly applied to multiple components. When you create a new style, you can save it and name it, and then use it everywhere that you'd like to use it.

33:21
Travis: And with the fact that it has media query support, the styles can change based on the breakpoints or the sizes of the application, or even the element state, state of the component for that matter, like if it's hovered or selected or things like that. These are... They're very based off of CSS within HTML, but it's very easy to define that within Ignition. Let's go and look at an example of this. And so here, I've got a single label, and on a large size you can see the color and the font, the size, the choice, all of that is set for that large, but because the media queries, if I go to a medium you can see that that same label from a styling aspect, it changed the background color, it changed the font and all of that. And so here you can see it going, now it's smaller and now it has a border around it. And so this is really simple to set up. All we have in this is a single label, and that label has a responsive style associated with it, and on that responsive style, you can see that we have a base style with different colors and fonts, and if I look at these media when it's on a very small display, here's my colors and the border. On the...

34:32
Travis: When it gets up to 480 pixels, it's gonna have this style. And so we can have these different styles associated with these individual components, those tiny tweaks that we can make within applications. So not only can we arrange the content in different ways, but we can make those tiny tweaks that really help us be in complete control of all of that. Off Canvas layouts, that we talked about before, can be made using Docked Views. A Docked View is when a view is anchored or “docked” to the edge of a session, and it's how a lot of navigation is laid out. Like with the hamburger icon that often you see in the upper corner of a website. These Docked Views feature multiple properties that alter the behavior of a dock in unique ways.

35:14
Travis: We're gonna show that, but we can have it to be Resizable, Modal, we can have it automatically come and show, we can have a handle on these things. Best way to show these Docked Views is through a demonstration, but this is probably one of the areas that most applications are gonna take advantage of, not only of the different container types, but have these Docked Views, and typically navigation is part of that. Here, you can see I've got this screen that has two Docked Views, this left view and the right view. And the way this is configured in Ignition and in Perspective is that on this particular page, we have a left Docked View with its settings, we have a right Docked View with its settings, and so those are not inside of the main content, the main content is a different view, but we have these two on the left and right. And right now, when I'm on a large display, they're showing, and you can see that the left one is taking up its space, it's pushing that main content in, so is the right.

36:12
Travis: The right does have this icon, they both have that handle if you wanna bring it out, even on large displays. But when I go down to a small display, you're gonna see that both of those pieces of content, they went away. They're Off Canvas now, and if I wanna bring them back, I can bring them back and either push my content, so you could see the main view is now pushed in, got smaller, or we can cover the content where that dock is gonna go over that main content view. And that's typical for a lot of navigation when we do that. Again, we'll show a more comprehensive example of this. Now within Perspective, various components like the Power Charts, and the Alarm Status Component, Alarm Journal Component, they have mobile-responsive design built into them, and that is... When you put it onto a screen, you don't have to think about that, that component will automatically have... It's already optimized in that way, we built it behind the scenes. And so you have some control over the breakpoints and specify what that looks like, but these components have it built-in. So if I take... Example, take a look at this tabbed one here, and on the Alarms and the History, these two, as I make the Alarm smaller, actually, I don't think I turned that one on here, let's go to History.

37:26
Travis: If I bring in a particular tag, let's say, and add that over, and basically, as I go down to a smaller display, you can see that now things got shifted around, and that's all based on that single component. We did that mobile-responsive design within that component. We do that with the more complex components in Ignition there. Hopefully, you guys see there's a good example of all different container types, and some of the Tiny Tweaks, and the Off Canvas things that we can do in Ignition. Each of these container types provide a certain level of mobile-responsive design, but Perspective is more powerful when you combine all of these containers. Combining containers allows you to create all kinds of user experiences. You could build hierarchies, you can nest containers inside of other containers, you can have different layouts at different sizes, you can have different layouts at different levels. And it really puts you in complete control of all of this by letting you combine containers in endless numbers of ways. And just a quick way to show this... What I mean by this, is we can start with a particular... Let's say that we start here with a Flex Container on a particular view...

38:37
Travis: Well, when I put components inside of it, I can put containers inside of this. So if I look under the Container section, I can go and put a Column Container inside of this, and inside the Column Container, I can actually put in a Tab Container or a Breakpoint Container that's there. Inside of that breakpoint, we can have our small and large, in that small and large you could have a Coordinate Container or it can have a Flex. So you can see we can put all of these things. We can really combine these things together. So it's not showing a good example here in the designer but you can just drag and combine these in very unique ways. And the best way to see that is look at some examples that are out there that we have. That is our Demo Project and our Quick Start feature that we have in Ignition. And so let's take a look at these in more detail. Let's go over to our browser. I'm gonna go to our Perspective Demo. This is at demo.inductiveautomation.com, and we have... We try to showcase some mobile-responsive design in different projects that we have here, but the main one, if you look here, is that we're first using the off the Dock View, the Off Canvas area.

39:48
Travis: So this over here, left, is our navigation, and this is a docked menu. And so when I get to a small display... We're gonna make this go down to, let's say, iPhone 12 here. So when I go down to a small display, you can see that that navigation is now Off Canvas, but I can click on the hamburger icon. Now the hamburger icon shows up on a small display, and so I can bring that menu in. When I go back to a large display, we'll have enough real estate where I can show that menu automatically there on the left. So this is a great example first of using that Dock View for mobile-responsive design. And, of course, the content within each of these pages are also utilizing various container types and layouts. This very first one here is using our Column Container. And so let's go to responsive. So you can see that as it's a large display. If I go smaller, you'll see that things start getting moved around and then everything will drop into a single column and it gets down to that.

40:48
Travis: So that container... That Column Container is a perfect one for things like this. Let's go back to a large display. This HMI screen is a perfect example of really pretty much combining every layout strategy that we have, or every container that we have in Perspective. This particular view starts with the Flex. As I say a lot of times, we start with Flex. The reason for that is that this label at the top, this real-time status nav header, I want that to stay fixed at the top. I don't want it to resize. I want it to be up there. As you can see, it's up there at all times. The content below is actually scrolling. Now that we start with the Flex, so that can stay at the top at all times, then inside here, this is another Flex where each of these are... These labels are oriented so that they'll wrap, but the height of that will be automatically detected and we get scrollbars when it's super tall.

41:37
Travis: So we start with the Flex because of that scrolling that we wanna have on the screen. And then this right now, this HMI screen is actually a breakpoint, so that breakpoint is on a large display. I'm showing a Coordinate Container. So this is a Coordinate Container where I'm looking at this HMI, and I can do all this stuff that I wanna do with it, but if I go to a phone size, that breakpoint... You hit that breakpoint, so that content there now has switched to a Flex Layout, and I'm showing this data in a… more as these rows in a vertical form the same relevant data, same templates that we're using, just a different view of that, that's why we use the breakpoints. So large as that Coordinate, and as small as this Flex. And so a great example of... We combined so many together, right? The Flex as starting, then the breakpoint, and then the Coordinate, and another Flex, and that could have been a tab. It could have been this. It could be any container type that you want.

42:32
Travis: Coming down to the bottom of this, this one actually is a Column layout, so this little dashboard idea. So if I were to go bigger, make this a little taller too, so you can see now that on medium display, I get two columns. And then when we get smaller, we drop those columns down. So we go medium, it's now two columns. If I go large, you can see that it's now all three columns there of that data. So we've really combined a ton of different strategies in with this one screen here in our Demo Project, so it's a great example of it. Now another paradigm is like with history data, if I go to a tabular one. We're on a large display, we wanna see a table. We wanna be able to use sorting and all the things that a desktop could do on the table. But when we get down to a mobile device, let's go to an iPhone here, I don't wanna see a table anymore. I don't wanna scrunch it. So often, these cards, card layout where we can see the data have it flow vertically, is a very common paradigm for that.

43:37
Travis: So a lot of these different areas utilize mobile-responsive design. All these demo projects use it as well. So the Water/Wastewater Project is a great one, where if I look at it here and then go to a phone, you can see we often use that Column Drop idea, bring out the navigation, and use different strategies, and all of these are dissectable. You can play around with how they work and how they're gonna adapt to these different sizes and what containers we actually used in those projects. Alright, so the last thing to point out here is we have our Quick Start Project. Now, when you install Ignition for the first time and you'll get prompted with, "Do you want to install the Quick Start?" And that's a very great way to get going with Ignition. It shows you a lot of good examples. Has this Ignition 101 section where you can see, in terms of Perspective, all the things that you could do with it, and it has... But has a section dedicated to layouts. And we show six different layout strategies here.

44:37
Travis: And these are just very simple. They're designed so that you can go and see exactly what containers and how it's used, and you could just change those boxes with your content essentially. So this first one is this List Panes one, is a scrolling list layout that supports the drill-down information style. So what this means is that... Let's do this one and go into our mobile-responsive design. So on a large display, you see I've got these selections over here, A, B and C, and I even have these list items that I can select that will show me the content over here. So on large display, I wanna orient... I wanna organize it this way, but when I get down to a smaller display, I completely change the view of that. So at the top, I get the buttons for selecting between these different sections, and I get a dropdown for all the individual list items instead of having them be organized in the left there, so a good example of that paradigm. The Fluid one is just really showing that reflow content. The Mostly Fluid style that we're showing, where basically here...

45:37
Travis: As we get smaller, we're dropping columns down, and basically being able to hide the Dock, and it gives you a really good example of all of that. But it's filling in the whole content there, whereas the Box Fluid is where we can maintain some of the margins, so you can see that the content may stay a fixed size and centered there when it gets bigger, but when it gets smaller, of course it'll get smaller, and then ultimately get down into that single column. So a good example of that as well. The Scrollable Canvas is one that basically shows the on-demand view that we can bring, and it has fixed position views, and things that are in that canvas. You can see kinda sort of how those will maintain its orientation with that. And then the Component Grid, this is one of the most common ones, this is using the Column Layout that we are talking about, but you'll notice that what it does is it changes the position of the content, so here are the filters and actions, navigation to the top, if I go smaller, you'll note that now the filters, actions and navigation are at the bottom.

46:46
Travis: 'Cause oftentimes with mobile devices, you want the navigation to be at the bottom on there. So again, a lot of good examples of this, and then this last one, just a Coordinate Container with fixed scrolling or percentage based we've seen examples of. All of these are available for y'all to play around with and to look at. So hopefully with showing you all the different container types, the design strategies, you can start figuring out and sketching out how I would start within a Perspective. What would I start with? And sketch on the screen, what I want that to look like on a large display, on a small display, and then that will help you figure out what particular container type to work with. So with that Don, back over to you.

47:28
Don: Thank you, Travis. That was really great. I learned a lot about layout strategies in Perspective, but I just wanna emphasize that really... That's just the tip of the iceberg. So I just wanna wrap up by telling the viewers about the training and community resources that we offer for Perspective, you see them listed here. Inductive University offers credentialed courses and elective studies about Perspective. It adds up to over 12 hours of free training videos, extensive documentation for Perspective is also available in the Ignition Online User's Manual, paid training courses are available of course. We have many free resources for Perspective on the Ignition Exchange, so you can download the full version of Ignition 8.1 and the Perspective Module from our website, it downloads in about three minutes, then use it in trial mode as long as you want absolutely free, to work with all this information. So with that, we also want to let everyone know, I gotta take a minute before we have some questions, we'll get to them real quickly here, but I want you to know that we are currently taking submissions for the Ignition Community Conference 2022 Discovery Gallery.

48:37
Don: All submissions are due by April 30th, and the online submission form will be available soon. So for now, please mark your calendar and think about which Ignition project you'd like to send in for this year. If you have any questions about the Discovery Gallery, you can email us at icc@inductiveautomation.com. But Travis, you are intimately engaged with the Discovery Gallery, so I'd be remiss if I didn't give you a chance to comment and share your excitement about it for a minute.

49:05
Travis: I absolutely love the Discovery Gallery. It's a great way to see how customers are innovative and what they're doing with Ignition, showing these projects in action. And you can really get inspired by the types of systems that are out there, and you'll also see a lot of their mobile-responsive designs that people put into their project, you get to see that first hand, and steal some of those ideas and concepts. And not to mention that along with the Discovery Gallery, we're also very excited about the Build-A-Thon this year, and that application for Premier Integrators is also due on April 30th. So got some really exciting events for ICC this year.

49:37
Don: That's great, Travis. And also, just to reiterate, we're talking about project submissions now through April 30th, if you wanna participate, you need to fill out the online submission form and tell us about your most innovative recent Ignition project. If your project gets selected for Discovery Gallery, we will feature it in our 2022 Ignition Community Conference as either a finalist or a Firebrand Award winner, so I just wanna just emphasize, don't miss this opportunity, we love seeing these projects. You should get recognized for your great work, and we just can't wait to see what you built, and then give us a chance to share with the whole community. One final thing for those who are outside of North America, we wanna let you know that we have a network of international distributors, and they provide business development opportunities, and sales and technical support in your language and time zone.

50:26
Don: So if you wanna learn about the distributor in your region, just please visit the website, you can go to their website, of course, or contact international distribution manager Annie Wise. So that's an exciting part of expansion for us too, and if you'd like to speak with one of our account executives here at our headquarters in California, please call this number 800-2667-798. So now let's get to some questions. Here's one from Chris: how are breakpoints handled when the OS zoom setting is something other than 100%?

51:00
Travis: So the breakpoints are, it's all within the browser and the size of what the pixels in the browser there. So that zoom level is gonna ultimately, it affects that and that pixel size a little bit, but it's what the browser's reporting. So the best thing to do is actually go into the Developer Tools and you can see what the size reporting is, and it could help you look at that breakpoint. I don't think it has too much effect though with the zoom level.

51:25
Don: Cool. So next question is, is it better to draw a process diagram in a Coordinate Container for the largest viewpoint size or to draw it for the smallest viewpoint size?

51:39
Travis: For the P&ID on HMI screen, it is typically best to design that for on a desktop size using the Coordinate Container for the smallest one you're gonna be going to. Then they can scale up from there. You could certainly design for larger ones and it could scale smaller and that will work, but often you wanna make sure that the experience that people are expecting first, is that adds the size that you typically wanna develop for, and obviously things are gonna be much smaller, like mobile devices, you will probably completely think differently about how you approach the content of that.

52:10
Don: Thanks, Travis. Philip says, "I joined late so sorry if this was already covered. What are you using to resize your view live? I would love to do that during my testing/design."

52:22
Travis: Yeah, so that's what I was saying... I'm using... In our particular case, I'm using Chrome Developer Tools, and I've had this off on the right, so nobody can see that I did it. Let me bring it over for a second, so on this particular one, this Quick Start, here's the Chrome Developer Tools, and I am basically setting it to emulate a mobile device, and you have different options for how you wanna emulate that. The responsive one allows you to just change the size of that and see everything adapt, so that's what I was doing specifically there.

52:54
Don: Thanks, Travis. So how do you incorporate responsive design into a user-configured dashboard?

53:02
Travis: So we do have a Dashboard Component within Ignition that does do a little bit that kind of filling out the space and whatnot, and you can certainly use that component, but then often they'll have breakpoints on there where you wanna orient those things in the grid differently based on those breakpoints. And so using a column layout, the Column Container is very common within a dashboard because it's easy to move those widgets around on a particular screen, or if you're using a combination of the Dashboard Component with breakpoints. It helps you orient where you want those things to be. So then those widgets themselves can be whatever layout you want them to be individually, but also in the top-level one, you kinda want that to control the main flow and layout of that particular page.

53:46
Don: Thanks, Travis, this one is a longer question. Is there a way to dynamically resize components, text, pictures, etcetera, without changing the layout of the screen, keeping the same aspect ratio? For example, you create a Perspective view at 1920 x 1080, and when you resize the screen down to 960 x 540, the aspect ratio is maintained and the display is laid out the same, but all components are half the original size?

54:16
Travis: Yeah, so the Coordinate Container has that Percent Mode, which it will resize those components based on the aspect ratio. Now, if you didn't want to use that, if you wanted to set the size of these things yourself, there is also the ability for you to... We give you properties in Perspective, that is the current width and height of the view that's in the browser, and you could use that as it resizes, you could use that to do bindings and set the width and height or any of the layout properties based on that. It's usually best to stick with one of the container types but you certainly can do more custom things if you need to.

54:54
Don: Thanks, Travis. But I just wanna thank everyone for joining us today. We'll be back next month of course with another informative webinar and until then get all our latest updates on social media and our weekly newsfeed email, so bye for now, have a great day!