Another one of the driving forces behind the popularity of HTML5 is the overwhelming support for it on most of the modern mobile browsers (http://mobilehtml5.org). With the loss of Flash Player on all mobile platforms now, the use of HTML5 to deliver content is at an all time high and the usage is growing daily. Applications, frameworks, and templates such as jQuery Mobile (http://jquerymobile.com), Phone Gap (http://phonegap.com), Appcelerator (http://www.appcelerator.com) and the Mobile Boilerplate (http://html5boilerplate.com/html5boilerplate.com/dist/mobile) all of which will be covered in detail in Chapter 5, Code Once, Release Everywhere, are all specifically built to aid web developers for building web content that is specifically targeted for mobile viewing. CSS can be set up in a responsive manner to allow the same page content to be displayed in an optimized format depending on the device and viewport configuration a user is viewing your content with.

The term "responsive layout" seems to get used on a more frequent basis as HTML5 development has grown in popularity. It has, to some, become a keyword to define one of the key features of good HTML5 development. Regardless of how the term is used, at the end of the day when we refer to "responsive layouts" in web development, we are referring to the usage of modern web development techniques to enable the same page content to transition its layout and content within it to adjust for the users device and viewing resolution. In other words, making sure your page content is set up in an optimized manner for all viewing resolutions and is able to transition between any one of the layouts without the need for content of page refreshing.

One of the most important assets when creating responsive layouts is the use of CSS Media Queries. Media Queries allow you to target specific CSS styles depending on your user's device, resolution, rotation, and more. Knowing as much as possible about the device and software loading your HTML documents will allow you to not only specify how specific devices and browsers are to display your content, but it can also allow your code to monitor real-time changes to the viewing methods as well. For instance, the following Media Query example changes the background color depending on device rotation:

@media screen and (orientation:portrait) {
  background-color: #FF0000;
}

@media screen and (orientation:landscape) {
  background-color: #0000FF;
}

The list of CSS Media Queries properties is short but it is important to understand what is available to you when creating your conditions. Therefore, let's quickly review what properties you have at your disposal when writing your Media Queries: