Structuring a mobile version of a website

[Banjax]

(Not entirely sure if this is the right forum for this but if not I apologise)

I'm looking at creating a mobile version of a site I admin but I'm not really sure how best to go about structuring the files. The site is pretty much all static text with just a little php to include headers/footers and some javascript for lightbox based image galleries and cookie control.

I'm planning on hosting the mobile version on a subdomain of the main site and could use some advice on the best way to set things up.

I can think of 3 ways to go about this off the top of my head.

1) Duplicate the entire site in the subdomain
This is obviously the easiest method as all I need to create is a new header/footer file to use and my content pages can include them but means I then have double the number of files to edit every update (and as far as I'm aware search engines frown on duplicated content in websites)

2) Cut my content into chunks and include it from a central location
So I would end up with effectively 4 files to create a single page, the page file which would call includes for the header, content and footer
Not a particularly difficult solution but seems fairly inelegant.

3) Make everything dynamic, store everything in a MySQL database and call the relevant sections as and when I need them.
Definitely the most difficult solution as this would involve re-writing the site from the ground up, designing the database to actually hold it all and merging the 2 existing databases I already have in order to make room for this third one.

There's no deadline for this project so the amount of work involved isn't a huge factor I'd just rather not start down one route and then find out I should have gone another.

So, any advice? Are any of these ideas actually workable or are they horrible?

[enterscope]

Mobile version = very basic html site. Depending on what kind of site software you use there might be a plugin for mobile version.

If you have a large static site or using outdated software, then it might save you time in the longrun to just convert your site over to mobile-compatible content-management system like Wordpress or Joomla.

That way you don't spend all this time making your site mobile-friendly only to have to upgrade something else later. Upgrading or adding features with Wordpress and other open-source content management systems is easy.

[Banjax]

I'm not using any software, I built every page from the ground up.
I don't know whether Joomla is any better but when I looked at Wordpress I found it to be horribly restricting and surprisingly difficult to configure so I have no plans to move to it.

[macenaa]

It depends how big your site is and how much time you have got. Like you I built my site from scratch and have just started to make mobile versions of my pages. My mobile site is a subdomain and basically I am doing a few pages at a time. I have already made some pages viewable on mobile devices. My first effort at a mobile page was viewable on mobile devices within 20 minutes.
I have already went down the path of using operators like Dudamobile and others to convert my site but the results were far from satisfactory. Maybe that route would suit those who have less than a dozen pages but having over 800 pages meant that too much material was dropped.
Anyway, I prefer complete control over my site. I studied all the options available and in the end I decided to do it my own way. I test my pages on a variety of real mobile phones and hand held devices, not on emulators or validators. I found scripts to detect mobile devices were restricted by the fact that not all mobile devices support javascript never mind the restrictions imposed by a lot of hosting companys.
If you are interested in trying it my way I will be glad to explain what I have done to get good results.
Because the pages have to be lean, without a lot of the garbage we leave on our html pages the coding is simple, quick and easy.
It costs nothing except your time.

[simplyamazing12]

The HTML5 interface is a lot more useful for making these mobile sites. jQuery more specifically makes it easier to almost simulate and duplicate the iPhone gestures and animations.

[macenaa]

Originally Posted by simplyamazing12

The HTML5 interface is a lot more useful for making these mobile sites. jQuery more specifically makes it easier to almost simulate and duplicate the iPhone gestures and animations.

HTML5 is the next big step forward in website programming but unfortunately the hardware cannot keep up.
I like to keep a few steps behind the cusp and let others (the pioneers) find the bugs, do the testing, make the mistakes and then rely on their advice and experience.
I may wrong about this but I believe HTML5 will not be a W3C Recommendation for about two years.
I am certainly looking at HTML5 so that I am ready to use it when then appropriate time comes.
As for jQuery, I don't think I have the brains to use it for mobile devices.

[Banjax]

I'm not really planning anything particularly fancy for the mobile versions, my site is more just informative (its the website for a local theatre group) than interactive so I was thinking more just landing them on a simplified navigation page leading to the content pages.

Macenaa obviously my site isn't anywhere near as big as yours but how are you storing the content for your mobile pages? Do you just have (effectively) duplicate pages one for computers and one for mobiles or do you store all your content centrally and serve it up to whichever page calls for it?

I'd certainly rather retain control of it myself than hand it over to an automated process, if only because if something goes wrong it'll be up to me to fix it and digging through other people's code is never pleasant.

(I think there is a JQuery mobile library now but I wouldn't know where to begin with using it, Javascript is a closed book to me at the minute)

[kausik_acumen]

I can share few tips you can think at the time of designing of mobile version of your existing site.

1. Yes, you can use sub-domain like m.<domain-name>.com OR go for a .mobi domain.

2. Dont try to incorporate all the information of your existing site, stick to the essential information only. Try to restrict the file size between 100Kb max.

3. Try to optimize the size of images you used for web version. Use different sets of images for two different versions.

4. You need to write optimize coding keeping in mind the memory and CPU limitations of smart phone.

5. Due to various reasons, a user can restrict the upload of images but without the alt attribute he doesn’t have any idea about their content. In addition, you need to use the tag label for input form. These are only a few examples of the importance of accessibility in the overall rating of the site.

6. Try to use different content from web version, and pin point the exact thing. Since in case of smart phone you will find very very less viewing area.

[macenaa]

From what you have said, you don't need jQuery nor javascript.
Basically what I do is to make a mobile-friendly copy (this may not look very like the desktop page) and use a button link in the top left of the desktop page which takes the surfer to the mobile version. Once they are on the mobile version, they can navigate normally through your mobile site.
I know this button link method is not approved website programmers generally but it works better than any other method because the button is the first thing a mobile will see when access your desktop site.
About your mobile site itself:
It has to have a xhtml doctype. This can be either Strict or Transitional. I am using Transitional because Google ads won't show on high end devices with a Strict doctype.
Use a sub-domain, again if you Google ads it will show that it is a mobile site and you won't get penalised for duplicate content.
Have a xml sitemap. They are easy to write. (I can give a template.)
Have a Stylesheet because xhtml restricts what you can put on the page. You need the stylesheet to optimise display for mobiles.
I don't use a robots.txt for mine because I think it might cause confusion.
Re-size your images to fit most phones. I use the .png extension because that has the lowest document weight.
Ensure your code complies with xhtml.
Your page extension is .html so you can view your mobile page on your desktop but it won't appear exactly as it will on mobiles.
Everything Kausik says makes sense.