Creating Responsive HTML5 Page Using Media Queries

Jayakumar 9/28/2012 CSS3 , HTML5 , Media Queries , Responsive 13 comments

About Responsive Web Page

Responsive Web Page is a page that responds to the screen size, platform and orientation which helps user to easily check the page. The web page can be made responsive by mixing of flexible widths, intelligent structure and proper use of CSS media queries.

A responsive web page helps user to easily switch from their laptop to iPad and any other devices which will render that page. The web page automatically switches to the required dimensions and helps user to enjoy the page at any resolutions.

In other words, it automatically responds to the user’s preferences and hence eliminates the need for another web page for targeting different gadgets in the market. All this is made possible by the use of Media Queries.

About Media Queries

Media queries was used even in CSS2 when it allowed us to create specific style-sheets for media type such as print or screen. Now with the additions in CSS3, Media Queries has become more powerful and efficient to use in the web pages.

Media Queries allows us to add expressions to media type to check for specific conditions and depending on that make adjustments in the stylesheet to display our page with respect to those conditions.

For example, you can specify different styles for desktop and different styles for mobile. It is extremely powerful because it allows us to make web page render in almost all different resolutions and devices without changing the content. So lets move ahead and see how this can be done.

Creating Responsive Web Page

About `@media all`

When you use @media all it will add the style to all media. Even if we don’t add it in the media query, by default all is the value considered.
As per W3org,

A shorthand syntax is offered for media queries that apply to all media types; the keyword ‘all’ can be left out (along with the trailing ‘and’). I.e. if the media type is not explicitly given it is ‘all’.

About `@media screen and (min-width: 1401px)`

As we discussed so far, when we add screen then the device type the style will apply is screen and the other condition is that when the minimum width is 1401px the style inside that will execute. That is, if the size is 1401px or above the style will respond.

About `@media screen and (max-width: 1401px)`

Now again the device type targeted is screen but if the code is max-width: 1401px then the style will only respond till 1401px or below. That is, it will not execute the specific style if the width is above 1401px.

About `@media screen and (min-width: 1200px) and (max-width: 1400px)`

Now here is the main part, the device type is screen and we can restrict the style to execute in specific range. That is if (min-width: 1200px) and (max-width: 1400px) then the style inside the media query will only apply when the width is between 1200px and 1400px.
This makes the web page extremely powerful because now we don’t need to create another page for a specific width. Suppose If we want to see the same site in iPad or iPhone, all we have to do is yes you are right. Just make changes in the minimum width and maximum width and the style will execute depending on the conditions mentioned.
But that is not the only thing. One more important thing is to add the most important meta tag with the code shown below to the head area.

Adding `meta` tag to render it properly in mobile phones

1	`<meta name="viewport"` `content="width=device-width; initial-scale=1"` `/>`

The above code will help the site to render beautifully in the mobile devices such as iPhone etc. Because adding the meta viewport code overrides the default of mobile devices which rescales the web page to fit the tiny screen. But with the use of meta viewport the issue is sorted by leaving them as per the device width that is if their width is the same as the device’s width more specifically for iphone (in either portrait or lanscape mode).

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1" />
<title>Creating Responsive HTML5 Page Using Media Queries</title>
<style>
/*HTML5 Tags Styles starts here */
header, hgroup, nav, article, section, footer, aside, address{ display:block;}
time{  font-style:italic; padding:0px 5px;}
address{ font-size:11px; padding:10px 10px; text-align:right }
body{ font-family:Georgia, "Times New Roman", Times, serif; }
h1{
    font-size: 25px; margin:0px;}
