In this lesson, we’re going to take a look at how Brizy differs from many of its peers in how it handles dealing with mobile and responsive design. Now, with over 54 of websites being visited on mobiles, it’s key to make sure that you get a great experience for your users when they’re using a mobile device. We can easily view what our design is going to look like across the devices by simply using the icon, on the left hand, side and choosing between desktop tablet and mobile. Let’s switch over to tablet view and you can see this is now what our design is going to look like. We can repeat that by going over to mobile view, and once again we see a great representation of what our design is going to look like.

Let’s go back switch this back into desktop view. Now we’ve got our fonts, our colors and everything set out and it looks great, but we might want to make a different experience for someone. That’s on a tablet to do that. It’s quite easy. Inside Brizy, we’re going to use what’s called instancing and all that really means is.

We can change various different parameters for our design based upon the device that we’re viewing it on tablet, mobile and desktop. So, let’s start off with a really simple example: let’s open up the tablet view and let’s say we want to change the color of this hero section at the top. We can select, it choose our background color and then we can choose any of our predefined global colors or set something up completely new. Let’s take one of our global colors. Let’s choose this purple and you can see that now updates our background color.

If we switch back over into mobile view or desktop view, our original color scheme is all in place and the same goes for switching over to mobile switch back to tablet, and our new color scheme is in place now. This is a pretty simple example: there’s still lots of other things that we can do using these different instances for our different layouts, let’s say, for example, you only want to show something on a particular device, and you want to hide it on another one. Let’s take this little subheading section, we can select this or we can select to make this invisible, so we’ll disable it, and that now closes things up. Let’s also go ahead and make some adjustments to the spacing. So, let’s just give ourselves a little bit more breathing room underneath here, so we’ve now made two changes: let’s switch our responsive view back into desktop and you’ll see that our color scheme is back, our sub heading is back and our original spacing is back there’s one Final thing, I want to show you we can do with the working with instances and that’s the ability to switch column order.

So let’s switch back into our tablet view and let’s say in our tablet view we want this picture on the right hand, side to actually be over the left hand, side, let’s simply select the column. I click in the little blue arrow and we’re going to use the reverse column icon once you do that, we’ve now reversed the columns. So if we switch back into our desktop view, you can see our images over the right hand. Side. We switch over into tablet view it’s on the left hand, side and if we switch into mobile view it’s stacked on top of each other okay.

So let’s go ahead and undo all the changes you just made and then go back over into the desktop view. Now, Brizy’s instances are incredibly powerful when you want to get creative with your designs. However, there are still some things that don’t change based upon using these instances. For example, if we make a change to the text, all the instances will show that change. So, for example, let’s just go ahead and change this little subheading section make it a little shorter.

Now, let’s switch over to one of the other instances. We switch to tablet view and you can see our shorter version is in there and the same goes if we switch to mobile view. So these are the kinds of things you need to take into consideration when you’re, using these instances to create multiple different types of designs based upon the device. You want the viewer to view the website on. Finally, let’s just take a look at how the interface changes when you’re working with the different instances kicking things off with the desktop.

You can see that we have pretty much every option available if we select text all our options are available, select an icon, all the options select a column or a section. All the options are available inside there and the same goes. If we look on the left hand side, we have all the tools, including the ability to add in new elements. Now, let’s switch to a different layout. For example, let’s switch over into the tablet view, and now we go ahead and select something like this typography.

The settings you can see, we now have a streamlined set of options, and these are the options that we can change. So, for example, we can change the visibility, we can change the typography, the alignment, the advanced settings and so on. The same thing goes: if we select the image, we now get a streamlined set of options specific to what we can use to make changes. For example, if we open up the image itself, we can adjust the position of this. We can adjust the zoom those kinds of things so using these instance in options inside Brizy gives us a lot of flexibility on our design and how we can change things and create great experiences based upon the device that the user is actually going to use.

To view our website