Visualforce page in salesforce1

Question

I have this visualpage that is a combination of create Account and create Contact. All is well in the desktop version of the page. But what I want to do is that it should be also available in Salesforce1 mobile app. Not just show the page in a mobile device, but copy the look and feel of the Salesforce1 interface without changing the desktop version.

1)Is this possible? would it be possible to create 2 separate pages, 1 for the desktop version and 1 for the mobile, but controlled by only 1 button(page will depends if it came from Salesforce1 or from desktop)?

2)Another problem is that in my page I use apex:repeat -> apex:inputfield to display the fields from a field set. Do you guys have any tips in converting that page to a Salesforce1 app look a like?

I'm just new to Salesforce development, hence working with Salesforce1 is very challenging. Thanks in advance guys.

Answer 1

You can use one page for both scenarios, but in my opinion they're different enough to warrant two pages. Typically for a Salesforce1 page there's certain Visualforce components that you'll want to avoid (including <apex:pageBlock> and friends), and dealing with the CSS for each case is likely to be more hassle than it's worth.

To really get the most out of Salesforce1 pages you want to focus on speed, and that means not using a regular controller and sending Visualforce pagestates back and forth. Instead a better strategy is to use Visualforce remoting or remote objects to ensure that only data that needs to be moved, is moved.

You could implement a page in the middle approach so that a single button can be used, the button would go to that page, which on init would redirect to the appropriate page based on the URL.

Your repeat over a fieldset will work fine, I've used this myself in mobile pages, and as for styling there's a few good starting points, including Josh Birk's OneStarter which you can read about here. Essentially it's a jQuery plugin designed to style your pageblocks etc. for you, so if you want to keep one page it's a handy way to go about it.

With respect to styling you might find the Styleguide useful.