Uncategorized

Responsive Web Design

Leave a comment

Responsive Web DesignResponsive web design is used to make sure a site is optimized for any device. In this tutorial I’ll create 3 optimized sites in one video and walk you through my process the whole way through.

If you have any questions about HTML5 or CSS3 I cover them in these 2 tutorials HTML5 Tutorial and CSS3 Tutorial. All of the code from the video can be found below.

If you like videos like this, it helps to tell Google with a click here [googleplusone]

Code From the Video

index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" type="text/css" href="css/style_large.css">
  <link rel="stylesheet" type="text/css" media="only screen and (min-width:768px) and
  (max-width:980px)" href="css/style_768.css">
  <link rel="stylesheet" type="text/css" media="only screen and (min-width:600px) and
  (max-width:767px)" href="css/style_600.css">
  <link rel="stylesheet" type="text/css" media="only screen and (min-width:300px) and
  (max-width:599px)" href="css/style_300.css">
</head>
<body>
  <div class="wrapper">

    <aside>
      <img src="images/logo.png" id="logo" alt="new think tank logo">
      <ul class="sb-icon-list">
        <li class="sb-item first-sb">
          <span class="list-span">About</span>
        </li>
        <li class="sb-item second-sb">
          <span class="list-span">Contact Us</span>
        </li>
        <li class="sb-item third-sb">
          <span class="list-span">Blog</span>
        </li>
        <li class="sb-item fourth-sb">
          <span class="list-span">Videos</span>
        </li>
        <li class="sb-item fifth-sb">
          <span class="list-span">Podcast</span>
        </li>
      </ul>

      <div id="social">
        <span id="social-title">LET'S TALK</span>
        <img class="social-icons" src="images/facebook-ic.png">
        <img class="social-icons" src="images/twitter-ic.png">
        <img class="social-icons" src="images/rss-ic.png">
      </div>
    </aside>

    <main>
      <img src="images/eyes.png" id="big-image">
      <div id="newsletter">
        <span id="signup-txt">Sign up for our free newsletter to stay up to date on
          my newest tutorials, podcasts and giveaways</span>
          <span class="subscribe-span">
            <input type="text" name="email" class="email-input">
            <span class="button">Subscribe</span>
          </span>
        </div>

        <div class="article-block">

        <div class="article first-art">

            <img src="images/first-tn.png">

            <div class="art-title">Slow and Steady Win the Race</div>
            <div class="art-excerpt">
              Here is a random picture
              of something and isn’t
              wonderful. I’ll talk about
              it in this article which
              I’m sure you will enjoy.
              Just click the picture to
              read more.
            </div>

          </div>

          <div class="article second-art">

            <img src="images/second-tn.png">

            <div class="art-title">Take Time to Enjoy the Little Things</div>
            <div class="art-excerpt">
              Here is a random picture
              of something and isn’t
              wonderful. I’ll talk about
              it in this article which
              I’m sure you will enjoy.
              Just click the picture to
              read more.
            </div>

          </div>

          <div class="article third-art">

            <img src="images/third-tn.png">

            <div class="art-title">Always Keep Your Eyes on the Prize</div>
            <div class="art-excerpt">
              Here is a random picture
              of something and isn’t
              wonderful. I’ll talk about
              it in this article which
              I’m sure you will enjoy.
              Just click the picture to
              read more.
            </div>

          </div>

          <div class="article fourth-art">

            <img src="images/fourth-tn.png">

            <div class="art-title">The Benefits of Being Cute</div>
            <div class="art-excerpt">
              Here is a random picture
              of something and isn’t
              wonderful. I’ll talk about
              it in this article which
              I’m sure you will enjoy.
              Just click the picture to
              read more.
            </div>

          </div>

        </div>

      </main>

    </div> <!-- End of Wrapper -->
  </body>
  </html>

style_large.css

* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-size: 62.5%;
  font-family: arial, sans-serif;
  color: #221F51;
}

.wrapper {
  font-size: 1.6em;
  padding: 2em;
  margin: 0 auto;
  width: 990px;
  background-color: white;
}

#logo {
  margin-bottom: 15px;
}

.sb-item {
  height: 34px;
  list-style-type: none;
  margin-bottom: 21px;
}

.sb-icon-list {
  margin-bottom: 60px;
}

