Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
Discover how to make your website more readable and efficient across various screen sizes and devices. Join author Chris Converse as he shares his own specialized techniques for creating a responsive site. The course takes the site from start-to-finish, from comping your ideas in Photoshop, to setting up the HTML page and containers, to styling established elements for small, medium, and large screens. In particular, Chris shows how to load images with CSS, reposition the nav bar for better viewing on mobile devices, and how to make the download time faster for small screens by providing multiple versions of your banner graphic and other images. Plus, learn how to replace graphics with high-resolution versions for Retina displays using CSS media queries.
This course was created and produced by Chris Converse. lynda.com is honored to host this training in our library.
For those of you who are going to follow along using Adobe Dreamweaver, I want to point out a few things. First of all, Dreamweaver CS5 and later have full support for HTML5 and CSS3, but it has this full support in the code area only. So the preview area inside of Dreamweaver doesn't have full support for rendering HTML5 and CSS3 while you're actually working on your course. So in this screenshot here, this is what Dreamweaver CS5 and 5.5 will look like when you finished your project. You'll notice that you don't see the heading area at all. The logo is off to the right-hand side.
The navigation appears down below the footer, and the navigation actually extends past the outer page container. Now, if we look at the copy of our final project inside of Dreamweaver CS6, we'll see that this actually looks a little bit closer. We do see the heading area, we see the navigation in the right position, but the logo is off to the right and the width of the navigation element still extends past the overall page container. Now these rendering issues only affect Dreamweaver inside of the design preview. So if we come back to our final project, I'm going to open up the index.html file up in Dreamweaver CS5.5, and this is what we're actually seeing here in the design preview.
But if I come up here and click on the Live View, what Dreamweaver will do is use it's built-in WebKit rendering engine and render this page exactly as we would see it in our web browsers. So once I turn on Live view, I can see the design comes into place. I can scroll down and see all of the design elements are properly being rendered. I can change my window size and see the medium size, and then close this all the way down and see the mobile size. So while we're in Live view, Dreamweaver will show us exactly what this design will look like inside of our Preview mode.
But when I come out of Live view we'll go back to Dreamweaver's default rendering for the preview area. So as you're working along in Dreamweaver, don't take what you see in the design preview area as the final rendering of your page. Make sure you switch into Live view or preview in a browser to see how your project is progressing. And next, we'll talk about how to access code inside of Dreamweaver for both HTML and CSS files.
Find answers to the most frequently asked questions about Creating a Responsive Web Design.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.