Join Paul Trani for an in-depth discussion in this video Creating a layout for mobile, part of Dreamweaver CC 2015: Creating a First Website.
- Probably the most important thing you need to do when you're making a modern website, is make sure it looks great on mobile devices, as more and more people are accessing content on their mobile devices, and that's why we have this media query right down here, this 450 pixels wide media query. And you can see what happens to the content, it gets messed up, to put it honestly. In fact, look at these two columns, way too thin, I actually wanna make them two rows, and really start to modify this layout. And it's great with media queries, I don't have to duplicate this page, it's really just duplicating certain CSS properties that I want to overwrite or change, okay.
And that's what I wanna do right now, as I jump in here, I can select the Styles.css, here are my Global CSS selectors right in here, and I wanna duplicate them for this 450 pixel width media query. Starting with this .asideLeft, you can see as I highlight it, I wanna make that one row all the way across, so all you need to do is right-click, and duplicate that into that specific media query, 450 pixels. Same thing for .sectionRight, as I select it, you can see it highlight, right-click, duplicate into there as well, just like that.
And also, another thing I'm noticing is the background, okay, and honestly a lot of this content gets tough to read, but the point is, is I can take any one of these selectors and I can duplicate it into that media query, and then change it. Alright, so that's what I've done, I've added a total of three, and I can always come back in and add more. But if we take a look, right in here, and I'll select this max width 450px, you can see them right here, the selectors. In fact, if I just click over to the Styles.css, you can see those media queries right down here, so that's what was duplicated.
Now keep in mind, this means Cascading Style Sheets, so it's going to apply all of these properties. In Global, it's going to come down, and then eventually apply these ones for 450, so it's kind of an overwrite, is what we're doing. Alright, so let's have some fun in modifying this content. In fact, what I'd like to do is do a couple things, right in here, .asideLeft. Well, I wanna stretch it all the way across, and notice how I can Show Set Properties for that specific selector, and just so you can see it right here, you can see it's 5% on this side, let's make it 5% margin on the other side.
Okay, and then notice how it says 35% here, well, I wanna make it 90%, 'cause 90 plus five and five, is 100, and now it stretches it all the way across, okay. So that's what I want, I'd say that looks good, I can move on into .sectionRight. Same issue, I wanna make sure the left side is 5%, right side's 5%, and this is gonna be 90%. Now when I type that in, notice what happens, we actually have it going beyond, you could say, 100%, if you will.
And what's going on here, it's because of this padding, okay so it's the padding on the inside, it's adding an additional 5%. So an easy way around that, in this case, is including that 5%, actually means 15% is being taken up by margin and padding, make this 85, and we're good to go there. Alright, so far so good, I like it, there's some more things I can do, especially even with that background, okay, so I'm gonna select the body right here. And I'm gonna scroll down, you can see the background here, bkgdHome.jpg, and I thought it'd be a good idea just to kind of add a white gradient, just so you could see this content, because that background is really busy at this size.
So I can add a gradient, okay, so you can see them here, fades from white to red. I can select the red, and change that red to white, and just make it transparent, okay, so I made a transparent gradient, linear gradient. You might not see anything, because it's actually placing that gradient beneath the bkgdHome.jpg, so all you need to do is flip them. So swap those two, and now you can see it pops, and you could imagine on a mobile device, when you're outside, you can easily see this content, and you still have a feel for the site in general.
Okay, so that's all I need to do, I'd say that looks pretty good, I can scroll down, I can start to adjust even the font size of these different items as well if I want to. I notice this text gets really pretty thin, and that's the last thing I'm gonna do, is jump in here into Global, and notice body is where we're setting all of those font-weights and everything. So in 450px, under body, we have the font-weight right here, and we can change that to say, 600 for instance.
Let's try 900, there we go, that's gonna be much easier to read on a mobile device as well, 'cause it's most important just to make sure we can read that content. Alright, with that done, I'd say it's good, in fact I can try these other media queries as I select them, and as I double-click there, and scale it down, you can see how your content reacts, to make sure your content looks great across all screens.
Over the course of the training, you'll learn about building basic webpages; adding text, links, images, and navigation; and making your layout "flexible" on mobile devices. Each step provides another lesson on HTML and CSS, the building blocks of the web. Along the way, Paul shows how to add bonus features, such as animation from Edge Animate, a Twitter feed, and an interactive contact form.
- Planning a website
- Creating your first webpage
- Adding HTML5 content
- Styling content and the layout with CSS
- Adding images
- Creating navigation
- Building alternate layouts for tablets and mobile devices
- Adding animation and video
- Creating a contact form
- Uploading and testing the website