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.
One common solution to dealing with sidebars on mobile devices is to simply hide them if the screen is too small. I tend to agree with the strategy, as stacking the sidebar underneath the main content can produce an awfully long page on a mobile phone, and you have to scroll a lot to get to where you want to go. But hiding content with media queries has a couple of unintended drawbacks. First, let's take a look at how you would hide the sidebar. In the previous movie, we used media queries to move the sidebar down to the bottom of the page when the window is too small to fit it, and we also added a bunch of extra styles to make the sidebar styling fit with the rest of the page when the sidebar is at the bottom. You can see it if you resize the window here. You will see the sidebar disappeared.
When I scroll down, the sidebar now appears at the bottom. But if you don't want to show the sidebar at all, and you want to hide it using media queries, instead of adding all the extra styling, all you have to do is find the container--in this case id sidebar--and simply say display: none. When we reload this page now, you'll see that the sidebar is gone. It's not here on the bottom, and if we resize the window, the sidebar reappears.
That also means all this extra style code that we added earlier is now just a waste of code, so you can remove it if you want to. But I said there were some unintended drawbacks of hiding the sidebar. You see, what happens when we use media query is is we're just changing the style code on the page; we're not changing the content itself. That means even if the sidebar is hidden, like what we see here, the sidebar is still there in the code; we're literally just not showing it. This may be a problem in some cases because sidebars often have large content in them.
That large content may be ads from Google or another ad source, or images or videos or other things. And even though we're hiding it using CSS, all that content is still loaded into the phone or loaded into the tablet, and the browser is working hard to render all that information only to not display it. If you ask me, hiding a sidebar on mobile devices is a preferred option to avoid too much clutter. If you want to go this route, you just have to keep in mind that you're still downloading all the content that's in that sidebar.
So don't put too much heavy material in the sidebar so that you're using up extra data to download something that you are not going to show.
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.