.sidebar h1, #comments h1{ font-size:18px; padding:0px; border-bottom:2px solid #dedede;}
/*
Main Styles
*/
#Wrapper{ width: 90%; margin:0px auto;}
#Wrapper2{ overflow:hidden; border:1px dotted #ddd;}
#header {
    width: 100%;
     
}
#navigation {
    height: 37px;
    border: 1px solid #ddd;
    margin:0px auto;
    background-color:#f9f9f9;
    background-image:-webkit-linear-gradient( 90deg, #ccc 0%, #f9f9f9 10%, #fff 90%, #ccc 100%)
}
#navigation ul {
    list-style: none;
    margin:0px;
    padding:0px;
}
#navigation ul li {
    float: left;
    border-right: 1px solid #ddd;
    text-shadow: 0 1px 0 #fff;
} 
#navigation ul li:nth-last-child(1){ border-right:none;}
#navigation ul li a {
    display: inline-block;
    padding: 0 15px;
    height: 37px;
    line-height: 38px;
    text-decoration: none;
    font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    color: #888;
    font-weight: bold;
}
#navigation ul li a:active {
    background: #f6f6f6;
    -webkit-box-shadow: inset 0 2px 5px #ddd;
    -moz-box-shadow: inset 0 2px 5px #ddd;
    box-shadow: inset 0 2px 5px #ddd;
}
#navigation ul li a:hover{ color:#000;}
#title h1 a, #title h1 a:hover, #title h1 a:hover, #title h1 a:hover  { 
    margin: 40px auto 20px auto;
    padding: 15px auto;
    display: inline-block;
    text-decoration: none;
    color: #444;
    -webkit-font-smoothing: antialiased;
    border-bottom: 6px solid transparent;
    text-rendering: optimizeLegibility;
     
}
#title h1 a:hover {
    border-bottom: 6px solid #eee;
}
#title h2 {
    font-weight: bold;
    color: #aaa;
    font-size: 14px;
    line-height: 140%;
    font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    padding:5px 0px;
}
#title h2 small {
    color: #000;
    font-size: 13px;
     
    font-weight: bold;
    text-transform: uppercase;
}
#title h2 a {
    text-decoration: none;
    color: #999;
}
#contents{
    min-height: 408px;
    width: 65%;
    float: left;
    padding:15px;
    overflow:hidden;
    line-height:21px;
}
#contents h1{ padding:5px 0px;}
#sidebar-wrapper {
    float: left;
    width:29%;
    padding:10px;
    border-right:1px solid #ccc;
     
     
}
.sidebar {
    float: left;
    padding: 10px;
    width:90%;
}
.sidebar li{ padding:5px 0px;}
#comments article{ background-color:#fff; }
#comments footer{ background-color:#f9f9f9;border-top:2px solid #CCC;border-bottom:3px solid #CCC; font-size:11px;}
#comments footer p{ padding:0px; margin:0px; }
blockquote{ padding:10px; margin:0px 0px; border-bottom:1px solid #dedede;}
blockquote:before {
content: '\201C';
}
blockquote:after {
content: '\201D';
}
#copyrights{border-top:3px solid #CCC;border-bottom:3px solid #CCC;}
#copyrights p{ float:left; margin:10px 15px 0px 0px;}
@media all {
    #Wrapper,#navigation ul li a {
        -webkit-transition: width 1s ease-in-out;
        -moz-transition: width 1s ease-in-out;
        -o-transition: width 1s ease-in-out;
        transition: width 1s ease-in-out;
    }
}
@media screen and (min-width: 1401px){
    #Wrapper{ width: 1300px; margin:0px auto;}
    #contents{
    width: 65%;
    }
}
@media screen and (min-width: 1200px) and (max-width: 1400px) {
    #Wrapper{ width: 1100px; margin:0px auto;}
    #contents{
    width: 65%;
    }
}
@media screen and (min-width: 961px) and (max-width: 1200px) {
    #Wrapper{ width: 960px; margin:0px auto;}
    #contents{
    width: 65%;
    }
    #contents h1{ line-height:30px;}
}
@media screen and (min-width: 859px) and (max-width: 960px) {
    #Wrapper{ width: 830px; margin:0px auto;}
    #navigation ul li a{ font-size:12px; padding:0px 11px;}
    #contents{
    width: 63%;
    }
    #contents h1{ line-height:30px;}
}
@media screen and (min-width: 761px) and (max-width: 860px) {
    #Wrapper{ width: 740px; margin:0px auto;}
    #navigation ul li a{ font-size:12px; padding:0px 11px;}
    #contents{
    width: 63%;
    }
    #contents h1{ line-height:30px;}
}
@media screen and (min-width: 641px) and (max-width: 760px) {   
    #Wrapper{ width: 620px; margin:0px auto;}
    header{ text-align:center;}
    #navigation{ height:190px;}
    #navigation ul li{ float:none; text-align:center; border-bottom:1px solid #dedede; }
    #navigation ul li a{ font-size:11px; padding:0px 0px; width:100%;}
    #contents{
    width: 55%;
    font-size:12px;
    }
    #contents h1{ font-size:16px; text-align:left;}
    #comments h1,.sidebar h1{ font-size:12px; text-align:left;}
    #sidebar-wrapper {
    float: left; font-size:11px;
    width:30%;clear:both;
    }
}
@media screen and (min-width: 421px) and (max-width: 640px) {
    #Wrapper{ width: 420px; margin:0px auto;}
    header{ text-align:center;}
    #navigation{ height:190px;}
    #navigation ul li{ float:none; text-align:center; border-bottom:1px solid #dedede; }
    #navigation ul li a{ font-size:11px; padding:0px 0px; width:100%;}
    #contents{
    width: 95%;
    font-size:12px;position:relative;
    }
    #contents h1{ font-size:16px; text-align:left;}
    #comments h1,.sidebar h1{ font-size:12px; text-align:left;}
    #sidebar-wrapper {
    float: none; font-size:11px;
    width:95%;clear:both; 
    }
}
@media screen and (min-width: 320px) and (max-width: 420px) {
    #Wrapper{ width: 320px; margin:0px auto;}
    header{ text-align:center;}
    #navigation{ height:190px;}
    #navigation ul li{ float:none; text-align:center; border-bottom:1px solid #dedede; }
    #navigation ul li a{ font-size:11px; padding:0px 0px; width:100%;}
    #contents{
    width: 95%;
    font-size:12px;position:relative;
    }
    #contents h1{ font-size:16px; text-align:left;}
    #comments h1,.sidebar h1{ font-size:12px; text-align:left;}
    #sidebar-wrapper {
    float: none; font-size:11px;
    width:95%;clear:both; 
    }
}
@media screen and (min-width: 0px) and (max-width: 319px) {
    #Wrapper{ width: 100%; margin:0px auto;}
    header{ text-align:center;}
    #navigation{ height:190px;}
    #navigation ul li{ float:none; text-align:center; border-bottom:1px solid #dedede; }
    #navigation ul li a{ font-size:11px; padding:0px 0px; width:100%;}
    #contents{
    width: 95%;
    font-size:12px;position:relative;
    }
    #contents h1{ font-size:16px; text-align:left;}
    #comments h1,.sidebar h1{ font-size:12px; text-align:left;}
    #sidebar-wrapper {
    float: none; font-size:11px;
    width:95%;clear:both; 
    }
}
/* ----------------------------------------------------------- all the css for print ------------------------------------------------------------- */
@media print {
     
}
/*HTML5 Tags Styles ends here */
</style>
<script>
document.createElement('header');document.createElement('hgroup');
document.createElement('nav');document.createElement('article');
document.createElement('section');document.createElement('time');
document.createElement('footer');document.createElement('aside');
document.createElement('address');
</script>
</head>
<body>
<!-- Div Wrapper Element Starts Here -->
<div id="Wrapper">
<!-- Header Element Starts Here -->
<header id="header">
    <!-- Hgroup Element Starts Here -->
  <hgroup id="title">
    <h1>HTML5</h1>
    <h2>Fifth <small>major</small> revision!</h2>
  </hgroup>
  <!-- Hgroup Element Ends Here -->
   
  <!-- Nav Element Starts Here -->
  <nav id="navigation">
    <ul>
    <li><a href="#" target="_blank">Our Home</a></li>
      <li><a href="#" target="_blank">RSS Feed of all articles</a></li>
      <li><a href="#" target="_blank">JOIN US on TWITTER</a></li>
      <li><a href="#" target="_blank">JOIN US on FACEBOOK</a></li>
      <li><a href="#" target="_blank">Contact Us</a></li>
    </ul>
  </nav>
  <!-- Nav Element Ends Here -->
   
