InterVolt Development Expansion
Wednesday, December 12th, 2007I am excited about the up and coming projects and new expansions InterVolt Development will be making within the future. Since the new iPhone has come out, it has given us a lot of opportunity to display our skills by designing web applications around it. So far within a week I have created 3 out of the 10 planned projects, all designed and ready to go. Now all that’s left to do is development and marketing for these applications, so I am sure one of us will drop updates on the progress soon (or when the beta testing comes out).
iPhone Web Application Development Newb Tips
You can view a lot of videos and read on iPhone design and content development here http://developer.apple.com/iphone/devcenter
They tell you EVERYTHING about developing in the iPhone environment and is a perfect starting point for getting involved in iPhone application development. In detail they discuss how to plan your application, navigation guidelines, dimensions & sizing, do’s and dont’s and so much useful information. Anyway, when designing an iPhone web application I think the best way is to menu-ize everything for easy navigation. We all know the iPhone uses multi-touch technology and its better to have a big fat link then itty bitty one that no one can touch. Also, a must is having Safari installed; the iPhone uses Safari as a web browser so it is extremely important to build your web site around it. Here is a good starting point when creating your iPhone menus:
Creating a simple iPhone compatible web menu
1. First create a nice little transparent arrow around 8×13 pixels or you can download one in the menu pack at http://developer.apple.com/iphone/devcenter
2. Create an index.php in your root directory.
3. Create a directory called css
4. Within the css directory, create a stylesheet file and label it style.css
5. Open up style.css and add the following:
.navrow ul {
padding: 0;
margin-top:0;
margin-right:0px;
margin-bottom:0px;
font-size:18px;
font-family: Helvetica;
font-weight:none;
color:white;
}
.navrow li {
list-style-type: none;
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:#6F7D94;
padding-top:10px;
padding-right:10px;
padding-bottom:14px;
padding-left:10px;
}
.navrow a {
display: block;
padding-top: 8px;
padding-right: 8px;
padding-bottom: 12px;
padding-left: 8px;
margin-top: -8px;
margin-right: -8px;
margin-bottom: -12px;
margin-left: -8px;
text-decoration: none;
color:white;
}
.showArrow {
margin-right:10px;
margin-top:7px;
padding-right:16px;
background-image: url( /* IMAGE OF YOUR ARROW HERE */ );
background-repeat: no-repeat;
background-position: right;
}
.secondary {
font-weight:normal;
float:right;
margin-right:10px;
}
.secondaryWArrow {
display:block;
font-weight:normal;
float:right;
font-size:11px;
color: #FFFFFF;
}
.secondaryWLink {
font-weight:normal;
float:right;
margin-right:10px;
font-size:11px;
color: #FFFFFF;
}
6. Change /* IMAGE OF YOUR ARROW HERE */ to your arrow filename.
7. Open index.php and add the following line to the <head> tag:
<link href=”css/style.css” rel=”stylesheet” type=”text/css” />
8. Finally, add the menu code to the <body> tag:
<div class=”navrow”>
<ul>
<li><a href=”http://www.intervolt.net”>InterVolt Development<span class=”showArrow secondaryWArrow”> </span></a></li>
<li><a href=”http://iphone.intervolt.net”>iPhone Web Development<span class=”showArrow secondaryWArrow”> </span></a></li>
<li><a href=”http://blog.intervolt.net/”>InterVolt Blog<span class=”showArrow secondaryWArrow”> </span></a></li>
</ul>
</div>
9. That’s it! Preview and change all the necessary colors and text to fit your application needs. Happy iDesigning…