Adobe Dreamweaver CS6 Planning for Multiple Screen Sizes

We are now going to take a look at how to start planning for different screen sizes on your website.0000

And it is a bit of a tricky process to begin, so what I want to do is at least introduce you to the concept enough to be able to start thinking about this.0007

What you are looking at is a page called the media-query.html page, and that is located in the site files for this section of lessons.0019

In the Exercise Files area, there are some new files that you will want to download and add to your course files, if you have been following along, for this chapter.0032

Now, let's take a look at what Dreamweaver can do to assist you in planning for these different screen sizes.0044

First of all, I have a page called media-query.html open; and the idea behind this page is: I want to start planning for different screen-size devices.0050

In order to do that, Dreamweaver actually has these three icons down here; and these are the resolution switcher area, and what it does is allow me to click on the mobile size, and it allows me to view this page as if it was in a mobile device.0063

So notice, this page looks very different than the tablet size; now, their idea of a tablet size may not be the same as what I think, so it is possible to customize these options.0085

You can see, this really is showing up kind of like it's in a mobile phone still; it's still using the mobile phone style sheet instead of moving to a tablet.0102

That is because this one is set up for 768 width, and mine is set up to change at 800 width; so, let's click the desktop size...0114

Now, I have it set up for the desktop size; you can see, here is my image; this will alternately be an image; right now, it's just a placeholder for an image--we haven't quite determined which image is going to go into that area.0129

Let me show you something else: in addition to these three options, the option I prefer a little bit better is: I'm going to click on that one that I had showing to move out of that; and I'm going to grab this side area here, between the document window and the panel; and watch what happens.0145

What I can literally do is move between the different sizes here; and as I do this, you can watch this number for window size, and this allows you to test for the different window sizes.0170

Now, if you look in my CSS Styles panel, you will see that I have a basic CSS style sheet; I have one for the phone--that is for devices between 200 and 800 pixels.0187

Now, this one might be a little bit high--I will probably want to drop that down a little bit, because I don't want my phone version showing at that width.0201

This one is designed for tablet size, so it's going from where the phone size leaves off--from 801 to 1200; as soon as it hits 1201 in width of the browser window, it is going to move into the regular desktop version.0211

On this very narrow resolution on my system here, it is hard for me to actually get into the full desktop version; it is much easier if I'm in the browser.0230

But this is the phone version; this is the tablet version; this is known as a media query.0243

What I have done is created separate CSS files, and these are specifically for working with the browser size--how wide is the browser window?--and then, the browser determines which style sheet to show, based on that width.0250

And I can set these up myself and add them into the coding, so I can control those features.0270

Now, let's put this into the browser, because it's a little bit easier to see, because I can go a little wider.0277

I'll put this into Chrome as an example: notice, my desktop width has a secondary navigation bar location; it also has a spot for the images here.0285

If I grab that browser window and start making it smaller, you can see, this would be the tablet version with the image and whatever else I decide upon to put down here; that would be at the bottom.0298

That image would not have room over here, so it moves to the bottom; as I make this smaller, you will be able to see that it jumps between the tablet size and the phone size (and this is a pretty wide version of the phone size, as I mentioned).0312

But the idea is: these links are bigger to allow for a finger on a mobile device to be able to touch those links much easier.0331

If we are working with the mouse and keyboard, we don't need those quite so big; so I can set them up more like regular hyperlinks that we can work with a cursor on a mouse device--so, a subtle difference between those.0341

Now, this is getting really narrow; so, I did not allow for anything down in this narrow of a web page; that is why I have a little difference there.0356

What I have allowed for is right about here to start.0368

That is just an idea for you of how to plan for the different widths; and what we are going to look at is how to insert these media queries.0373

Now, you will have to create the CSS files and adjust them; but Dreamweaver gives you a really nice interface in order to be able to plan this out within the media query area; and we will look at that at another time.0385

I just wanted to show you this tablet and resolution size switcher, and also show you how you can work, right within the interface, to test these features.0403

I'm in Live View; and you simply grab, in between your panels, the edge of the document window, and you can allow it to adjust.0415

Those are some Dreamweaver tools to assist you in working and setting up your different screen sizes for different devices within Dreamweaver.0425