/* Icons for sidebar list */
.first-sb {
  background: url('../images/first-sb.png') bottom left no-repeat;
}
.second-sb {
  background: url('../images/second-sb.png') bottom left no-repeat;
}
.third-sb {
  background: url('../images/third-sb.png') bottom left no-repeat;
}
.fourth-sb {
  background: url('../images/fourth-sb.png') bottom left no-repeat;
}
.fifth-sb {
  background: url('../images/fifth-sb.png') bottom left no-repeat;
}

.list-span{
  display: inline-block;
  padding-left: 45px;
  padding-top: 8px;
  font-size: 1.4em;
}

#social-title {
  display: block;
  border-bottom: 1px dashed #221F51;
  width: 143px;
  padding-bottom: 5px;
  margin-bottom: 10px;
}

.social-icons {
  padding-right: 7px;
}

aside {
  float:left;
  margin-right: 35px;
}

main {
  float: right;
}

#big-image {
  margin-bottom: 50px;
}

#newsletter {
  background: url('../images/newsletter-ic.png') bottom left no-repeat;
  height: 34px;
  padding-left: 54px;
  position: relative; /* So I can position subscribe-span */
  margin-bottom: 50px;
}

#signup-txt {
  width: 317px;
  display: inline-block;
  font-size: .9em;
  margin-right: 60px;
  padding-top: 5px;
}

.email-input {
  height: 30px;
  width: 170px;
  margin-right: 30px;
}

.button {
  border:1px solid #999999;
  -webkit-border-radius: 42px;
  -moz-border-radius: 42px;
  border-radius: 42px;
  font-size:12px;
  padding: 5px 15px 5px 15px;
  text-decoration:none;
  display:inline-block;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.3);
  font-weight:bold;
  color: #000000;
  background-color: #FFFFFF; background-image: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CFCFCF));
  background-image: -webkit-linear-gradient(top, #FFFFFF, #CFCFCF);
  background-image: -moz-linear-gradient(top, #FFFFFF, #CFCFCF);
  background-image: -ms-linear-gradient(top, #FFFFFF, #CFCFCF);
  background-image: -o-linear-gradient(top, #FFFFFF, #CFCFCF);
  background-image: linear-gradient(to bottom, #FFFFFF, #CFCFCF);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#FFFFFF, endColorstr=#CFCFCF);
}

.subscribe-span{
  position: absolute;
  bottom: 10;
  margin-top: 8px;
}

.article {
  display: inline-block;
  width: 166px;
  margin-right: 16px;
}

.art-title {
  margin-top: 10px;
  margin-bottom: 10px;
}

.fourth-art {
  margin-right: 0px;
}

style_768.css

* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-size: 62.5%;
  font-family: arial, sans-serif;
  color: #221F51;
}

.wrapper {
  font-size: 1.6em;
  padding: 2em;
  margin: 0 auto;
  width: 768px;
  background-color: white;
}

#logo {
  /* margin-bottom: 15px; NEW */
  display: inline-block; /* NEW */
}

.sb-item {
  height: 62px; /* NEW */
  width: 48px; /* NEW */
  list-style-type: none;
  margin-bottom: 0px;
  padding-top: 50px; /* NEW */
  display: inline; /* NEW */
  margin-left: 35px; /* NEW */
}

.sb-icon-list {
  margin-bottom: 50px; /* NEW */
  width: 540px; /* NEW */
  display: inline-block;
}

/* Icons for sidebar list NEW */
.first-sb {
  background: url('../images/first-sb.png') top center no-repeat;
}
.second-sb {
  background: url('../images/second-sb.png') top center no-repeat;
}
.third-sb {
  background: url('../images/third-sb.png') top center no-repeat;
}
.fourth-sb {
  background: url('../images/fourth-sb.png') top center no-repeat;
}
.fifth-sb {
  background: url('../images/fifth-sb.png') top center no-repeat;
}

.list-span{
  display: inline-block;
  padding-left: 0px; /* NEW */
  padding-top: 8px;
  font-size: 1.4em;
}

/* NEW Eliminates the social part all together */
#social {
  display: none;
}

/* NEW
aside {
  float:left;
  margin-right: 35px;
}
*/

main {
  /* float: right; NEW */
}

#big-image {
  margin-bottom: 50px;
}

#newsletter {
  background: url('../images/newsletter-ic.png') bottom left no-repeat;
  height: 34px;
  padding-left: 54px;
  position: relative; /* So I can position subscribe-span */
  margin-bottom: 50px;
}

#signup-txt {
  width: 317px;
  display: inline-block;
  font-size: .9em;
  margin-right: 60px;
  padding-top: 5px;
}

.email-input {
  height: 30px;
  width: 170px;
  margin-right: 30px;
}

