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.
Right now, on our small screen device, our navigation links looks like text links. So what we're going to do is write some CSS properties to turn these into links that look more like mobile link buttons. So let's come back to our text editor. After our nav element, nav a, beginning and ending in bracket. Let's split that open. The first thing we're going to do is set the color. That's going to be #a6abc5;. Next, we're going to set display. We're going to set this to block. So, we want to have the anchor links on the small screen behave like blocks, so they'll be more like paragraph or div tags, rather than inline blocks or inline elements from the large screen.
Next property, we're going to set margin, 15 pixels for all sides. Let's hit a return. padding we're going to set 9 pixels for all sides. Next, we're going to set border. So border:, we're going to use shorthand style here, which is the size, then style, then color. So for the size it's going to be 1 pixel, hit a space, solid, space, #a6abc5;.
Let's hit a Return. We're going to set background, url beginning and ending parenthesis, ../images/mobile_link_arrow.png, space, set the repeat to no-repeat. Let's set the X property to right and the Y property to center. Now the next property we're going to create is going to be for rounded corners.
These are CSS3 properties, and some browser still require special flags until the CSS3 specification has been finalized. So we're going to target Mozilla and WebKit. Mozilla powers Firefox and WebKit powers Chrome, Safari, Android, and iOS devices. So let's start by typing -moz-border-radius: 12 px. Let's come in here and select and copy that entire property.
Let's hit a return. Let's paste on the next line and replace the moz with webkit. Let's hit a return. Let's paste that rule again, and let's remove the browser flags. So the final CSS3 property will be called border-radius, set to 12 pixels. Now, the next rule we're going to create is going to be for a hover state. So nav a:hover, beginning and ending bracket.
We're going to set color of the type to white, so #fff. Next we're going to set background-color and in here, instead of using a pound sign, we're going to use a color space called rgba. So let's type rgba, beginning and ending parenthesis. Inside the parentheses, we're going to specify the values for red, green, and blue, and the fourth property, which is the a, stands for alpha, or the amount of transparency. So to get white, we want to have 255 for the first value, comma, 255 for the second, 255 for the third.
So red, green, and blue are all set to their maximum values, which gives us white, then a comma, and then .15 for 15% alpha, or 85% transparent. Then outside the parentheses, we'll hit a semicolon. Let's save our work. Let's come back out to our browser. Let's hit Reload. Let's scroll down a little bit, and now we'll see that our anchor links have changed from looking more like text to now looking like mobile link buttons. Now, I do like to specify a hover state on my mobile links, for two reasons. One, if somebody condenses their browser down, like we're doing here, they can get the hover state with their mouse, and second, most touch devices will activate the hover state when somebody taps on that individual link. So this will give the users feedback that they've actually tapped on a specific link.
So now that our navigation is positioned and styled for small screens, next we can work on the promo area.
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.