Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Creating a mobile layout

From: Creating a First Web Site with Dreamweaver CS6

Video: Creating a mobile layout

It's becoming increasingly important to make sure your content looks great across screens, everything from your desktop to a tablet to a mobile device, and it's only going to get more important. So how does this look across different screens? Well, I can view this in a web browser how I've been doing, but another thing I can do, with the Live View on, I can go ahead and just resize this index.html, and look what's happening. This is the window size right here. I can see what it looks like. That gives me the exact positioning of everything and the exact size of that window.

Creating a mobile layout

It's becoming increasingly important to make sure your content looks great across screens, everything from your desktop to a tablet to a mobile device, and it's only going to get more important. So how does this look across different screens? Well, I can view this in a web browser how I've been doing, but another thing I can do, with the Live View on, I can go ahead and just resize this index.html, and look what's happening. This is the window size right here. I can see what it looks like. That gives me the exact positioning of everything and the exact size of that window.

So I can scale it down that way to see how that looks, or I can click these options right here to see the Desktop size, to see a Tablet size, so 768x1024, and that looks pretty good, and even down to a Mobile size. So that's the 480x800. So it's a great way to quickly see what your content will look like across different devices. I'll turn off that one, and know that right in here for this Window size, you can pick different sizes as well or even edit them.

But in this case, everything looks pretty good except for when I get down to this smaller size. Look what's happening. On a mobile device, look at this, this text is being cut off. In fact, I think I can scroll over to see it. This content isn't using efficient use of the space. So I need to start modifying this appropriately for these different screens. And how I'm going to do that is I am going to use media queries, specifically one media query that will query the device even the browser, and it's able to determine the size of that browser window, and then it will use the appropriate CSS depending on that screen size.

And in order to that, we can go to Modify, down to Media Queries. Media Queries is what I'm picking. And I am just going to write a media query to this document. That's where the media query is going to exist, make sure that's checked to force the device to report the actual width, and right down here this is where I can add as many media queries as I want to. I'm only going to add one. So I am going to click this plus sign, it's going to add one. Right down here I can say hey, you know what? Let's make this for mobile. I can say whenever the Maximum Width is about 800 pixels because this is for mobile.

I can use an existing file, but I don't have one. So I need to create a new one, clicking that folder. Now remember this stylesheet.css exists, it's actually in my CSS folder, so that right here that's where that exists so that's where I actually want to put my mobile.css as well, my new mobile.css. That initially is not going to contain anything. So that's what I've implemented that media query that will query the device. If it's the Maximum Width is 800 pixels, then it will show the CSS in this file, so I am selecting OK. All right! That's implemented.

You can see my original style sheet and then my mobile.css. But let's take a look as I go to this Split view. Right in here, here's the media query that's implemented, it says hey, you know what? We are going to use this CSS file whenever the Max Width is 800 pixels. So that's what it implements, and then I can take a look at this CSS. All right! Now it's not going to do any good. I need to pick out the elements that I want to change for my mobile.css.

So I am going to be taking items from my stylesheet.css which initially gets applied. So let's take a look at this. Here's my stylesheet.css. All of these styles will get applied, and then I can overwrite them by whatever styles I put in this mobile.css. So let's take a look. As I start to resize this down, the first thing I am going to do is this section, I actually want it to expand all the way over. So I want it to be 90% instead of 60%. So that's what I want to do.

And I also probably want to fix this text, so it wraps to the next line. Those are just couple of the things I am going to do, and in fact, as I take a look at this, I can go into my Source Code, it might be easier to check out the different CSS as I can see right in here, the selectors. This section is what I need, so an easy way to do that is right-click and just say hey, go to that code.

It'll go to that stylesheet.css and right here here's that section.css. Well, this is what I want, so I can easily select all of this code right here and copy it. Then I can go to my mobile.css and hit Return and then right-click and paste it in. From there, in fact if I click Refresh, notice how mobile.css has that section in it. Now I can manipulate this, a couple of different ways.

Quite frankly, I can double-click on it and change the Rule definition in here, if I want to. So I can change the Box Width to 90% just like that, or I can actually type it in right here. In fact, I am going to change the Width to 90%. I don't want it to float to the right. Okay, so I am going to select None. In fact, if I take a look even at the Positioning, I can see the Placement, it's going to be 5% from the right side, and I probably want it to be 5% from the left side.

