How to make a website change for cell phones & tablets – Dreamweaver Templates [11/38]


Hi there, my name is Dan… and this is a free extract… from my longer Dreamweaver course
that’s available on bringyourownlaptop.com Don’t worry, there’s lots
of free stuff here. Check out the description
for the Exercise File… so you can play along
with this tutorial. Also, in the description
there’ll be a link to the Play List… that will show you all the stuff
that is free as part of this course. All right, let’s get on to the tutorial. Hey there, in this tutorial we’re going
to look at adjusting our site… for the different tablet sizes,
and mobile phone sizes. They’re called Media Queries,
you can kind of seem them up the top here. So our website’s a desktop,
the Header there is gray. And if I get down to Tablet size… hey presto, it’s red, and I get
down again to Mobile, and it’s green. I know those are ugly colors. They’re just there as place holders
to test our Media Queries. Let’s go and do that now
in Dreamweaver. So it’s time to get all responsive
and mobile friendly. And it’s actually really easy. So what we need to do is,
look at something called a Media Query. First thing we need to do is look at
these Media Queries Bar. If you can’t see yours, there’s a little
icon here, you can turn on and off. If you don’t have that bar,
or that icon… it might mean that you’re using
an earlier version of Dreamweaver. Maybe CS6, that doesn’t
have this option. Now unfortunately you can’t
follow this particular tutorial. You can still do Media Queries,
but you have to hand code them. You can’t use this nice little
interactive thing at the top here. So we’re going to use this thing. And it kind of tells you what to do, click on this Icon
to add a Media Query. And that Icon is over here,
and that’s in there. So, we’re just going to click on it. And we’re going to say, our first
one is going to be Tablet… because we’ve kind of already
done Desktop. Desktop is considered Global in our case. Some people design their websites
around Mobile first. That term, Mobile first means
I’m going to design it for the Mobile. And then I’m going to make a Media Query
that overrides the Mobile with Tablet… and then over the top of that, in Desktop. I design my websites the other way around. And I always find that my
students find this easier. We design the Desktop version mostly. So often there’s more on that side… and it’s kind of how most
people view a website. It depends on your kind of website… but definitely my stuff, 80% of views
are from Desktop. So I’m using a Desktop first approach. So, we’re going to click this
little ‘+’ button again. And we’re going to work on Tablet first,
so we’re going to say… Tablet is going to be between these two… so it’s going to have a
minimum of a certain size… and a maximum of another size, and that’s
going to be considered Tablet. Now it’s a little hard to get the
exact measurement… because there’s so many Tablets up there,
and so many different sizes. So what we say is, it’s a minimum
of about 401. It’s the smallest. Anything smaller than that,
we’ll consider a Mobile phone. And we do a Media Query
separate for that. How big should it get is… 768 is the width of an iPad,
where it’s in Portrait. So we’ll use that size. There’s no reason why
you couldn’t use 770, or… say this is in the distant future
when there’s lots of different sizes… you might decide that it’s too small,
or different sizes. Kind of just a generalized sizing for now. But it would be a really
typical size to use. Where is it going to go? It’s going to go inside my styles.css I’m going to click ‘OK’,
and you can see here… there’s my little blue bar,
that’s our min-max. It’s got a minimum, and a maximum. And we’re going to have things trigger
when it gets to that size there. Let’s have a little look at our styles.css Click on the related documents bar here. You can see, that is what a Media Query
looks like, it’s a syntax. Again, if you’re using
a version of Dreamweaver… that doesn’t have this
nice little handy bar… you can just type it in here. So, that is considered my Tablet. And what we’ll do is put a
few returns in just above it… and we’ll add some comments,
just so that… later on we know what we’re
talking about, and what we’re doing. To add comments in Dreamweaver… there’s this option here,
it says Apply Comment… css comments look like this. It’s a slash ‘/’, and then,
an asterisk ‘*’. And it needs to go between here,
we can say, this might be my Tablet view. Now this is ignored by the browser,
it’s just here for humans. So you don’t need to write
this, it just means… later on, I can say, go to Tablet view,
and you know where to go. So next thing we’re going to do,
is we’re going to put in our Mobile view. So we’re going to click
on this little ‘+’ again. And we’re going to use a max. So a max width of 400. It’s going to go into style.css,
let’s click ‘OK’. You can kind of see up here,
so, anywhere… up until a maximum of 400… will be my Mobile view, and then,
the Tablet view takes over. And it’s just one pixel more
than my Mobile view. If things were both 400… I’ve no idea about what will happen. They’ll probably just fight it out,
and there’d be blood and css everywhere. So just make sure, 400, and then,
401 is where the next one starts. Now in this tutorial, we’re just doing
Mobile, Tablet, and Desktop. You’ll find lots of other sites that have
five views, or four, or seven views. We’re just going to do three… and professionally that’s normally
all I attack. Small for Mobile, kind of
medium size for Tablets… and a big size for all Desktops. You can see down here, in my css,
I’m going to add that comment again. I’m actually just going to copy this one… and paste it here on top, and this is
going to be my Mobile view. What I’ll also do to make things
a little easier… is we’ll put in, at the top here,
underneath that… we’ll put in this, it’s going to be
my Global view. ‘Global/Desktop View’. Just so that when you’re working,
you kind of know these. Now nothing much happens other than
we’ve got colored boxes up here. Now we need to do some slight adjustments. So what we’re going to do is,
go back to Source Code… and we’ll go to CSS Designer,
and we’ll say… in my Styles menu, we’ve got these guys. Before, we just skipped on clicking
on Global, and these two didn’t exist. Now we can say, I like a Global. I’d say, Global’s got my two Styles
that we’ve got… the Header and the Container. So what I’d like to do is… I want to adjust the background color
of this Header. And I want to do it for Tablet first,
which is this min-max one… which is 401 to 768. And you can see,
there’s no Selectors here. So nothing specific for Tablet,
I’m going to say, yes there is… so it’s going to be now, Header. So, we’ve got one for Header. You’ll notice we’ve got one
for Global Header now… and one for Tablet. Now this one here in Tablet
does nothing yet. I’m just going to go to
‘Background’, ‘Background color’. Pick a big obvious color like red,
hit ‘return’. And I’m going to drag this in. And what you’ll notice is,
nothing happens. I’m going to hit ‘Save All’,
still doesn’t change. That’s why I don’t like using
this Live view at the top here… it’s just the few little things
that don’t update… but if I check it in my browser… here it is, and I drag it down… and I get to my 768,
somewhere around here… hey, that my friends,
is all Media Queries are. You’re just saying,
between these two pixels… do something different,
and we’re saying… override the heading, and
make it red instead of green. We’ll do the same for Mobile,
just jump in here. And I’m going to say, ‘styles.css’
in my maximum of 400. Remember, that’s my Mobile view,
I’m going to say, you, Header… toggling it in, hit ‘return’ again. I’m going to say,
be background color of green. We’re not going to keep this,
this is more of an example. I’m going to hit ‘Save All’,
I’m going to check it in my browser. So, big, Tablet, Mobile. Awesome! That’s what Media Queries are. So we’re going to go through
and do things… like, I’d like the font to be bigger… I’d like this box to stack differently. That’s how we’re going to achieve
all these different things. You can see, the font becomes centered
when it’s Mobile. I want to select the line,
and a bit of some Tablet. It’s smaller when it’s in Mobile… and that’s what we’re going to do… we’re going to say, I want this
heading to be smaller, please. Just within this Media Query. And that’s all Responsive Web Design is. Let’s jump back into Dreamweaver. You can see here, that one’s updated,
that one quite hasn’t yet. ‘Save All’. You can, if you want to
keep using this, you can go to ‘View’… and go to ‘Refresh View’ or ‘F5’. That should get it going. I’m going to double click this gray area
to go fully back out. We’re going to look at the next video… we’re going to look at previewing it
through your phone or tablet. There’s a really cool feature
using Live Preview. Let’s do that in the next tutorial. Hey, if you enjoyed this video,
please ‘Like’ it… and consider subscribing
to my channel. Also, go to bringyourownlaptop… for the full premium version
of this course. Also, on that website is
a free resources section… where you can download PDFs. Especially for this,
the Dreamweaver Cheatsheet. It’s a PDF, you print it off… stick it next to your computer,
and be more awesome. Bye now.

One Comment

Add a Comment

Your email address will not be published. Required fields are marked *