How to Create a Mobile Website From Scratch

Creating a stunning Mobile Website should not be a daunting task at all. In today's tutorial, I am going to show you the best step by step guide in creating world class premium mobile websites you would have never imagined possible. The good news is that I am teaching you this absolutely free without any compromise to quality.

If you will, do get a notepad and follow along with me. Sketch the following shapes so you can understand the anatomy of Mobile Websites and why you should be able to create them with ease and confidence.

Header: Narrow Rectangular Strip

Logo: 300x250 Box.

Call & Find Us : 2 Small Narrow Rectangles.

Menus: A  Column of 4-5 Narrow Rectangles.

Congratulations if you have managed to create the sketch, if you haven't go ahead and print the one I have created here for you. Now we will turn this rough sketch into something beautiful.

See it in Action below;

-->Click here to check this final product on your mobile<--

1 - Header Title {Business Name Fits Here}

2 - Business Logo or Splash Image Fits Here (typically 300px by 250px)

3 - Call & Find-Us Buttons

4 - Menu Items

#title{ padding: 3px; color: #ffffff; text-shadow: 0px -1px 1px #111111; <br>background: #bdb931; color: #ffffff; font-size: 13px; font-weight: bold; 
border: 1px solid #f2eea6;
-webkit-border-radius:5px;
-moz-border-radius:5px;
background:-moz-linear-gradient(top,#f2eea6 0%,#bdb931 70%);
background:-webkit-gradient(linear,left top,left bottom, color-stop(0%,f2eea6),color-stop(100%,#bdb931))!important;
background:-ms-linear-gradient(top,f2eea6 0%,#bdb931 100%)!important;
background:linear-gradient(to bottom,f2eea6 0%,#bdb931 100%)!important;
margin:1px; border:0px solid transparent;  
border-radius:2px;
box-shadow:0 0 3px 0px #bdb931;
-webkit-box-shadow:0 0 3px 1px #000;
opacity:1.0;
}

#logo { display: block; padding: 5px 5px ;}<br>#logo img { width: 100%; max-width: 596px; max-height: 397px; }

.slogan:hover {<br>	animation: jiggle 0.2s infinite;
	-webkit-animation: jiggle 0.2s infinite;
    -moz-animation-duration: 0.2s;
    -moz-animation-name: jiggle;
    -moz-animation-iteration-count: infinite;
    -webkit-transform: rotate(-1deg);
    -moz-transform: rotate(-1deg);
}

#call { padding: 5px 30px; background: #146329; color: #ffffff; font-size: 13px; font-weight: bold; text-shadow: -1px 1px  1px #111111; border: 1px solid #a3f030; <br>-webkit-border-radius:5px;
-moz-border-radius:5px;
background: no-repeat  10% left -moz-linear-gradient(top,#a3f030 0%,#146329 100%);
background:-webkit-gradient(linear,left top,left bottom, color-stop(0%,a3f030),color-stop(100%,#146329))!important;
background:-ms-linear-gradient(top,a3f030 0%,#146329 100%)!important;
background:linear-gradient(to bottom,a3f030 0%,#146329 100%)!important;
margin:5px; border:0px solid transparent;  
border-radius:5px;
box-shadow:0 0 3px 1px #146329;
-webkit-box-shadow:0 0 3px 1px #000;
opacity:1.0; font-family: arial;
        text-transform: uppercase;
        background-image: url(./images/call.png);
        background-repeat: no-repeat;
     }

#find-us{ padding: 5px 30px; background: #146329; color: #ffffff; font-size: 13px; font-weight: bold; text-shadow: 1px 1px 1px #111111; border: 1px solid #a3f030;<br>-webkit-border-radius:5px;
-moz-border-radius:5px;
background: no-repeat  10% left -moz-linear-gradient(top,#a3f030 0%,#146329 100%);
background:-webkit-gradient(linear,left top,left bottom, color-stop(0%,a3f030),color-stop(100%,#146329))!important;
background:-ms-linear-gradient(top,a3f030 0%,#146329 100%)!important;
background:linear-gradient(to bottom,a3f030 0%,#146329 100%)!important;
margin:5px; border:1px solid transparent;  
border-radius:5px;
box-shadow:0 0 3px 1px #146329;
-webkit-box-shadow:0 0 3px 1px #000;
opacity:1.0;
        font-family: arial;
        text-transform: uppercase;
       
        background-image: url(./images/find.png);
        background-repeat: no-repeat;
        
}

#header { background: #fef9f6 ;}

.menu{ <br>-webkit-border-radius:5px;
-moz-border-radius:5px;
background:-moz-linear-gradient(top,#cfce95 0%,#b9b431 100%);
background:-webkit-gradient(linear,left top,left bottom, color-stop(0%,cfce95),color-stop(100%,#b9b431))!important;
background: -webkit-linear-gradient(top,  #cfce95 0%,#b9b431  100%) !important; 
background: -o-linear-gradient(top,  #cfce95 0%,#b9b431  100%) !important; 
background:-ms-linear-gradient(top,cfce95 0%,#b9b431 100%)!important;
background:linear-gradient(to bottom,cfce95 0%,#b9b431 100%)!important;
margin:2px; border:0px solid transparent;  
border-radius:2px;
box-shadow:0 0 3px 1px #b9b431;
-webkit-box-shadow:0 0 3px 1px #000;
opacity:1.0;
}

.navbar { padding: 3px; color: #; text-shadow: 0px -1px 1px #; 
background: #bdb931; color: #ffffff; font-size: 13px; font-weight: bold; 
border: 1px solid #f2eea6;
-webkit-border-radius:5px;
-moz-border-radius:5px;
background:-moz-linear-gradient(top,#f2eea6 0%,#bdb931 70%);
background:-webkit-gradient(linear,left top,left bottom, color-stop(0%,),color-stop(100%,#bdb931))!important;
background:-ms-linear-gradient(top,f2eea6 0%,#bdb931 100%)!important;
background:linear-gradient(to bottom,f2eea6 0%,#bdb931 100%)!important;
margin:1px; border:1px solid transparent;  
border-radius:2px;
box-shadow:0 0 3px 0px #bdb931;
-webkit-box-shadow:0 0 3px 1px #000;
opacity:1.0; height: 29px; 
}

#footer { padding: 5px; background: #000000; color: #cccccc; border-radius: 0 0 0px 0px }
#footer div { margin: 4px }
#footer-border { border-top: 1px solid #eeeeee }
#footer-title { font-size: 14px; font-weight: bold }
#footer-contact { font-size: 11px }
#footer-social img { margin: 4px 3px }
#footer-fullsite { font-size: 10px; font-weight: bold; color: #3d7fe3 }

-->Test Drive our Mobile Website Dashboard for Free.<--