Introduction: How to Create a Mobile Website From Scratch
Creating a stunning MobileWebsite 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.
Step 1: Sample Mobile Website Layout
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<--
Step 2: Assembling the Body
Step 3: The Anatomy of Mobile Websites - Breaking the Parts.
Step 4: Essential Parts
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
Step 5: Title Code
#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;
}Step 6: Logo Image Code
#logo { display: block; padding: 5px 5px ;}<br>#logo img { width: 100%; max-width: 596px; max-height: 397px; }Step 7: Slogan Code
.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);
}Step 8: Call Buttons Code
#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;
}Step 9: Find Us Button Code
#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;
}Step 10: Header Background Code
#header { background: #fef9f6 ;}Step 11: Menu Items Code
.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;
}Step 12: Navigation Bar - Code
.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;
}Step 13: Footer Area - Code
#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 }