</header>
<!-- Header Element Ends Here -->
<!-- Div wrapper2 starts here -->
<div id="Wrapper2">
<!-- Aside Element Starts Here -->
<aside id="sidebar-wrapper">
  <!-- this aside contains two sections that are tangentially related
  to the page, namely, links to other blogs, and links to blog posts
  from this blog -->
  <nav class="sidebar">
   <h1>My Links</h1>
   <ul>
    <li><a href="#" target="_blank">Portfolio</a>
    <li><a href="#" target="_blank">Twitter</a>
   </ul>
  </nav>
  <nav class="sidebar">
   <h1>Recent Posts</h1>
   <ol reversed>
    <li><a href="#" target="_blank">CSS3 Image Rack Part 2</a>
    <li><a href="#" target="_blank">CSS3 Image Rack Part 1</a>
   </ol>
  </nav>
  
 <!-- Aside Element Ends Here -->
  
 <!-- Another Aside Element Starts Here -->
 <section class="sidebar">
  <!-- this aside is tangentially related to the page also, it
  contains twitter messages from the blog -->
  <h1>Twitter Feed</h1>
  <blockquote cite="#">
   CSS3 Image Rack Part 2 <a href="#" target="_blank">#5</a>
  </blockquote>
  <blockquote cite="#">
   CSS3 Image Rack Part 1 <a href="#" target="_blank">#>
  </blockquote>
   
  </section>
 </aside>
 <!-- Another Aside Element Ends Here -->
