Mobile Site Generator v1.1

Last updated 4/8/10

New feature(s): 1. Pull in content via RSS feeds. Requires php on your server. I consider this feature to be somewhat experimental, and would love any feedback on how well it's working.

This form generates a mobile site using the iUI framework, version 0.31. I didn't create iUI, I just think it's a great toolset and it's easy to use. A mobile site made with this generator uses only the most basic features of iUI. Check out their documentation and examples if you want to go more in-depth. I've tested the results of this generator on iPhones, iPod Touches, and Android phones, though it should work on most smartphones.

This generator creates a site with subpages in a three level tree structure: The main page links to up to 8 subpages, and each of those subpages in turn can link to up to 4 more subpages.

  1. Before you get started: Download iUI, and unzip the files. It contains a folder called 'iui'. Put everything in this folder into a folder on your own server - it doesn't matter where.

  2. Fill out the form below, and click Submit. You can leave any item blank if you don't want to use it - the generator ignores empty ones. But you must give each item you use a unique name. Note that it's now possible to pull in content from an RSS feed on any sub-page. I recommend using an RSS feed only once per site - any more than that maydramatically slows down loading time.

  3. Despite containing different subpages, because of the way iUI works everything gets coded in one single html file. After clicking the Submit button way down at the bottom, copy and paste the resulting HTML code into a single file on your own servers, in the same folder that you put the iui files in step 1. (If you have problems copying and pasting, try using Chrome - it keeps the formatting of the text better for some reason.) Congrats, you should now have a working (blank) mobile site!

  4. This generator creates a shell for a site, just a navigation structure. You'll still need to add your own content to the code, but this only requires some basic HTML knowledge. (ex: It'll create a subpage called 'hours' for you, but you still have to add in exactly what those hours are) Here's how:

    1. After clicking Submit, in the resulting code each subpage of your site begins with a comment that looks like this: <!--Begin SUBPAGENAME subpage:--> Find the subpage you're looking for. For example, if you named a subpage 'Hours' you'd be looking for <!--Begin Hours subpage:-->
    2. Scroll down slightly and look for "Put your text content here" inside a table tag. Obviously, just replace that text with your own HTML content.
    3. Save.
    4. Ta-da!

While I'll try to answer questions and help in the comments below, I make no warranties or support promises. So use at your own risk.



Header image URL:
This is the header image for your mobile site, which will be displayed on every page. It needs to be 320x40. Here's a sample to play with: http://www.hiddenpeanuts.com/msg/samples/minimal/msg.jpg (it's so terrible that I can guarantee nobody will ever steal it)


Main page title:
This is the title of your mobile site's main page. Because of the way iUI navigation is displayed, I suggest something simple and short like 'Home'.


These items are displayed on your mobile site's main page. They're links to subpages, so should probably be things like 'hours', 'locations', 'catalog', etc. Whatever you like. The screenshot gives you an idea of what they'll look like.

Item 1:
Item 2:
Item 3:
Item 4:
Item 5:
Item 6:
Item 7:
Item 8:



These are the subpages that will be linked to on the Item 1 subpage that you named above. If a user picks Item 1, they'll be taken to a page displaying the links you specify below. So, for example: If Item 1 above says 'hours', then these might say 'Hours for branch A', 'Hours for branch B', etc. Again, whatever you like. If you leave these boxes blank, this page can be used for text content instead.

Item 1A:
Item 1B:
Item 1C:
Item 1D:
Check this box if you want this page to display
content from an RSS feed instead:
RSS feed:



These are the subpages that will be linked to on the Item 2 subpage that you named above.
Item 2A:
Item 2B:
Item 2C:
Item 2D:
Check this box if you want this page to display
content from an RSS feed instead:
RSS feed:



These are the subpages that will be linked to on the Item 3 subpage that you named above.
Item 3A:
Item 3B:
Item 3C:
Item 3D:
Check this box if you want this page to display
content from an RSS feed instead:
RSS feed:



These are the subpages that will be linked to on the Item 4 subpage that you named above.
Item 4A:
Item 4B:
Item 4C:
Item 4D:
Check this box if you want this page to display
content from an RSS feed instead:
RSS feed:



These are the subpages that will be linked to on the Item 5 subpage that you named above.
Item 5A:
Item 5B:
Item 5C:
Item 5D:
Check this box if you want this page to display
content from an RSS feed instead:
RSS feed:



These are the subpages that will be linked to on the Item 6 subpage that you named above.
Item 6A:
Item 6B:
Item 6C:
Item 6D:
Check this box if you want this page to display
content from an RSS feed instead:
RSS feed:



These are the subpages that will be linked to on the Item 7 subpage that you named above.
Item 7A:
Item 7B:
Item 7C:
Item 7D:
Check this box if you want this page to display
content from an RSS feed instead:
RSS feed:



These are the subpages that will be linked to on the Item 8 subpage that you named above.

Item 8A:
Item 8B:
Item 8C:
Item 8D:
Check this box if you want this page to display
content from an RSS feed instead:
RSS feed:




Comments:


blog comments powered by Disqus