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, to begin supporting high-resolution displays, the first thing we need to do is create some high-resolution graphics. So inside of the exercise files for chapter 12, let's open up folder six, and let's open up the high-definition-artwork.psd file. Now, what I've done in this Photoshop file is, double the canvas size and double the size of all of the individual graphics and the slices. If you want to learn more about what you can do with the Slice tool to create high definition graphics, I have another course on the lynda.com online training library called the Slice Tool, which is inside of the Design the Web series. And to see the canvas settings you can come down to the Image menu and come down and choose Image Size.
You'll also see here that I have the resolution still set to 72 DPI. The resolution setting has no impact on the way screens display graphics, whether it's a mobile device or a computer, but the resolution does change the behavior inside of Photoshop. So I like to keep this at 72 so that if I use the text tool for example and I use ten point type, it will take roughly ten pixels on the canvas. But again, the resolution has no impact on whether graphics are high definition or not. So I"m going to cancel out of here. So to demonstrate the size of these new graphics I'm going to come over here and select the Slice tool. I'll bring up the slice options for banner large.
Here you'll see that the width is set to 1960 pixels and the height is set to 550 pixels. This is double the size of the original graphic. So as I mentioned before, resolution has no impact on the way graphics look on screen. But what does have an impact is the overall pixels. So when we talk about pixel density, standard or low density is considered to be somewhere around 120 pixels per inch. And when we start to consider high density displays these devices support up to 240 pixels per inch. And if we square that, we'll have quadruple the number of pixels from a standard display.
And this isn't even as high as some of the new devices that have been coming now, which can support three and four times the size of the standard density. Now, in this course so far, we've created standard size resolution graphics. Our banner graphic for large screens was set to 980 pixels wide, and on a standard display, this graphic looks perfect. Now, however, when we consider higher resolution displays, when we use the same graphic on those higher resolution displays, when we look at these, they'll start to look really soft or out of focus. What's happening here is these devices have more pixels than is in the actual graphic itself.
So this graphic is now being stretched across more pixels than are in the actual file. To alleviate this, we can create graphics that are double the size in the actual pixels. And then those larger graphics are going to be scaled down to these devices. All that extra data from this scaling down of the graphics can be represented in all of the extra pixels on these screens. So now back in Photoshop I'm going to cancel out of the Slice Options. I'm going to go back to the myWebsite folder on the desktop here and open up the images directory. So here are all of the standard graphics we created earlier.
So let's go back over to Photoshop. Let's come up to the File menu. Let's choose Save for Web. going to zoom out here to see all the slices. I can select each of these slices, and see the compression settings. I've kept the compression setting quality the same for all of these. Let's come down and choose Save. Now from this dialogue box, we're going to come down and choose All User Slices. Next, let's come down to Settings. Let's go down to Other. And under Saving Files, we're going to keep this slice name. And then for the second parameter here, for the final naming, let's put _2x.
This will indicate to us that these graphics are double the size of the originals. Let's click OK. Let's choose my website. Let's pick the images directory and then hit Save. Back in the my website folder on the desktop, we'll now see we have a _2x for all of the individual graphics that we have doubled in size. Now, if you'd like to use this Photoshop file to create your standard definition graphics from the same slices. Let's come back to Photoshop, let's do File>Save for Web again. And what we can do in here, is select all of the slices, hold in the Shift key. With all of these selected, you can come down here to the Percent.
Put in 50% here. What Photoshop will do is scale all of these graphics to half the original size. You can click Save. Still targeting the images directory, come down to Settings. Choose Other. And then come in here and remove the _2x on the slice name. Click OK, hit Save. These are already here, so I'm going to hit Replace. And then Photoshop will recreate all of these standard size graphics, as well. Now that we have all of our graphics created to support high resolution displays, next we'll modify our CSS file to include these high resolution graphics in devices that support them.
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.