Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
The many ways visitors access web sites, via mobile devices, tablets, and desktops, now requires sites to incorporate responsive design elements that adapt to different screen sizes and browsers. In this course, Morten Rand-Hendriksen demonstrates design strategies, best practices, and actual code examples for creating a responsive web site. The course covers layout, navigation, responsive video embedding, and content sliders. The final chapter shows how to create an index page with jQuery Masonry, a jQuery plugin that helps you create dynamic grid layouts.
This may seem trivial, but adding a link to the very bottom of your theme pointing the visitor back to the top can be extremely useful. This is especially true if you write long articles or have a lot of content on the page, because navigating to the top of a page with swipe behaviors on a phone can be a real pain. Adding a navigation link back to the top is easy. You just have to target a specific ID within the page markup and add it to the URL. I like to add a specific line of text to this link, just to make a kind of humorous.
So the first thing we are going to do is identify the container we want to target with our link. I'll click somewhere in the main content towards the top to activate my Developer Tools and then find in an id I want to target. Let's say want to move people up to the content ID, found right here. It's pretty much at the top, and it's where the content starts. Then I'm going to add the link to my footer file. So I'll go to my theme, find footer.php, and scroll down to the bottom, and here I'll add a new paragraph right at the end, so it's absolutely at the bottom of the footer.
And inside the paragraph I'm going to add an anchor with the a href of #content, which is that id I just found. I'll close the anchor and add the closing anchor tag, and then I'll put in some link text so it's clear what's going on when you click this link. "You have reached the bottom. Click here to get back on top." The final thing I need to do is close my paragraph. I will now save the footer file, reload my page, scroll all the way to the bottom, and here we now have a link that says, "You've reached the bottom, click here to get back on top." When you click it, we jump all the way back to the top the page.
Like I said, looks trivial, extremely useful. Responsive design is more than content reorganization. It's also adding in-functionality that makes the site easier to use for different users. The return-to-the-top navigation link has little of value for desktop computer users, but is very useful for visitors using smartphones and tablets.
There are currently no FAQs about WordPress: Building Responsive Themes.
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.