Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
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.
Now before we start building our HTML and CSS, we need to plan our layout. So what I have inside of folder 3 is a file called A-design.psd. This is a source Photoshop file that will help you sort of decide the colors in photography, if you want to modify or change the design. So over in the Layers panel here, we have all of the content here broken into folders. So Promo 3, for example, is this promo area down here on the right-hand side. And we also have done a few things in here which will help you sort of style some of the content.
We have a link color block here, and this is clip grouped into the text here. So if I come up to the Layer menu, come down and say Release Clipping Mask, you can see that this is just a box. Let's re-enable that. Let's go to Layer > Create Clipping Mask. And we took this box and actually wrapped it inside of a Smart Object. So if I double-click this link color, what we've done is take the Smart Object, duplicated it all around the canvas, and used it as our linking color. So if I came in here, for example, and changed the orange to green and hit Save in the Smart Object, notice in the background, all of the individual links that we've clip grouped into type now change to green.
This gives us a really quick way to sort of mock up what our linking colors are going to look like for our client. Now, it is worth noting that if you're using Photoshop CS6, they do have paragraph and character styles in CS6, so you can create the same linking effect using character styles instead of this clipped-in Smart Object. Inside of the heading area, you'll see that we've used clipping groups for the main image as well, so I can select this graphic here and move this around and change to crop of the photograph at the top. So again, this file is here to help you customize the photography and link colors and the promo graphics for your project.
Now, I am going to be touching on more web tools built into Photoshop when we get to the graphics section. But if you want to learn more about using Photoshop for web design, I suggest taking Justin Seeley's course in lynda.com online training library entitled Photoshop for Web Design. And now since this design comp gives us a pretty good idea on the colors and the basic structure, I want to bring up a sketch, so we can take a look at how we're going to migrate this design across different screen sizes. We're going to start by creating a main page container. Inside of the page container, we're going to have an area for the header.
This is going to have a background graphic with our photograph at the top. We're going to have a navigation area and article area, a promo container, and inside of the promo container, we're going to have three individual promo containers for each individual promo, and then our footer. And as you can see, as the highlights are moving around on the sketch, you can see where these individual containers are going to be placed based on the user's screen size. And now that we know all of the main HTML containers that we need, next we can start working on our HTML file.
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.