Breadcrumb Content

Main Content

Modern Web Design Pt 2

May, 12, 2014 | CSS,HTML

Welcome to Modern Web Design Pt 2. Today we will focus on the header section of webpage we are constructing. In part one, we focused on the grid system, which powers the structure of the webpage. The header area also requires special attention, much like the grid system. There are a variety of ways to develop this area, which encompasses Javascript and even some really cool CSS techniques. However, we will refrain from that for now and keep it very simple. The objective is to make sure this webpage works on all current devices.

HTML

<!DOCTYPE html>
  <html lang="en">
    <head>
        <meta charset="utf-8">
    <title>Header</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    </head>

    <body>
    
 <header>

     <h1> </h1>  


  
    
     <nav>
        <ul>
        <li></li>
        <li></li>
          <li></li>
          <li></li>
    </ul>   
     </nav>

 </header>



 <section>

     
            <div class="media">
 
              
            </div>
    

    </section> 


 
  <section>      

    
    <article>

  

    
     </article>


</section>


    <footer>

              
    </footer>


    </body>
</html>

The HTML (hypertext Markup Language) is the end result that’s usually on display for the world to see. Our example has all of the elements required to output a full webpage. However, if you copy and paste it into a blank document and save it as anything.html, you will have a blank screen. Keep in mind that we can add styles directly to the HTML5 elements like Article, Header, Aside, and Footer. The webpage will work just the same to some extent, but our code, and platform will not necessarily be reusable. An earlier browser at lease two years off (from you know who) might spit out something that is broken and ugly. This is not what you want the first impression of your business to be. Even if the potential client is slow about updating his or her browser.

CSS

/*=========================Background & Font Colors============================*/

/*Background*/