.button {
  border:1px solid #999999;
  -webkit-border-radius: 42px;
  -moz-border-radius: 42px;
  border-radius: 42px;
  font-size:12px;
  padding: 5px 15px 5px 15px;
  text-decoration:none;
  display:inline-block;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.3);
  font-weight:bold;
  color: #000000;
  background-color: #FFFFFF; background-image: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CFCFCF));
  background-image: -webkit-linear-gradient(top, #FFFFFF, #CFCFCF);
  background-image: -moz-linear-gradient(top, #FFFFFF, #CFCFCF);
  background-image: -ms-linear-gradient(top, #FFFFFF, #CFCFCF);
  background-image: -o-linear-gradient(top, #FFFFFF, #CFCFCF);
  background-image: linear-gradient(to bottom, #FFFFFF, #CFCFCF);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#FFFFFF, endColorstr=#CFCFCF);
}

.subscribe-span{
  position: absolute;
  bottom: 10;
  margin-top: 8px;
}

.article {
  display: inline-block;
  width: 166px;
  margin-right: 16px;
}

.art-title {
  margin-top: 10px;
  margin-bottom: 10px;
}

.fourth-art {
  margin-right: 0px;
}

style_600.css

* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-size: 62.5%;
  font-family: arial, sans-serif;
  color: #221F51;
}

.wrapper {
  font-size: 1.6em;
  padding: 1.8em;
  margin: 0 auto;
  width: 600px; /* NEW */
  background-color: white;
}

/* NEW */
#logo {
  display: inline-block;
  height: 96px;
  width: 84px;
  margin-left: -15px;
}

.sb-item {
  /*
  height: 62px;
  width: 48px;
  padding-top: 50px;
   */
   margin-bottom: 0px;
   /* NEW */
  display: inline;
  list-style-type: none;
  margin-left: 14px;
  background: none;
}

.sb-icon-list {
  margin-bottom: 50px;
  width: 430px;
  display: inline-block;
  font-size: .9em;
}

/*
.first-sb {
  background: url('../images/first-sb.png') top center no-repeat;
}
.second-sb {
  background: url('../images/second-sb.png') top center no-repeat;
}
.third-sb {
  background: url('../images/third-sb.png') top center no-repeat;
}
.fourth-sb {
  background: url('../images/fourth-sb.png') top center no-repeat;
}
.fifth-sb {
  background: url('../images/fifth-sb.png') top center no-repeat;
}
*/

.list-span{
  display: inline-block;
  padding-left: 0px;
  padding-top: 8px;
  font-size: 1.4em;
}

/* Eliminates the social part all together */
#social {
  display: none;
}

#big-image {
  margin-bottom: 50px;
  width: 570px;
  height: 355px;
}

#newsletter {
  background: url('../images/newsletter-ic.png') bottom left no-repeat;
  height: 34px;
  padding-left: 54px;
  position: relative; /* So I can position subscribe-span */
  margin-bottom: 50px;
}

#signup-txt {
  width: 246px;
  display: inline-block;
  font-size: .7em;
  margin-right: 15px;
  padding-top: 5px;
}

.email-input {
  height: 25px;
  width: 150px;
  margin-right: 15px;
}

.button {
  border:1px solid #999999;
  -webkit-border-radius: 42px;
  -moz-border-radius: 42px;
  border-radius: 42px;
  font-size:12px;
  padding: 5px 10px 5px 10px;
  text-decoration:none;
  display:inline-block;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.3);
  font-weight:bold;
  color: #000000;
  background-color: #FFFFFF; background-image: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CFCFCF));
  background-image: -webkit-linear-gradient(top, #FFFFFF, #CFCFCF);
  background-image: -moz-linear-gradient(top, #FFFFFF, #CFCFCF);
  background-image: -ms-linear-gradient(top, #FFFFFF, #CFCFCF);
  background-image: -o-linear-gradient(top, #FFFFFF, #CFCFCF);
  background-image: linear-gradient(to bottom, #FFFFFF, #CFCFCF);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#FFFFFF, endColorstr=#CFCFCF);
}

.subscribe-span{
  position: absolute;
  bottom: 10;
  margin-top: 8px;
}

.article {
  display: inline-block;
  width: 166px;
  margin-right: 29px;
}

.art-title {
  margin-top: 10px;
  margin-bottom: 10px;
}

.third-art {
  margin-right: 0px;
}

.fourth-art {
  margin-right: 0px;
}

/* NEW */
.fourth-art {
  display: none;
}

Leave a Reply

Your email address will not be published. Required fields are marked *