responsive web design

responsive web design

SUBTITLE'S INFO:

Language: English

Type: Robot

Number of phrases: 409

Number of words: 3050

Number of symbols: 13127

DOWNLOAD SUBTITLES:

DOWNLOAD AUDIO AND VIDEO:

SUBTITLES:

Subtitles generated by robot
00:00
in this video I want to talk to you about how to make a responsive website a responsive website is one that responds to whatever device is looking at it in other words it accommodates the browser or the window when it's viewed by the user I'll show you what I mean by looking at this demonstration website I'm building right here called dot-com classroom as you can see I've built my website here on my canvas but I'm gonna click the f5 button on my keyboard so we can preview this in a browser so here's what this website would look like on a desktop and it looks normal you can scroll down and you can see I have
00:31
several objects I've got some rollover text objects I've got what's called a mega menu another kind of a menu up here a lot of text even a video and some images as you would expect but watch what happens to these objects when I reduce the size of the browser I'm gonna go down to about the size of a tablet and you can see that the website has actually shifted or changed in fact it has responded to accommodate this size of a view so if I was looking at this
01:02
website on say a tablet it would look like this you'll notice everything still fits and kind of shifted over some things got a little smaller for example this menu and if I go all the way down say to a smartphone size you'll notice that it shifts considerably to accommodate a 320 pixel browser this is what responsive design is and in this video I'm going to show you how to work with the responsive design tools so that you can build the same kind of websites so let's stretch it out again and you can see it responds okay let's close the preview and look at
01:33
what we've done first of all you may or may not have noticed that at the top of my canvas where the ruler bar is you can see there are a couple of arrows there's one right here at about 320 pixels then there's one over here at about 768 pixels and then there's the end of my ruler which is the default it's called this is the desktop size I want you to see what happens when I click on these little arrows when I click on this one you'll notice that the canvas changed this is called a breakpoint or a variation of this same web page so when I click on this I'm now working with the
02:04
web page in a 768 pixel view and if I click on this arrow I'm now working in the 320 pixel variation this same page it's important to know that I'm working with many of the same objects because that's still one page but it's one page with three variations one at 320 pixels one at 768 pixels and then again my default size which is around a thousand pixels let me show you how I added these breakpoints we could go up to the responsive design
02:36
tools as you can see right here and simply click on add breakpoint I've already added a 320 and of course I added the 768 there's some other presets or you can type in your own number if you want to I'm going to cancel out of this and show you something else there's another way to manage the responsive design tools I'm going to move the camera down to the bottom of the screen so you can see sometimes it's a little faster to just bring your mouse down here and grab these you can see that I can add breakpoints by clicking this button and brings up that same prompt or I can manage my breakpoints the ones I've already created by simply clicking
03:07
that one it's also a quick way for me to toggle between my breakpoints right now my canvas is working with the default size if I wanted to switch to the tablet size I'd click here and you can see the canvas is now showing those objects the same is true for the 320 pixel let's go back to the default and let me show you one other thing that's important to know before we start working with breakpoints and responsive design I'm moving the camera back up so you can see a little more of the screen and I'm moving it all the way to the left because what you may not have noticed is that I have another
03:38
palette open it might be familiar with the toolbox but I went up to the View menu earlier and I also click on this one called object manager because as we're working with responsive design tools we're gonna want this object manager open this feature allows us to see all of the objects on our page and sometimes we want objects to be visible or invisible depending on the break point we're working with with that in mind understanding how we add breakpoints and that there are variations of the same page and how we can work with these objects and the
04:10
object manager let me show you something to help you get started with the concept of responsive web design so now here I am with a blank page and that's why the object manager is also blank because it would show the objects on the canvas now we're gonna start with adding breakpoints we can do that by going to the page menu and use the responsive web design tools or again we could scroll to the bottom of the canvas and use this option down here to create breakpoints for now we'll use the page menu at the top I'll click here to add a breakpoint I'm getting out of 320
04:39
I'm also going to add one called 768 that's my second breakpoint and now remember I have a default breakpoint as well therefore I have a total of three variations now now notice that I'm currently in the default variation so any design work that I do right now is going to appear on the default variation if I want to design my 768 variation I'd need to click on this arrow or go to the bottom of the page and click the 768 so that I can change to the tablet variation and start designing that and again to design the mobile size with a
05:12
320 I would click here and I'd be working within this area of the canvas so it's important to know which variation you're working in however here's something that's even more important you should know when you add an object that object is a single object on the page even though it may be shared across variations here's what I mean I'm in the default mode right now I'm going to stay there but I have to move the camera so you can see the object manager I'm going to grab the image tool and add an image to the default variation click
05:42
open and here's the image you'll notice that this image only shows in the default variation watch if I switch to the tablet it doesn't show if I switch to the 320 it doesn't show although the image still exists it's just not visible watch the object manager as I switch between variations right now I'm in the 320 you'll notice that this image is not visible when I click on the tablet the image is still part of this page it's just not visible and when I click back to default you'll see that it is in fact
06:14
visible and that shows in the object manager that's important because it gives you control over which objects you want to share between variations and that's going to be really great for you so you don't have to keep reinventing the wheel as you're adding objects to your responsive web page I can decide to use this image on any one or more of the variations as I so choose but here's where it gets really interesting while I can share this object among the variations one of the things that I can do is I can change its size or its location and it will not
06:46
affect how it shows on the other variations let me show you what I mean let's have this image show on all three variations just for this demonstration so in other words I'm gonna click the 320 and then go over to my object manager and I'm going to share this image between the default and the 320 I'm also going to click on the 768 and also go to the object manager and show this image so now this image is shared among all three variations and you can see that as I toggle between them it's still there however watch what happens now I'm
07:17
currently on the default variation I'm gonna move this all the way over to the center of the page notice that when I go to any of the other variations while the image is still there it did not move Here I am in the 320 Here I am in the default because I can change the location of an image and still have it to be shared as one image let's go to the 768 you can see that the image is still there a watch I can even change its dimension and have it not affect the other variations so let's recap here I
07:49
am in the default or the images in the center Here I am in the 320 where the image is in its original position and then the 768 it's even larger it's still the same image but what I can change is its size and its location and still we're only working with one single image one single object what I can't do is change the contents of this object and have it vary if I change the contents of this object it will change across all three variations let me show you what I
08:19
mean let's go back to the default and double click on this image and instead of a number one let's pick a different image in fact I'll choose the number to select open now since I've changed the contents of this object it's actually going to be shared across all variations so whether I'm a default mobile or tablet you can see that it affected all the variations so what I can do is I can change its location and I can change its dimension and still be sharing the same object that's very important to note in fact it's so important that I want to
08:50
demonstrate it with another common object text tool so I'm gonna make a piece of text right here now I happen to be in the tablet size variation right now so this text is only visible by default in the tablet variation if I click to the 320 again you'll see it's not visible if I could click to the default you'll see that it's not visible and again you can confirm that in the object manager I have to go to the tablet size to see that I have this object only showing here although I can again share it if I wanted to and again I can change the position of it so let's go to the 320
09:21
and let's make it visible there let's go to the default and make it visible there so now it's shared across all three variations but in the default let's put it up toward the top of the page again remember I can change the position when I go back to the mobile still the same object different position I go back to the tablet same object different position what I can't do is I can't change the contents of this without affecting all of the other variations since I changed the text here and since
09:52
it's the same text object it's going to say the same thing in every variation here's the thing to remember remember that you're working with a single object and that that object can be shared you can always change the location and the dimension and that will change but the contents of the object must stay the same that means sometimes you'll want to make a special object just for one particular variation that's only used in that variation and you'll choose that by using the object manager better way to explain it is to go back to our demonstration of the dot-com classroom
10:24
website and I'll show you what I've done so let's open up that here we are back at the dot-com classroom website now what I'm going to do is I'm going to move the camera so you can see that I'm in the default setting here when I go to the 768 you can see that I've designed the website like this I've also made a 320 and I've designed the website like this and you'll notice that some of these objects change for example let's go back to the default and let's talk about just this menu this is called the CSS menu in fact according to the object manager its CSS menu number two is when
10:55
I select it you see it highlights in the object manager and of course it's visible for this variation when I made my tablet variation I had to change the contents of this menu to a smaller font that may I needed a new CSS menu I didn't want to share this one so when you go to the tablet size you'll see that CSS menu is now invisible but instead I've got a different CSS menu I called the CSS menu 1 and since I changed the contents I had to make a new one this is its own object and it only shows in this variation if
11:25
we go to the 320 variation it's not there at all because I don't want to use a CSS menu when somebody's looking at this on a smartphone so I don't allow either of those to be displayed instead I used a whole new object called a panel menu which is right here this is only visible in this variation because it's only applicable to a 320 pixel view and it's all because of the object manager that I can control which objects are shared which ones are invisible now each of these objects are gonna be different for example this text object works fine in every variation it's called text
11:57
object number 8 and it's inside a layer layer number 2 so if you look at the 768 layer number 2 and text object number 8 are the same exact object they're visible in all three variations because they fit just fine here we are again with layer number 2 and text object number 8 so they're being shared across all three because they fit just fine let me show you another trick in the default variation I'm using this menu called a mega menu I'm gonna preview and show you what it does when you hover
12:27
over the mega menu I set it up to be sort of a three column selection of menu items and it works great especially in this desktop size and in fact if we shrink this down to be more of a tablet size the mega menu works even fine in the template size and so I just kept it shared between 768 and the default size but when I got to the 320 size the mega menu wouldn't work as a three column so I made a new mega menu and changed its format its contents to be a single column so what I'm doing is
12:58
I'm sharing the mega menu that has multiple columns in the larger variations and I made a unique mega menu just for the mobile size the 320 now you can see I've done that for many many of the objects for the desktop version I'm using an effect called a rollover text that's what these five boxes are and you may have noticed when we did the desktop view when you roll your mouse over these they have a really cool effect well that great for a desktop the problem is when this shows up on an iPad or a smartphone there is no mouse and so there is going
13:29
to be no effect so I can't use this in those other variations so these objects are only visible in the desktop version when I made the 768 version these are not rollover text objects these are instead just images that link to wherever I want to link these two so here they're just images and as you can see an object manager if we move the camera down these images are down here they are visible in the 768 version of the webpage and they're visible in the
14:01
320 pixel version of the web page but notice that I change their location because remember I can change the position or the size and still share the object so these five objects are being shared between two variations even though they're in different locations we go back to the default these are not those objects you can see they're not visible instead these objects are visible so hopefully that gives you an idea but you can see that as we make different variations of the page we're going to be moving objects in two different locations just like I did with
14:32
my video you'll notice that I moved everything over to fit here and when I made the mobile version I made the video much smaller obviously so it fits down here just be mindful that you can share objects or not share objects based on what the need is for that particular variation or break point you control that with the object manager hopefully that helps you get started making great responsive websites

DOWNLOAD SUBTITLES: