enavu webdevmania tutsvalley psdestination
visit the enavu network
5 Comments Article Title Overlay Article Title

Simple Fast Easy make your website iPhone ready!

Simple tutorial on how to make your website iPhone ready.

Today i decided that WebDevMania needed to be iphone ready. I knew it wasn’t extremely hard, but i didn’t know that there are so many articles out there that don’t really help with the task at help. So here is a simple straight forward tutorial that [...]

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

Simple tutorial on how to make your website iPhone ready.

WebDevMania on iphoneToday i decided that WebDevMania needed to be iphone ready. I knew it wasn’t extremely hard, but i didn’t know that there are so many articles out there that don’t really help with the task at help. So here is a simple straight forward tutorial that should be used as a guide on how to create your website iPhone.

Redirect iPhone to Mobile Version Website

First and most important the simple 2 line javascript on how to redirect your website to the iPhone mobile version. Wrap the in script tags and you are ready to go, of course change out the window location to your own mobile site.

if(navigator.userAgent.indexOf("iPhone") != -1)
{window.location = "http://www.webdevmania.com/mobile";}

Modify the layout and stylesheets of your website to accommodate the iPhone

For WebDevMania all i had to do was remove the left column of the website and move the right column all the way to the left, no biggie. For you, simply isolate the content of the page, and remove all other div’s.
Once you are left with the main content div we can start the styling. First remove any css width you have on that main content element. Second preview website on the iPhone(if you don’t have one ask a friend to check it) then modify the styling accordingly. For me i had to increase font size of the paragraphs in the articles body, and then increase the line-height so that it was more readable. Boom you’re almost done.

Add new optimized iPhone menu

Now let’s add your websites logo and a simple menu navigation. Just float the logo left and the menu right. I highly suggest using simple a hrefs wrapped in a div.

Edit: I just checked the mobile site on the blackberry world edition and it works like a charm!

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

Related posts:

  1. Mobile Devices and Websites in the year 2009
  2. Simple Fast and Dirty Introduction to jQuery
  3. So you made a new website, what now?
  4. Simple Cross Browser CSS Layouts (ie6+, ff3+,safari*,chrome*)
  5. Daily Tip : Difference between $(document).ready and $(window).load in jQuery

Did you absolutely LOVE this article... share it!

Comments

  • Site Manager, Live View, Find Replace and Code Snippets are really helpful for me when I’m developing a site. Another great feature of Dreamweaver is the Tracing Image, But I haven’t use that much recently. I am hoping that Dreamweaver would support easy framework integration.

    Thanks for sharing.

  • thanks a lot! these tips really made my life easier. I bet you wrote this post to the music downloaded by http://www.mp3hunting.com SE? cause nothing gives more pleasure than work combined with things which make it pleasant;) now I go to try all those features by myself.

  • I am hoping that Dreamweaver would support easy framework integration.Thanks for sharing.

  • Great article for checking the user agents for the iPhone my site currently checks for 11 different mobile types and redirects accordingly. The list I have is Android, Sony Ericsson Aspen, Blackberry 9500 and 9530, Cupcake, HTC Dream, Sanyo Incognito, iPhone, iPod, Opera Mini Browser, Webmate on iPhone and iPod Touch and also Palm Webos.

  • Nice work. I’m currently in the progress of making our website cross-browser/iOS ready. Thank you!

Leave your own!

Sponsors

freedcamp free project management

Popular Articles

fzilla file hosting