So I am doing everything in this panel. As I click OK, you can see it applied those changes and implemented it right over here. So I can just as easily start to manipulate any of these properties in here as well. Say for instance even as I scroll on a mobile device, I want as much contrast as possible so this text is easy to read. So I want to get rid of that transparency. So right in here, for the background- color, this .8 is your 80%. I can change that to 1 just like that, clicking there.

And yes, that is very legible. And again, if you are on a mobile device, and you get some sun glare, it's still going to be pretty easy to read that text, okay? So that's what I have done, that looks pretty good. I like how I've implemented this and overwritten anything that was applied from the style sheet, basically customized for mobile. Now it looks good, so I will save that. The next thing I need to tackle is this text right here, okay, because as I size that down, that text gets cut off. So I need to wrap it to the next line.

So if I take a look at that in the stylesheet.css right in here, that's actually my header that I'm dealing with. So I can Go to Code which will take me to that stylesheet.css, I can copy that, go to the mobile.css just below that, hitting Return a couple of times, clicking Paste, pasting that in. And now I can change mainly the Width. So the Width, I want to the say hey, you know what? As I scale it down, when it hits about the size right here--see how it overlaps, kind of gets cut off right there? Well, that's about 680 pixels wide.

So maybe at that point, that's when I want that to change. But really what I want to happen is kind of, you know, I want this style sheet to be implemented when it gets about that size, but really I want it to wrap to the next line about 480 pixels. So that's the size of the box is like this size. So I am going to change this from 680 to 480, like that, click again here, and it wraps to that next line.

So let's scale it, it goes from there, hits that 800 mark, which will implement the mobile.css, and then it wraps to the next line. So a couple of tweaks I need to do here. The first thing I notice is this panel needs to move down more. Well, how would I do that? Well, that's the section here, if I take a look. Well, moving it down from the top right here, I can go ahead and change that to 260, refreshing, and you can see it's moved it down, this has plenty of space.

Another thing I noticed--and really this is the last change I want to make here-- is this text gets hard to read and really backgrounds in general might not be the best thing to do on a mobile device, because you want to just focus on the content and focus on these quick 2-minute tasks that people are doing while they're waiting in line or in a plane with their phone during a commercial. So I actually want to not have that content scale back there. So I still want that nice gradient, a nice background, but I don't want it to scale and thus make this text illegible. So I need to take a look at that background.

If I take a look over here for the body, right down here the background-size is set to cover. So let's go right-click, Go to Code, here's my body right here. I can take this, copy it, go to my mobile.css, paste to that in just like that. And I am going to change the background-size from cover to something else. And there is a couple ways of doing this. I can come over here and select it right in here. In fact, I can change that Auto.

Another way to do it is you have code hinting right in here, so I can just go with that colon, and you can see how that pops up, auto, so I can select it that way, hit Enter, and there's my semicolon. So as I click in here, you can see that it changes, and it doesn't scale down that background. So much easier to read, so much more appropriate for a mobile device as I scroll up and down. Now keep in mind, technically since I'm not changing these other elements, I can always get rid of them.

And it's often a good idea to do so because it just means more lines of code that you don't need so I can jump in here, start getting rid of that, getting rid of this line and anything else that I didn't change. So for the section just like that, the floating, the padding, I didn't change any of that. You can really start to slim it up and eliminate a couple more lines right in here, in fact, these three. And look, this is all I've done. I have just manipulated these properties.

Now keep in mind, this is a separate CSS file, has that little asterisk, says hey, you know what? I haven't been saved yet. So always just save all related files just like that, and you could always hit the Refresh button which you can easily see how that's implemented. But let's take a look because I actually did eliminate something that I actually should've kept in here, and it's actually has to do with the section. So if I go down in here to the section, and the thing that I actually need to fix is the float, okay. So that's something I actually eliminated that I didn't mean to.

So I am going to change this to None just like that. All right! There we are, it's nice and centered, everything looks good. I can save all my related files, I can view it right in here if I want to, watch that scale up and down, I can even view it from Desktop to tablet, clear down to mobile device. You can see how everything is laid out. So that's how you can easily take your current content and actually restyle it so it fits appropriately. Regardless of the screen size, you can implement as many media queries as you want.

Show transcript

This video is part of

Image for Creating a First Web Site with Dreamweaver CS6
Creating a First Web Site with Dreamweaver CS6

30 video lessons · 40438 viewers

Paul Trani
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Creating a First Web Site with Dreamweaver CS6.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.