Optimize Your Website For The iPhone & Other Mobile Devices

Browsing the Internet on a mobile device has sky rocketed over the past year, with a massive increase of traffic coming from various smart phones. A large majority of websites are not optimized for mobile browsing.

These 15 fantastic tutorials, resources and articles will go into more detail about developing for the mobile environment.

iWebKit the Best free framework for creating iPhone, iPod Touch and iPad web applications with ease! via iwebkit.net

iWebKit is a file package designed to help you create your own iPhone, iPod Touch and iPad compatible website or webapp.

Build an iPhone-Optimized Website with iUI via webmonkey.com

So long as your site is using valid (X)HTML, it’s not hard at all to sequester off a domain for your iPhone users and apply the iUI tools to generate your iPhone-friendly site.

Quick Tips for Creating a Mobile Optimized Site via designshack.co.uk

Today we’ll look at a few quick ways to make your site a little friendlier for mobile devices.

How-To: Create an iPhone Web App via theappleblog.com

I will be covering the web-form aspect of creating an optimized site, but iWebKit has many deeper features that can communicate directly with the OS. Its documentation is excellent, so dig around or check out the demo site on your iPhone to get inspiration.

Learn How To Develop For The iPhone via net.tutsplus.com

Today I’m going to show you how to build an alternate page and style sheet for the iPhone and iTouch. We will cover how to detect if the user is using an iPhone to view your page as well as the orientation of the device – whether it be landscape or portrait. To accomplish this we will be using javascript, and some Safari mobile specific CSS tags.

Making a website iPhone-friendly using CSS via eisabainyo.net

Unlike any other mobile web browsers, iPhone comes with Safari browser which makes it possible to view any website that works on Safari. However, the challenge is that the screen size of an iPhone is not as big as a traditional monitor and therefore, if you have got a website which has a width of say, 1000px, the website will appear really small and unreadable on an iPhone screen.

A Guide to Mobile Web Design Tips and Tricks via mashable.com

We’ve put together a toolkit of resources for the designer and non-designer alike to get you started. Did we miss your favorite tool or service? Let us know in the comments!

A large selection of iPhone development tutorials via iphonemicrosites.com

A collection of 11 excellent iPhone tips and tricks.

Tutorial: optimizing your website for mobile devices via elementfusion.com

Since we announced our optimization of the Element Fusion website for mobile devices including the iPhone, we’ve had quite a few requests to share the steps that were taken to complete this task. While there are different ways to accomplish such a task, the following is a look at how we did it.

21 iPhone Optimized Themes for Publishing Platforms via iphoneized.com

I thought I’d post a list of some of the more popular ones that have been iPhone optimized.

How to Get Started with iPhone Dev via webdesignerdepot.com

This article is an introduction to the various ways of getting content and applications onto the iPhone. It is by no means a full guide, but hopes to point you in the right direction and give you an overview of what is involved in the process.

How to Make Your Portfolio iPhone-Compatible via danidraws.com

t was a fun experiment and it didn’t take long to create at all. I know it will make at least one art director happy, so that alone is worth it.So if you have the know-how and a little bit of time, I say it’s worth the extra bit of effort. It might not matter to most of your clients – but it might mean the world to the few who happen to be on an iPhone.Here is an in-depth review of how I put the site together.

How To Make Your WordPress Site iPhone Friendly via enlightenedwebmastery.com

In this arti­cle I’m going to show you how to make your web­site iPod touch or iPhone friendly. By default, your site may look pretty good already, but I think you will agree, this plu­gin makes your site much more acces­si­ble for the mobile crowd.

Tutorial: Making your WordPress blog Android and iPhone friendly via androidandme.com

This article is intended for those who already have a web or WordPress background. If you don’t quite understand how to put together your own templates, this might not be for you.

And last but not least, the iPhone Dev Center via developer.apple.com

Everything you need to know about developing for the iPhone.

On a side note, we are looking for some of your contributions! Got something creative to share with the community? Now is the perfect time to get involved! Learn more about Contributing.

7 Comments

  1. I think i should stop signing upto blogs and sites for tutorials, inspiration and help with wordpress. I can find it all on nenuno!

  2. Great article, you’ve managed to gather all the resources in one place.

  3. Nice roundup Daniel! I’ve been exploring options for making my site a little more readable for mobile phones, so this post was useful. Thanks again!

  4. Thanks Shawn, inspirationfeed and Jared! We are planning a mobile version in July. But just see how it goes untill then :-)

  5. This may sound like a dumb question, but when designing for the iPhone, doesn’t that really mean designing for all phones that are capable of handling the web like the iPhone? For instance, HTC’s Droid and the like…?

    Pretty much optimizing/designing for mobiles?

    Nice post by the way. I am in a huge redesign for my website and plan on going all the way down to this tiny detail of designing for mobile’s… Bookmarking this page now :-)

    Thanks!

  6. Great Post, thanks for this useful Post. I will come back later . Also great information about the iphone : iphone4 cases

  7. Amazing article, wish I could come up with news like that for my webpage, LOL.

Leave a Reply to inspirationfeed Cancel reply

Your email address will not be published. Required fields are marked *