It’s been a while since I’ve posted some legit content. I have been very busy lately with work, freelance, running BoomSkins, etc. Recently I just finished my first iPhone specific website. It was created in an incredibly short time (less than a week) and generated it’s first sale within 15 minutes of launching, I felt an amazing sense of accomplishment. What I wanted to do was give you guys a brief run down of what I did to create the site, tools that I used, tips that will help, etc.

Beneficial Websites

Tutorial:Building a website for the iPhone

iPhone WebDev

CSS iPhone

Creating the for the iPhone

It was a challenge learning what you needed to do to make things work on the iPhone. First off you have to think about the small screen, flip orientation, fluid widths because of the orientation, load time, etc. Here are a couple of highlights that you need to remember when creating for the iPhone.

1. Fluid Widths / 100% Widths – you don’t have to use fluid widths but if you don’t, when a user flips their phone sideways your content doesn’t stretch to fill the width. I found that it works best to design so that your buttons, content, images expand based on the orientation. It looks better and it makes for a better user experience.
2. Load Time – you have to remember that some of your users may be viewing the content on their 3g / edge network. So load times are key, you want the page to load fast so make sure you optimize your images properly.
3. Large Buttons – people have fat fingers. Even though I have heard that the iPhone has an algorithm that molds the click function based on your usual habits it still makes it easier for the user when your buttons are large enough for them not to miss.
4. Mobile Detection – You need to have a snippet of code that allows your site to be loaded when a user is visiting with their mobile device.
5. Text Adjustment – When you rotate your iPhone because the resolution changes your font size increases, it almost seems as though the font size gets bigger. To keep this from happening you can incorporate this snippet of code in your body style  -webkit-text-size-adjust: none;.
6. PNG’s – Make sure you use PNG’s where needed and enjoy taking advantage of transparent PNG’s. Remember you don’t need to test for IE or anything else accept for mobile safari.

I highly recommend that everyone take the next step and create your portfolio, mini site, etc for the iPhone. It is a great learning experience and you will learn a lot about how people may interact with your site as you browse around on it yourself. More and more people are going mobile these days so we need to adapt to this change and create experiences that are beneficial for you and the user.

Enjoy! Follow me on twitter and don’t forget to visit BoomSkins to get your iPod, iPhone, and Apple Laptop protection!