.bg-offBlack1{background: #111;}
.bg-offBlack3{background: #333;}
.bg-offBlack5{background: #555;}
.bg-offBlack7{background: #777;}
.bg-offBlack9{background: #999;}

/*===============TYPOGRAPHY================*/

h1, h2, h3, h4, h5, h6, small
{
 display: block; color:#888; text-transform: uppercase; 
}

p
{
   text-align: left; font-size: 12px;line-height: 24px; letter-spacing: 0px; 
   text-decoration: none;padding: 0px 5px;margin: 5px 0px; text-indent: 0px; color:#777; 
}

a, p a{text-decoration: none; color: #888;}

a:hover, p a:hover{text-decoration:none; color: #2c88c5;}



/*=================Specific Styles=================*/

.zero-padding{padding:0px;}
.zero-margin{margin:0px;}

The first thing you will notice are the multitude of classes I created for backgrounds. This was inspired by some of the frameworks I have come across and CSS preprocessors. We will eventually cover it all in the near future, but for now let’s stay on course. These classes offer flexibility, you can add a different background color to every section on every page you create. Typography is next and very simple. I added the font we will be using for this project in the base.css file under the body tag. Since we are only using one font for the entire project (Droid Sans, courtesy of Google fonts) we won’t need to added anywhere else.

After setting direct styles for the typography, I also decided to create a classes of zero margin and padding. The grid system that we are using for this project has five pixels of padding. Without the zero-padding class, this is how the navigation will appear in most browsers (click for demo). That is not the effect we are after.

Back to the HTML

<!DOCTYPE html>
  <html lang="en">
    <head>
        <meta charset="utf-8">
    <title>BASIC | Header</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/base.css" rel="stylesheet" media="screen"> 
    <link href="css/styles.css" rel="stylesheet" media="screen">
    <link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
       
        <!--[if IE]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>

    <body>
    
 <header class="blockz bg-offBlack3">
    <div class="wrapper">
    <div class="col-30 zero-padding">
     <div class="titled">
     <h1><a href="index.html">My Company</a></h1>  
     </div><!--end titled-->
     </div>

  
     <div class="col-70 zero-padding">
     <nav class="menu">
        <ul>
        <li><a class="active" href="index.html">Home</a></li>
        <li><a href="*">Services </a></li>
          <li><a href="*" >About</a></li>
          <li><a href="*">Contact</a></li>
    </ul>   
     </nav>
     </div>
     </div><!--end wrapper-->
 </header>


 <!========================Optional Media Presentation============================-->

 <section>

         

    </section> 

 <!========================Brief Summary On What We Actutally Do============================-->   
 
  <section>      

    
    <article>



    
     </article>


</section>



 <!========================Footer Section============================-->  

    <footer>
       

   
        
    
              
    </footer>


    </body>
</html>

Prior to the HTML5 era, the “doctype” area was a mess (http://www.w3.org/QA/2002/04/valid-dtd-list.html). We had strict, transitional and a several others that I never – ever bothered with. Today we have a one size fits all “doctype”, which simplifies things. Beyond that you will find the html, head, title and meta tags. Our point of interest  are the meta tags, which supports the viewport attribute. The Viewport meta tag ( https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag) is what makes the magic happen, when viewing your website on different devices. It controls the output based on the width of the device.

The call to the stylesheets control more than just the basic aesthetics of the site. It’s what the viewport references to determine what you see on a smartphone, tablet, (some) notebooks and desktop. For more on stylesheets go here (http://www.w3schools.com/css/css_howto.asp). W3School not a site I would recommend for most of your questions regarding web design. This reference to stylesheets is simple enough for them not to muck it up. With that being said, tread lightly.

The “html5shiv/../html5.js” (https://www.google.com/#q=what+is+html5shiv) caters to versions of Internet Explorer 8 and earlier that will not parse HTML5 without the use of Javascript.

The header is a block level element which means it will stretch across the full width of your browser. I will add the “blockz” class to it as a safety precaution. Within the header tag, I will add the “wrapper” class, which is center and has a maximum width of 1080 pixels. Now we will split the area in two sections; the title of the website will be placed in a grid that is 30% wide of the wrapper class and the navigation will be placed in a grid that is 70% wide of the wrapper class, totaling to 100%. We will now add the zero-padding class to both of the grids.

We will create a class called “titled” with a minimum height of 50 pixels, a width that’s 100% and make it a block level element. Yes it seems redundant, but necessary. From there we will add styling to our H1 tag. Nothing too extravagant though.

The CSS for the navigation area requires special attention; The html seems simple enough, but is far from it when you’re designing for multiple devices. The Nav element has already been declared a block level element, but we will hook a class to it named “menu” and give it a width of 100%, no padding or margin, float it to the left, position it relative and display it as block..

The unordered list is next, we will add all the necessary styles to the parent and child elements. Let’s wrap “nav.menu” in a grid container that has a 70% width and add the “.zero-padding” class. Since we gave both “.titled” and “nav.menu” classes a width of a 100%, they completely fill the parent containers. We will now create  four navigation links for our small business website for symmetrical reasons. I can give each list item a 25% width to utilize the entire container. I won’t, instead we will go with a 20% width, because it looks better and leaves room for expansion and browsers that are determine to ruin our creation.

Final Touches to the CSS

/*=================HEADER AREA=================*/

header{padding:0px; margin:0px; border:none; min-height: 50px;}


/*Website Name*/

.titled{float: left; display: block; position: relative; margin: 0px; padding: 0px; min-height: 50px; width:100%;}

 .titled h1
{
 text-align:left; padding: 0px; margin: 0px; letter-spacing: -1px;
 text-transform: uppercase; text-indent: 5px; display: block;
}

 .titled h1 a
{color: #2c88c5; font-size: 20px; line-height: 50px; padding:0px; margin: 0px; display: block;}

 .titled h1 a:hover{color: #fff;}


/*Website Main Navigation bar */

 nav.menu 
{background: none; position: relative; min-height: 50px;padding:0px; margin: 0px; float: left; display: block; width: 100%;}
        
 nav.menu ul{display: block; width:100%; background: none; padding: 0px; margin: 0px; list-style-type: none; float: left;}
        
 nav.menu ul li
{list-style: none; float:left; padding: 1px; margin: 0px; position: relative; min-height:50px; border-right: 1px #777 solid;
  min-width: 100px; /*for this project we will give each list item a width of 20% */ width:20%; background: none; }

  nav.menu ul li:first-child{border-left: 1px #777 solid;}
 
                
nav.menu ul li a
{text-decoration: none;  font-size: .8em; line-height: 48px; text-align: center; color:#f5f5f5; display: block; 
margin: 0px; padding:0px; font-weight:100; text-transform: uppercase; background: transparent;}

nav.menu ul li a.active, nav.menu ul li a:hover{color: #2c88c5;}


/*=====================================Media Query=====================================*/

/* Landscape mobile & down
===============================*/
@media (max-width: 480px) {
 
   nav.menu ul { width: 100%;}
   nav.menu ul li {width: 50%; float: left; position: relative; display:inline-block;  
    border-top: 1px solid transparent;  border-bottom: 1px solid transparent; border:none;}
    nav.menu ul li:first-child{border-left: none;}

    nav.menu ul li a{background: #444;}

    nav.menu ul li a:hover{background: #555;}

    .titled h1{text-align:center;}
   
  .media{display: none;}

}

/* Mobile to Tablet Portrait
===============================*/
@media (min-width: 480px) and (max-width: 780px) {

   nav.menu ul { width: 100%;}
   nav.menu ul li {width: 25%; float: left; position: relative; display:inline-block;  
    border-top: 1px solid transparent;  border-bottom: 1px solid transparent; border:none;}
    nav.menu ul li:first-child{border-left: none;}

    nav.menu ul li a{background: #444;}

    nav.menu ul li a:hover{background: #555;}

    .titled h1{text-align:center;}
  
  .media{display: none;}

}
/* Landscape Tablet to Desktop
===============================*/
@media (min-width: 780px) and (max-width: 1080px) {   
 
nav.menu{display: block;}

.media{display: block;}

} 

We will implement Media Query for the header element and add different styles for each device. For mobile devices that 480 pixels in width and smaller, we will convert each list item to a 50% width. For devices that are between 480 and 780 pixels, we will convert the list items to 25% in width. We will also add some color to the background, and alter the borders to create some space between each list item. For the title of the website we will simply align the text to the center. Using Media Query for this element allows a great deal of freedom. You can change the entire look of the site for each device. Let’s test it in the browser and check the results. Make sure to resize your browsers as well.

View Demo

Download

Mr. Blox

I dream in code, find conformity repulsive and drink excessive amounts of coffee...

4 Responses to “Modern Web Design Pt 2”

  1. Ian Mbe

    May 15, 2014

    I just used this on my assignment for an html project. Thanks dude, I aced it.

  2. Zach

    May 28, 2014

    You should have added the Javascript, that would have made it complete.

    • Mr.Blox

      June 4, 2014

      No, it was my intention to keep it as simple as possible.

  3. Troy

    June 1, 2014

    Not bad, but most of the noobs are running to the frameworks. Only a handful of frontend guys are still rolling their own.