Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
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.
Before we get started, let me quickly explain how this course is going to work. The idea of this course is to give you the tools and understanding necessary to build your own custom responsive themes or to take existing themes and make them responsive. To make this process easier, I've created a custom theme just for you that you can use as you follow along with this course. The theme start off as a regular static theme and as you progress, you'll incorporate responsive features that in the end will make it fully responsive.
All the techniques taught in this course are universal, but you may have to change them a bit to fit different themes. The cool thing about this course is that when you're done, you'll have a fully responsive and quite advanced theme you can use for your own web site. I designed and built a theme with this in mind so that you didn't have to start over with your old theme when you're done, unless you want to, that is. Let's take a look at this new theme called Anaximander and see what it does once you're finished with the course. The theme comes with lots of built-in functionality.
From the top, this themes has optional social icons, if you want to link your theme to Twitter or Facebook, along with a search box. Then we have a custom header with a custom menu that's hooked into the WordPress menu system that has nice dropdowns. The header is responsive, and you can also add an optional header image if you want to. In the course, I'll show you how to add a featured content slider, like the one you see here. We'll also incorporate what's called the Masonry-type layouts. It start to type of layout you see here on the front page, where all the content stacks next one another. And if we resize the window, you'll see the content reorganize to fit the screen.
And if we go into a single post, you'll see we have a responsive layout again that responds to the size of the screen and fits all screens, and we also have advanced features like the display of related posts under each individual single post, and footer widgets. In developing this course, I wanted to give you a reward at the end, which is why I built the Anaximander theme. Once you've completed this course, you'll have an advanced responsive WordPress theme you can use for your own web site if you like, and this theme is only available right here on lynda.com.
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.