Students
Students get a Tuts+ subscription for just $45! Hurry limited offer.
Advertisement

Designing and Developing for the iPhone from Scratch

by

In this tutorial, we are going to be design a Website for the Mobile Safari Browser (found on the iPhone and the iPod Touch). We will be starting from scratch in Photoshop and work our way, step-by-step, to a finished product complete with an animated jQuery image slider.


Tutorial Details

  • Requirements: iPhone or iPod touch highly recommended. Mac users may also download the iPhone simulator.
  • iPhone Version: 3.1.2

Intro

With millions of iPhone users accessing the web daily, it is crucial for your company or brand to be able to provide mobile. users using the Mobile Safari browser, with a website that is designed for their device. Instead of struggling with small fonts, hard to press links and other website usability issues that come along with a mobile web browser, we can provide our visitors with an interactive experience that they will enjoy.


It is important for us to provide our users with an experience they will enjoy or we will end up frustrating our visitors and possibly even causing them to leave our site and never come back. We will be creating a site that focuses on a few key points. Our site should:

  • Have a font size that is readable even on the small screen of the device.
  • Use links that are styled in a such a way that the user can tell they are clickable without the typical visual cue of the "pointer-cursor".
  • Keep the content short. We should only provide them with the information they would need upon visiting your site from a mobile browser.
  • Keep the overall download sizes small. After all, they are most likely downloading your site over their phone connection.

If you are on a mac, you can download the iPhone SDK from Developer.Apple.com. Signup for a free account with them and download the latest version of the iPhone SDK with comes with the iPhone simulator. A true iPhone or ipod Touch will always be the best solution but the simulator works well for development purposes.


Design Photos in Photoshop

First download this cement texture from Flickr. Bring the image into a Photoshop document sized 320px (width) by 480px (height). Change the background color to #1D1D1D. Change the layer style on the texture to "Multiply" and add a white to black gradient mask.


Right click on a layer and flatten the image. Copy and paste into a new window so we can turn this into a repeating image. Go to Filter>Other>Offset. Set the Horizontal value to +162. Use the healing tool to clean up the problem area. Save the image as a jpg set the quality to 60%.


Open another Photoshop document and set it to 195px (width) by 75px (height). Create two layers each with a line drawn with the line tool. Separate the lines by one pixel. The top line should be white, the bottom a dark grey. Export the image as we did in the previous step. Both images should be saved under a folder named "images"



Coding the Homepage

Now it's time to code the homepage. We are going to add the basic code and then style it in the next step. Save this as index.html. The following code will give us basic html of the homepage and link to a Stylesheet which we will create.

Let's add some style by creating a new file named styles.css. The following code will give us style for the html code of the homepage.


Coding the Slideshow and other jQuery Elements

Save the image of the Fire truck to a folder called "imageslider" inside of the "images" folder. Save the image as img1.jpg. This will be image displayed in the image slider.


Download the Easy Slider 1.7 jQuery Slider and copy the "js" folder into the same folder as our index.html file. Copy the following code into your head tags on the index.html file.

You will now have a functioning homepage.


To remove the address bar, replace the body tag with the following:

And add the following meta tag to your head to handle zooming and text resizing issues.


Creating the About Page

Copy the index.html page to create the about page. Remove the code specific to the jQuery slider. Add the follow under the read more button to create the "sidebar".

Save the following image to your images folder. Name it cat.jpg.


Next it's time to add some style to the elements inside of the sidebar. We will need to do that with some CSS. Add the following to your styles.css file.



Coding the Contact Page

Copy the about page and name it contact.html. Add the following code to the head of your html. It is code to extend the google map using their API. You will need a Google Maps API key if you are going to be using this on a live server. You can use an online service to produce the code if you are not comfortable writing it yourself.

Simply add the following code where you would like your map to appear.


Feel free to update your menu to fit each page by moving the "selected" class to the appropriate list item.

For further research feel free to look into the Engage Interactive article as well as the Nettuts+ tutorial.

Advertisement