tags:

views:

378

answers:

2
+1  Q: 

Website Theme for IPhone - What are The Basic Ingredients?

Has anybody made a website theme for the iPhone?

Please let me know any tips or resources.

Here's my theory: How to make a website theme for iPhone

  1. Create a website theme designed for desktop monitors. Try not to make any element larger than 320px (iPhone screen resolution).

  2. Create 2 style sheets. One for desktop monitors and another for iPhone. By default, the desktop version of the style sheet is called. The iPhone style sheet would display items in such a way that they fit inside the 320px resolution.

  3. Create JavaScript file that detects Screen Size. If screen size is less than than 321px, then the style sheet is replaced by the iPhone version style sheet.

+1  A: 

Liquid layouts work well. When you switch from landscape to portrait and back on the iPhone, text reflows. I've used this one.

Nosredna  2009-06-26 16:48:00
Great example. I'm trying to make something a bit different though. I would like to use a multi column layout for desktop and single column for iPhone
 2009-06-26 17:13:55
Have you looked at iUi and jQTouch?
Nosredna  2009-06-26 17:16:31
Yes, but I'm looking to apply the theme to an existing CMS, so those seem a little overkill. I can probably borrow some CSS though...
 2009-06-26 19:15:54
A: 

Check out IUI which provides a very iPhone like UI for your website/application. (Free!)

Examples:

scunliffe  2009-06-26 17:03:17
IUI looks awesome, but I'm not sure it will fit my requirements. Also, there is very little documentation. I'm trying to make a theme for an ecommerce website that will display differently on iPhone vs desktop.
 2009-06-26 17:13:11
no worries just figured if you want a base for the iPhone styles this might help.
scunliffe  2009-06-26 18:02:21

related questions

IE7 HTML/CSS margin-bottom bug.
IE7: header above menu
How to create an all browser-compatible hanging indent style in CSS in a span
How can you customize the numbers in an ordered list?
style.display not working in Firefox, Opera, Safari - IE7 OK
Best WYSIWYG CSS editor?
How important is W3C XHTML/CSS validation when finalizing work?
Solve the IE select overlap bug
IE8 overflow:auto with max-height
Autosizing Textarea
What is the best way to create rounded corners using CSS?
FF3 WinXP != FF3 Ubuntu - why?
Is there a business reason for striving for pure CSS layout?
How to set up a CSS switcher in ASP.NET
Setting a div's height in HTML with CSS
Wrapping lists into columns
CSS Background Color in Javascript
How can I make the browser see CSS and Javascript changes?
What sites offer free, quality web site design templates?
Can you recommend a good CSS online resource or book?
Html CSS Editor
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?