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.
Next, we're going to create the graphics for the promos or logos and the little arrows that we're using for our links. So inside of the Art Templates folder in the exercise files, let's open up content-artwork.psd. Now, if you have your Slice tool selected, you'll see the individual slices here. So this is a case where we have a Photoshop file with the slices already saved. So, as you can see, those slices are actually saved with each Photoshop file. Now over on the right-hand side, in the Layers panel here, I have a layer at the bottom called fpo. I'll just turn this on real quick so we can see behind these individual graphics.
These are going to be saved out as 24-bit PNGs, so they are transparent. So I have this gray layer here so we can actually see the artwork. So I'm going to zoom up in here. With our Slice tool selected, we can see the individual slices. I can double-click on one of these, for example, and see promo_1. This is set to 60 pixels by 60 pixels. Over in the Layers panel, I have all of these areas grouped into different folders. So inside promo images, we have each one of these clip grouped into three squares at the bottom. We have our background pattern, which I can see over on the right-hand side here.
We have two styles of arrows. I'll move the canvas over here a little bit and zoom up. This one right here we're going to be using as a CSS sprite and we'll talk about that a little bit later. And this is our mobile arrow, so this is the arrow we're going to use on small screen devices. I'm going to zoom out a little bit. Back in the Layers panel, inside of logo, I have three different sizes of the logo as well. So again, you can come in here and customize any of this artwork. So to save this out, let's make sure we turn off the fpo layer.
I'm going to zoom out. Let's choose File > Save for Web & Devices. And all of the optimization settings are saved with these, so if I select the large logo here, come over here to the right, we can see that this is set to a 24- bit PNG, which is going to give us 16 bits of color, plus 8 bits of transparency, so we'll get a nice gradient mask or semi-transparent pixels on the drop shadow. These graphics up here are all set to JPEGs. The background pattern is set to a JPEG. These small arrows here are both set to PNGs as well.
So from here, let's come down and choose File > Save. Under Slices, let's make sure All User Slices is selected. Up in the operating system, let's choose myWebsite, the images directory, and then hit Save. Here we can see a list of all of the graphics that are going to be modified from Photoshop based on these individual slices. So we'll come over here and click Replace and then Photoshop will overwrite all of those graphics. Once that's complete, we can save and close this file. Now that we have all of the graphics created that we're going to be referencing with our CSS files, next we'll work on hooking the CSS files into the 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.