I would like to build a mobile version of my WordPress site. To avoid the problems and costs with developing for native platforms, I’d like to go for an HTML/CSS/jQuery approach that would be accessible from the Webkit browsers. The main site is already developed in WordPress, and content can be directly taken from the CMS.
I’d like the mobile version to be available from a specific URL such as www.mysite.com/mobile or mobile.mysite.com
How can I set this new URL to point to this version of the site? And how will this new URL change as I browse through the mobile site? And how can I load this URL by default when a user accesses the site from a mobile device?
Am I right to think that I can then develop this as I would make a normal theme for WordPress, with no other worry about this being meant for mobile devices rather than desktop?
Have a look at the WordPress Mobile Pack plugin. Amongst many features, it allows you to map a (sub)domain to another theme.
To build the theme in itself i’d recommend you jQuery Mobile. I’ve already used it for a few wordpress mobile sites, work great.
You can then use a plugin like WPtap Mobile Detector to automatically redirect the mobile users to the mobile theme that you’ve created. This will let them navigate with the same urls as desktop version but through the mobile architecture you’ve set in the theme.
About the mobile domain like mobile.mysite.com going directly to the mobile version from any device, i don’t see yet how we can implement this in a wordpress site.
Hope it helps.
For the detection and redirection part, http://www.handsetdetection.com can help you create a seamless rule that you can implement depending on what you require.
To show you how simple it is to set things up you can check this out:
How to Add a Site Profile in Handset Detection
I Hope this helps.
Cheers!
Your question conflicts slightly. I get the feeling you don’t necessarily want a mobile site, but a mobile-optimized or responsive website. This would mean however that you wouldn’t need another subdomain or separate directory, your site would just adapt to the device width. Your development steps are more or less minimal (and would take a day or so).
Start off by adapting a flexible/responsive grid as your CSS framework (i.e. 1140 Grid). A number of these already have media queries built-in to handle typical device widths (i.e. Desktop -> Tablet -> Smartphone). At this point, you just need to test, test, test. There’s no easy way around it, and within each respective device width change (i.e. CSS media queries), you’ll need to decide how you want to change the CSS there (i.e. adding ‘display:none’ to unnecessary widgets for smartphone users, etc.).