Adobe Muse 2016 Responsive Tutorial | Where to Put Your Breakpoints

all right it's time we start talking about break points break points are these little spots that we can add to the width of our website that determine when the layout changes and how the layout changes so here on this particular demo which is a part of a webpage I have no break points well technically I have one break point 960 which for those of you who have edited video it's like having one keyframe it you need to in order to make a change happen so right now no change is happening whatsoever and you'll notice that as I go beyond this point here the layout of these objects does not continue to stretch in width and that's because of this little icon here the arrows I could say I want to continue expanding this on and on and on or I want to stop it I want to cap it at my widest break point which right now is 960 so a lot of people are asking now how wide should my widest break point be how wide should my mobile break point B what about iPad do I need a tablet or iPad or a large smartphone like a Galaxy Note do I need a break point for that because it's much bigger than a phone and still smaller than a computer screen and all these questions are being asked and they're really there are two major schools of thought when it comes to adding break points and one is adding the break point based on the device or the size of the screen on the device the other school of thought is based on the design the design breaking so to speak so as I compress this down we get to a point where the design doesn't make sense anymore things are bumping into each other and it's just it's not looking good anymore so that would be a good time to add a break point if you were doing this based on your generic typical mobile breakpoints or your generic typical tablet break points one you already have a problem because what are the generic typical break points here's an unfortunate fact Android devices there are more than 24,000 physically different Android devices so what's the most popular size for your screen here's where it gets interesting the screen size the screen resolution is not what matters every device and the web browser of that device has this attribute called the viewport size so an iPhone for example let's take the iphone six-plus because it's a weird one that's easy to understand the iPhone six-plus turned on its side is 1920 by 1080 that's 1080p it's the resolution of your 60-inch Plasma TV so is that a practical size for viewing things at the same resolution that you would view them on a computer screen that's 1920 by 1080 or a 60-inch Plasma TV that's 1920 by 1080 the answer is no everything would be so small you would have to zoom in you wouldn't be able to read it because the screen so small and it doesn't have to do with the resolution so there are all these viewport sizes a very common viewport width is 320 pixels even though the screens aren't 320 pixels it renders things as if the screen is 320 pixels it's kind of a fake-out so let's take a look here at popular viewport sizes and you can see that this this data was pulled from a database of all different viewport sizes and I was looking at it my head was spinning and I was thinking wouldn't it be nice if they just put them in order of the most common two least common but they didn't so I did so 320 is the most common portrait orientation viewport size which is very small but there are a lot of small smartphones out there and then 480 is the most common landscape which these are most likely related it's most likely a lot of these 3 20 devices turned on their side are 480 but what it really comes down to is based on this data which is a combination of tablets and smartphones you can safely presume that a smartphone is going to have a very small viewport so if you create a breakpoint that's any wider than 480 then you're probably going to be capturing most smartphones turn on their side both portrait and landscape and that's not a bad idea setting your breakpoint at 480 but there are a lot of bigger devices there's the iPhone 6 the iPhone 6 plus and there are a lot of those out there in the world so you may want to consider a wider mobile breakpoint but if we forget about the devices for a second let's go back to the design let's say that we add our first breakpoint our mobile breakpoint at 480 so as we make this smaller and smaller and smaller well that doesn't make much sense because our design is already completely destroyed by the time we get to 480 so in this example this is a good example of let's not think about the device let's think about the design so I'm going to go and squeeze this down until the design doesn't make much sense anymore and right about here it starts getting a little bit squeezed so I might want to add a new breakpoint here and on the breakpoint bar we can now see that I have this layout and this layout and if you're anywhere in between and you try to make a change it snaps to the breakpoint that you're within it won't let you make a change here when I click you can actually see my cursor saying no you can't make a change when I click it kind of scrolls me back out so you can see that things are getting a little bit funky already and we want to make sure of a few things before before we know that we're going to see success as we shrink this down and down you can see that already things are not centered and there are a number of reasons that that stuff can happen that things kind of slip and slide off-center one reason is that at your largest break point things weren't centered in the first place and if we drag this to and fro we can check and see if it is centered and it looks like it is actually centered now the other thing is the different objects are going to flow with the browser based on where they are relative to the middle and the sides and the spaces between them so it's very automatic so it doesn't always do what you want if I select this box in the middle this button in the middle and this icon in the middle and I go up here to the control bar up here there is a little box next to pin that allows us to pin how this moves with the browser so if I click the center I'm saying keep this lined up with the center of the browser and then for these guys you could probably guess I'm going to say keep lined up with the right side of the browser and with these guys I'm going to say keep lined up with the left side of the browser so now as I scale it down see the one in the middle stays in the middle and the ones on the side move inward but you'll notice there's no accommodation to the size of these objects with regard to the size of the space that they're in so I can select these all of them and I can go back up here and next to the pinning there's resize and I can tell the resize that I would like these to be responsive width and height and when I do that I'm saying well let's fix this size problem as we scroll in you'll notice the text boxes don't seem to be doing it and that's because text boxes actually can't have responsive width and height so they didn't actually even do anything those I'm going to set to responsive width because that's our best option for text and you'll see the text actually begins to wrap as the container for the text gets squeezed and the icons get smaller then we get to our mobile breakpoint and now that we're at our mobile breakpoint we can change this layout altogether this actually this could be a tablet layout at this particular width but let's just say that we just want to have a big size and a small size so we'll say that this is the smaller size because it is it's the smaller of the two so now I'm going to make a drastic change here's where it's good here's where it gets cool I'm going to make this taller way taller I'm going to scoot this button down and I'm going to lay it out in a way that's more conducive to a skinny squished screen I'm going to take this and scoot it down I'm going to take this and scoot it down Center it up I'm going to take this and move it up top front in the center and I'm not lined up with the center of the page but I could select all these this would probably be the smart thing to do select all these things and go over here to a line and tell it to Center align so that's much better and you can see here that I didn't give myself enough height so I'm going to give myself even more height and I'm going to slide this down and I'm going to kind of vertically Center this up a little bit okay cool so now that we've got that going on as we get smaller and smaller and smaller we're not going to have the same problem but see how we've got this sort of slip and slide issue again where it's not centered up when we added the pinning to Center these things we had already created this break point so this break point doesn't inherit the changes that we make here to the layout so I've got to go and do it again it's a really good idea to get all these details dialed in before creating your break points so that way it gets carried over but a lot of things change anyway so it almost doesn't even matter like in this case I'd still have to select them all and choose Center because some of these were set to the left and some of these were set to the right so that wouldn't have been helpful in the first place so now let me scroll up and as I make it smaller you can see on this breakpoint I also told the icons to resize because they needed to because we were losing horizontal space and then when we get to here they no longer resize because I didn't tell them to and they really don't need to we don't have an issue with the width of these items as the viewport becomes smaller and smaller and smaller so it's really a non-issue you also have with your breakpoints some properties that you can play with and you can double click on the breakpoint and you can view these properties so a breakpoint doesn't even have to be responsive so to speak you can tell it to be fixed with so it doesn't it doesn't act stretchy and then when you get to the point that you'd like it to change you can still add a breakpoint and change it and that one also doesn't have to be stretchy and I've noticed it kind of a trend on a lot of websites and I'm trying to remember which website I saw this on recently I believe it was Prezi the the website for that slideshow that online slideshow builder Prezi has a semi responsive layout where the bigger breakpoints are static where nothing is stretchy but it switches from layout to layout to layout as you shrink the window and then once you get to the smallest size it becomes elastic because mobile devices vary so much in size and you want it to fit no matter what so you get to choose from break point to break point if you want it to be fixed or if you want it to be fluid and you get to adjust the break point with here and set your margins and stuff another thing is the little icons up here you might be wondering what they mean that relates to the fluid versus static so if I change this from fluid to fixed where it's static see those little arrows go away and that represents the fixed width static and that represents the elastic or fluid whit so I'll cancel that and it'll go back to being fluid and then again don't forget about these little arrows because these little arrows determine whether or not things continue to stretch and in this case grow because I told them they were allowed to grow which can cause problems so I'm going to cap it there and you'll notice that the background continues to grow and you might be thinking well you just said it doesn't continue to grow so what's up with that it has to do with the old school stretch to browser width you guys might remember we could do 100% page with objects before the responsive update came out in Muse we still have that option stretched a browser with which overrides this maximum cap that we have here so even if we don't allow the page to expand we can still do our 100% page with elements which is great for things like this background background boxes hero images hero slideshows at the top of the page banners navigation bars and footers you get to have all that continue to expand even if you cap the main layout so it doesn't go absolutely haywire on a large screen so this is the idea we're just adding these breakpoints and we're kind of playing with them to make sure that our design works at every given size and that we don't have any weird collisions so again it's up to you if you want to consider the devices more or if you want to consider the design more but if you put the devices first and you put the screen sizes first you're going to have a problem with your design it's more than likely that you're going to have things bumping into one another running into one another so consider the design first that's rule number one design first so hopefully you guys enjoyed this tutorial I've got more responsive stuff coming soon I've got more widgets coming soon templates all kinds of good stuff so stay tuned subscribe if you haven't already and post up in the comments what you guys are doing about your breakpoints because nobody has to agree everyone's going to get to a different spot with this because again it is based on your design and your design only and they're all going to be different so stay tuned

Channel: Joseph Angelo Todaro

Views: 141,137

Keywords: adobe, muse, cc, creative cloud, Adobe Photoshop (Software), Adobe Systems (Organization), Adobe Muse, Tutorial, Live, photoshop, adobe photoshop, mac, osx, finder, howto, editing, graphic design, web design, sliding, panels, parallax, scrolling, icons, png, graphics, composition, slideshow, layers, Windows, OS X (Operating System), Mac OS (Operating System), scroll effects, scroll motion, 8.0, new features, top features, navigation, update, Typekit, Tips And Tricks, 2016, February, breakpoints

Id: _ppJEBwF678

Length: 12min 39sec (759 seconds)

Published: Tue Feb 23 2016