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.
There's one caveat I have to point out before we begin for real. Media queries and responsive design in general rely on modern browsers to work properly. By that I mean if the visitor is using an old and outdated browser or an old computer, they may not get the responsive experience. In fact, they may get a very different experience altogether. This is something you have to keep in mind. The great thing is you can find out who will not see this responsive behavior. If you go to a site like caniuse.com, they keep track of all the browsers that are available and what kind of capabilities those browsers have.
If you scroll down here under CSS, you'll find Media Queries as one of the options. And media queries is the most important component of responsive design. Looking at this table here, you'll see that everything in green means that media queries work and you'll also notice that the only browsers right now who do not support media queries are Internet Explorer 7 and Internet Explorer 8, and of course, Internet Explorer 6 and 5 and so on. This is important because if you know that your clients are mainly using Internet Explorer 8 or 7 and you cannot convince them to upgrade to a more recent browser, like Internet Explorer 9 or 10, then you may want to reconsider using media queries.
But it also means that for every other device and every other browser, media queries are safe to use. My general attitude to this is rather than dumb down the site just so that people who use old versions of Internet Explorer can access the site properly, create a site that has a nice layout in the full size and then let that be the size that people see if they're using these older browsers, and then the responsiveness will kick in for everyone else. And here's the great thing: in almost every case the only people who will actually benefit from the responsive design are people who are on phones and tablets, and those devices already support this type of behavior.
The people who can't access these responsive features are people who use regular old computers, and chances are they won't expect the site to be responsive anyway, so it doesn't really matter. The reason I'm showing you this site and giving you this heads-up is that this doesn't just apply to media queries; it applies to all modern web code. So if you want to build further on this course, or if you encounter strange behavior in the Anaximander theme in older browsers, you should go to caniuse.com and check that specific behavior and see if it's supported in the browser you're seeing the problem in.
Chances are it's an old browser, and that's why it's not supported. And my attitude is, if you're on an old browser--and that I'm talking about a browser that's like three or four or five years old-- I'm not going to design it for you, because then I'll hold the Internet back just so that you can get the proper experience. Harsh? Yes, but that's the only way we'll move forward with web standards. When you build web sites, you're always at the mercy of the browser used to visit those web sites, and that's a factor you have no control over. The best you can do is providing graceful degradation for older browsers or progressive enhancements for newer ones.
The good thing is, for the most part, the issues surrounding smaller screens only show up in newer devices with modern browsers, so it's not that big of an issue. Even so, it's worth taking note of this issue, which is why I bring it up.
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.