<!-- Article Element Starts Here -->
<article id="contents">
<!-- Article's Header Element Starts Here -->
  <header>
    <h1>Creating Responsive HTML5 Page Using Media Queries</h1>
  </header>
<!-- Article's Header Element Ends Here -->  
   
  <p>In this tutorial, I will be creating responsive web page using <a href="#" title="Creating HTML5 page with CSS3" target="_blank">HTML5 page that was done in previous HTML5 post on Creating HTML5 page with CSS3</a>...<br/><br/>[<a href="#" target="_blank">Read more</a>]</p>
   
  <!-- Article's Comments Section Element Starts Here -->
  <section id="comments">
    <h1>Comments</h1>
    <article>
       
      <p>Nice post on html5 structure!</p>
      <footer>

        </p>
      </footer>
    </article>
    <article>
       
      <p>Good post on html5 markups!</p>
      <footer>
        <p>Footer
        </p>
      </footer>
    </article>
  </section>
  <!-- Article's Comments Section Element Ends Here -->
   
</article>
<!-- Article Element Ends Here -->
</div>
<!-- Div wrapper2 ends here -->
<!-- Footer Element Starts Here -->
<footer id="copyrights">
 <p><small>© 2011 <a href="#" target="_blank">HTML5 & Css3 Stuffs</a></small></p>
  <p><a href="#" target="_blank">About Us</a> - <a href="#" target="_blank">CSS3</a> - <a href="#" target="_blank">Contact Us</a></p>
  <address>
  For more details, contact
  <a href="#">HTML5 & Css3 Stuffs</a>.
 </address>
</footer>
<!-- Footer Element Ends Here -->
</div>
<!-- Div Wrapper Element ends Here -->
</body>
</html>





Since html5 is not yet fully supported by older versions of IE and some other browsers. We can use below script to render it in the browser which does not support html5.



<script>
document.createElement('header');document.createElement('hgroup');
document.createElement('nav');document.createElement('article');
document.createElement('section');document.createElement('time');
document.createElement('footer');document.createElement('aside');
document.createElement('address');
</script>




Since the html5 elements are not having any default style in older browsers. We can use html5 reset for our page is as shown below so that the elements get default values. As all of them are mainly block level element I have made them as block element in css as shown below.



