Introduction: How to Create a Mobile Website From Scratch

Picture of 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

Picture of 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

Picture of Assembling the Body

Step 3: The Anatomy of Mobile Websites - Breaking the Parts.

Picture of The Anatomy of Mobile Websites - Breaking the Parts.

Step 4: Essential Parts

Picture of 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

Picture of 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

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

Step 7: Slogan Code

Picture of 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

Picture of 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

Picture of 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

Picture of Header Background Code
#header { background: #fef9f6 ;}

Step 11: Menu Items Code

Picture of 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 }

Step 14: Live Demo - Creating Mobile Website for a Spa Business

Step 15: Go Ahead to Test Drive

Comments

AlvinC2 (author)2015-04-05

Wow! A fantastic tutorial on how to make a mobile website. Excellent details and simple instructions. Great job man!

samueloppong (author)AlvinC22015-04-06

Thanks Alvin, am glad you like it.

About This Instructable

4,031views

62favorites

License:

More by samueloppong:Fundamentals Of Networking | Understanding Network DevicesWho is that on my network and what is he doing? Network Forensics Tutorial?Advanced CMD Troubleshooting For the IT Pro
Add instructable to: