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.
Now we're going to set some properties and some media queries, so that we can switch out the logos and the banner graphics. So first, let's switch over to screen layout large, that's CSS in your text editor. Inside of here, let's scroll down and find header space A.logo. Here, we can see, the width is set to 150 and the height is set to 85. And we're using logolarge.png as the background graphic. So inside of this rule, let's come in here and add the background size property. And we're going to set the width, which is the first property, to the same setting that we have up here. So we're going to set width to 150 pixels.
Then a space, 85 pixels for the height. Then a semicolon. going to come in here and copy this. Next we'll come up to the header, where we're specifying banner_large.jpg. Let's come in here. Let's add the background size in here as well. Let's change the width to 980. And we'll set the height to 275. Again, to match the height that's set up here. Now with these in place, let's scroll down to the bottom. Let's hit a few Returns. Let's switch over to our snippet. Let's copy this entire media query.
Switch back to screen_large_layout.css. Let's paste this. And now what we're going to do is, let's come up and grab the header and header logo. Let's copy these entire rules. Let's scroll down and paste them inside of here. Now let's come in here and change only the properties that we need to change for the high pixel density. So let's come in here and get rid of height. Let's change background to background image. Let's get rid of the other properties in that shorthand style. Let's also get rid of background-size and now let's change banner_large to banner_large_2x.
Next for the logo, let's get rid of all these properties as well. And let's just leave background-image. And we'll change logo_large to logo large_2X. Now with these rules in place for the large screen, let's come in here and copy this media query and those two rules. Copy to the clipboard. Save your work inside of layout_large. Let's switch over to screen_layout_medium.css. Down here at the bottom, let's paste in those rules. Let's come down here and change banner_large to banner_medium. Let me copy the name medium.
Let's change logo_large to logo_medium_2x. Then let's scroll up, let's find header space, a logo. After background image. Let's hit Return. Let's add background size. Again we're going to follow the width and height set up here. So, 115 for the width, and 70 pixels for the height. Semicolon. And up here for the header, let's hit Return. Let's add background size. The width is going to be 800 pixels. And the height's going to be 200 pixels.
Now with our medium CSS modified, let's save our work. Let's switch over to screen_layout_small.css. Let's scroll down to the bottom. Hit a few returns. Let's paste in the media query and the CSS rules from the large_screen_size. Let's come down here and change banner_large to banner_small. And change the logo to logo_small. Let's scroll up. Let's find the header. Let's set background size to 500 pixels wide by 85 pixels tall. Then let's come down to the header A .logo. And here we're going to set background size to 105 pixels by 40 pixels.
And then save your file. And now with all of these changes in place, we have a design that'll not only change it's layout based on screen size. But it'll also change the individual graphics based on the pixel density of the device that's looking at your website. Now earlier in the course we talked about the fact that this particular design approach not only changes the layout, but also changes the download size. Supporting high definition graphics means that the download is going to be a lot larger. If we take a look at the new download settings for devices that have high pixel density displays, we'll see that the large screen will go from 180 kilobytes to approximately 365 kilobytes.
Medium will go from 73 to 176 and small screens will go from 32 to 61 kilobytes. Now one thing you'll want to experiment with is for the double-sized graphics, setting the compression settings a little bit lower. Since the graphics are going to be scaled down to match the size of the devices, you might be able to get away with compressing the images a little bit more to get your file sizes down.
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.