🚨 Heads up! This course is no longer supported. We recommend checking out our Webflow Essentials course.
How to make a website change for mobile cell phones & tablets using Dreamweaver.
Questions
Student Gallery
Be the first to share something.
Course info
Overview
We’ll use Dreamweaver's handy templating tools to make updates to our site super easy. We’ll create our very own mobile 'burger menu' from scratch learning some basic Javascript & jQuery.
Now web design can sometimes be tricky so I am here to help - just message me if you get stuck. There are also exercise files so you can follow along. I even save a full copy of the website at the end of every video so that you can check yours again mine if you’re is not working quite right.
- You will need a copy of Adobe Dreamweaver CC 2017 or above. A free trial can be downloaded from Adobe.
- No previous web design skills are needed.
- No previous Dreamweaver skills are needed.
What am I going to get from this course?
- 39 lectures 3+ hours of well-structured content!
- You'll learn to build a responsive portfolio website from scratch.
- Learn how to take a design from Illustrator & create a professional website.
- How to use templates in Dreamweaver.
- Create mobile, tablet & desktop versions of the website.
- Build our own custom responsive navigation with burger menu.
- Introduction to Javascript & jQuery.
- How to publish your website to the internet.
- Ways to preview your designs straight to your mobile device.
- How to get the most from your portfolio Images.
- How to use beautiful web fonts in your designs.
- You will get the finished files so you never fall behind.
- Downloadable exercise files & cheat sheet.
- Forum support from me and the rest of the BYOL crew.
- All the techniques used by professional website designers.
What is the target audience?
- YES: This course is for beginners. Aimed at people new to the world of web design. No previous Dreamweaver experience is necessary.
- NO: This course is NOT suited to people experienced in using HTML & CSS.
Course duration approx 4 hours + your study.
Daniel Walter Scott
Founder of Bring Your Own Laptop & Chief Instructor
I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.
Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.
Downloads & Exercise files
Transcript
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 us what to do, it says, 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.
How do I make a website responsive in Dreamweaver?
Use media queries to override your site’s default CSS at different browser widths. In Dreamweaver, add tablet and mobile width ranges to your stylesheet, then use CSS Designer to change the styles within each range. Start with obvious background colours so you can easily check that the queries work.
How to Make Your Website Responsive for Tablet and Mobile in Dreamweaver
Key takeaways
Keep your desktop design as the global starting point, then add smaller-screen overrides.
Create a tablet query from 401px to 768px and a mobile query up to 400px for this example.
Select the correct media query before adding rules in CSS Designer.
Test with temporary colours before changing typography and layouts.
Check your work in a browser if Dreamweaver’s Live View does not update.
How media queries make a website responsive
A media query lets you say, “When the browser is within this width range, do something different.” That might mean changing a heading size, centring some text, or making boxes stack differently.
We’ll start with something much more obvious: a header that is grey on desktop, red on tablet and green on mobile. Are those colours beautiful? Not particularly. They are simply test colours that make it easy to tell whether the right styles are being applied.
Creating the media query does not change the design on its own. It creates a place for the CSS rules that should apply at a particular size. We still need to add those rules.
Choose your starting point: desktop-first or mobile-first
For this example, the desktop design is already in place. Its styles are our global styles, and we’ll override selected properties for tablet and mobile. That is a desktop-first approach.
Mobile-first works the other way round. You design the mobile version as the starting point, then add media queries for tablet and desktop.
I find desktop-first easier to teach when there is already a fuller desktop design to work from. The best starting point for your own project also depends on the site and how people use it. Neither approach changes the basic idea: keep a base set of styles, then make targeted adjustments at other sizes.
We’ll use three size categories:
Desktop: the global design, with no smaller-screen overrides above 768px.
Tablet: a minimum width of 401px and a maximum width of 768px.
Mobile: a maximum width of 400px.
These are example breakpoints, not universal definitions of phones and tablets. The 768px choice comes from the portrait width of an iPad used as a reference here. There are plenty of different device sizes, so you can choose different boundaries when your design needs them.
Some sites use four, five or more size ranges. We’re keeping things manageable with small, medium and large.
1. Find Dreamweaver’s media queries bar
Look above the page preview for the visual media queries bar. If it is hidden, use its toggle icon to display it.
If neither the bar nor its icon is available, you may be using an older version of Dreamweaver, such as CS6. You can still use CSS media queries, but you will need to write them by hand rather than use this interactive workflow.
With the bar visible, find the plus button for adding a media query.
2. Create the tablet media query
Click the plus button to add a media query.
Choose the option that includes both a minimum and a maximum width.
Set the minimum width to 401px.
Set the maximum width to 768px.
Choose styles.css as the destination stylesheet.
Click OK.
Dreamweaver adds a coloured range to the media queries bar. This represents the interval in which the tablet-specific rules can apply.
Open styles.css from the related files above the document to inspect the generated CSS. The query contains the width conditions, with braces ready to hold your tablet rules.
3. Add the mobile media query
Click the plus button again. This time, choose a query with a maximum width only.
Set the maximum width to 400px.
Choose styles.css again.
Click OK.
For our example, mobile styles apply up to and including 400px, and the tablet range starts at 401px. Keeping these ranges separate makes it easier to understand which query you are testing.
The coloured ranges identify the mobile and tablet queries above the page preview.
Label the stylesheet so it stays readable
Add comments to identify the three sections of your stylesheet:
Global / desktop view
Tablet view
Mobile view
Dreamweaver’s Apply Comment option can insert CSS comments for you. CSS comments begin with /* and end with */. The browser ignores them, but they make it much easier to find the right section later.
4. Change the header colour for tablet
Return to the page source and open CSS Designer. Select styles.css.
Previously, you only had the global context to work in. Now the media query list also contains the tablet and mobile conditions. Selecting a context determines where your new CSS rule will go.
Select the tablet query, with its 401px minimum and 768px maximum.
Add a header selector.
Open the Background properties.
Set the background colour to an obvious red.
Save all files.
You now have a global header rule and a tablet-specific header rule. The tablet rule only needs to contain the property you want to change. You do not need to recreate the entire header styling.
The global styles remain the foundation. Within the tablet range, the new background declaration overrides the grey background.
5. Add the mobile header override
In CSS Designer, select the media query with a maximum width of 400px. Add another header selector, then set its background colour to green and save all files.
The essential CSS for this colour test looks like this:
/* Global / desktop view */
header {
background-color: grey;
}
/* Tablet view */
@media (min-width: 401px) and (max-width: 768px) {
header {
background-color: red;
}
}
/* Mobile view */
@media (max-width: 400px) {
header {
background-color: green;
}
}
This is the same principle whether you create the rules through Dreamweaver’s panels or type them into the stylesheet yourself.
6. Test the queries in a browser
Open the page in a browser and gradually narrow the window. The header should change as the available width crosses the boundaries:
Above 768px: grey, from the global rule.
From 401px to 768px: red, from the tablet rule.
At 400px and below: green, from the mobile rule.
Widen the window again to check the changes in reverse. Those deliberately loud colours make it much easier to spot whether the conditions are working.
If Live View does not show your changes
Dreamweaver’s Live View can occasionally lag behind. You may save everything and resize the preview, only to find the old colour still sitting there.
Before assuming your CSS is broken:
Use Save All.
Check the page in a browser.
In Dreamweaver, choose View > Refresh View, or press F5.
To return the preview to its full available width, double-click the grey area beside the narrowed page.
Use the same technique for the real responsive design
Once the colour test works, the useful design changes follow exactly the same pattern. Select the relevant query, choose the element, and adjust the property that needs to change.
For example, you can:
Make a heading smaller on mobile.
Centre text on mobile while keeping it left-aligned on tablet.
Change how content boxes stack at smaller widths.
Adjust font sizes for each layout.
The same content can use different heading sizes, alignment and stacking across three layouts.
The colours are only a quick check. The real goal is to make the same content work comfortably at different widths, with each media query holding just the changes that size needs.
Key terms
Media query
A CSS condition that allows a group of rules to apply only when its requirements are met. Here, those requirements are minimum and maximum browser widths.
Breakpoint
A width boundary where a responsive styling change begins or ends. This example uses 400px, 401px and 768px to define its smaller-screen ranges.
Global styles
The base CSS outside the media queries. These styles apply across sizes unless another applicable rule overrides them.
Desktop-first
An approach that starts with the desktop design and adds overrides for smaller widths. Mobile-first starts with the mobile design and adds adjustments for larger widths.
CSS selector
The part of a CSS rule that identifies the element to style. In this example, header selects the page’s header element.
FAQs
Do I have to use 400px and 768px as my breakpoints?
No. They are the example widths used here, not fixed requirements for responsive web design. Different designs and device sizes may call for different boundaries.
Why does nothing change after I create a media query?
A new query only defines a condition. Add a selector and a property inside that query, then test at a width that meets the condition.
Can I create media queries without Dreamweaver’s visual bar?
Yes. You can write the media queries directly in your CSS file. The visual bar is a convenient editing tool, not a requirement for the CSS to work.
Should I keep the red and green header backgrounds?
Only if they suit your design. Here, they are temporary test colours used to confirm that the tablet and mobile overrides work.
Written by Daniel Walter Scott — Founder of Bring Your Own Laptop & Chief Instructor