/*HTML5 Tags Styles starts here */
header, hgroup, nav, article, section, footer, aside, address{ display:block;}

13 comments :

Anonymous10/5/12, 9:33 AM
I couldn't refrain from commenting. Very well written!
my page > v2 e cig coupon codes
ReplyDelete
Replies
Anonymous10/10/12, 12:30 AM
whoah this blog is wonderful i love reading your articles.
Stay up the good work! You already know, lots of individuals are searching round for this info, you could aid them greatly.
Here is my site ... black friday iphone 4s 2012
ReplyDelete
Replies
Anonymous10/11/12, 3:54 PM
This ѕite ωаs... hοw dо I saу it?

Relevant!! Finаlly I've found something that helped me. Appreciate it!
Also visit my web site ... v2 e cig coupon codes
ReplyDelete
Replies
Anonymous10/14/12, 6:31 AM
What's Going down i am new to this, I stumbled upon this I have discovered It absolutely helpful and it has aided me out loads. I'm hopіng tο сontгіbutе & help other cuѕtomers like its аiԁed me.
Gοod job.
my webpage :: isrvirtual.org
ReplyDelete
Replies
Anonymous10/17/12, 12:51 AM
Wow, marvelous blog layout! How long have you been blogging for?
you made blogging look easy. The overall look of your web site is
magnificent, let alone the content!
Here is my web-site ; black Friday projectors dlp 2012
ReplyDelete
Replies
Anonymous10/17/12, 1:12 PM
We absolutely love youг blog and find nearly all of уouг
post's to be precisely what I'm lookіng foг. Wοuld you offer
guest writers to write cоntent tо suit your needs?
I wоuldn't mind composing a post or elaborating on a number of the subjects you write in relation to here. Again, awesome web log!
My web site - v2 coupon codes
ReplyDelete
Replies
Anonymous10/19/12, 7:45 AM
This design is incredible! You certainly know how to keep
a reader amused. Between your wit and your videos, I was almost moved to start
my own blog (well, almost...HaHa!) Wonderful job.
I really enjoyed what you had to say, and more than that,
how you presented it. Too cool!
My webpage - buy twitter followers at once
ReplyDelete
Replies
Anonymous10/19/12, 7:47 AM
whoah this weblog is great i love studying your articles.
Stay up the good work! You already know, many individuals are looking round for this information,
you could aid them greatly.
Here is my web site : Dixie's homepage
ReplyDelete
Replies
Anonymous10/19/12, 7:49 AM
Magnificent web site. A lot of helpful information here. I am sending it to several friends ans also sharing
in delicious. And certainly, thanks for your effort!
Also visit my page ; Guestbook.ru.vu
ReplyDelete
Replies

Add comment

Subscribe to: Post Comments ( Atom )

Creating Responsive HTML5 Page Using Media Queries

About Responsive Web Page

About Media Queries

Creating Responsive Web Page

About `@media all`

About `@media screen and (min-width: 1401px)`

About `@media screen and (max-width: 1401px)`

About `@media screen and (min-width: 1200px) and (max-width: 1400px)`

Adding `meta` tag to render it properly in mobile phones

13 comments :

About Author

Blog Archive

Popular Posts

Followers

Translate

JOIN THE TEAM

Creating Responsive HTML5 Page Using Media Queries

About Responsive Web Page

About Media Queries

Creating Responsive Web Page

About @media all

About @media screen and (min-width: 1401px)

About @media screen and (max-width: 1401px)

About @media screen and (min-width: 1200px) and (max-width: 1400px)

Adding meta tag to render it properly in mobile phones

13 comments :

About Author

Blog Archive

Popular Posts

Followers

Translate

JOIN THE TEAM

About `@media all`

About `@media screen and (min-width: 1401px)`

About `@media screen and (max-width: 1401px)`

About `@media screen and (min-width: 1200px) and (max-width: 1400px)`

Adding `meta` tag to render it properly in mobile phones