I am leading a bootstrapped startup that is focusing on the parent and child relationship. My vision is that the application will have to be deployed over web and cross-platform mobile devices. I am going the route of finding freelancers to build components for me however I would like to standardize on a high level architecture up front. I really like how Clarity appears the same on both the web application and mobile application. Any suggestions on how this can be achieved from a technical perspective?
If you are aiming on iOS and Android with Windows Phone 7/8 as a plus you should use C# as the language and Xamarin Studio as the IDE/Framework. You may also choose to use Visual Studio on Windows as an option.
Take a look on their website: http://www.xamarin.com
Even Microsoft is using Xamarin to build iOS applications and they have over 400k developers using it. Your application will be native (compiled to the platform you choose) and you are able to use all the native libraries, widgets and UI parts.
You will need a cross-platform architecture to be able to reuse code among platforms and using Xamarin you may be able to reuse more than 50-60% of your C# code among platforms.
This solution may render the same experience on the devices as on the website, but it enables your applications to deliver much more performance and features than any HTML5 solution. Facebook went from HTML5 to native applications due to performance and user experience limitations (gestures and other platform features are not present using HTML5).
I just recently wrapped up a project that was similar to what it sounds like you are looking for: a web application that adapts the user experience to the type of device being used, desktop or mobile.
Part of the answer depends on if you envision your application being distributed to mobile platforms only on the web or if you plan on releasing mobile applications available in the App Store or Google Play.
For an application that is web-only, the key phrase is "responsive design." An ideal front-end architecture would be AngularJS + Bootstrap.
For an application that may also be deployed as a mobile app sold or offered in an app store, the AngularJS + Bootstrap combination mentioned above would work well with PhoneGap as a container. I prefer Sencha Touch for HTML5-based mobile apps as the user experience is excellent, with the downside that you have to write separate applications for mobile and web as it is not a responsive design framework.
For the back end, it's really up to what you are comfortable with, how conservative or bleeding edge you want to be, and how you see the application growing over time. The important part is that the back end is completely uncoupled from the UI, providing data via services that the UI can consume as opposed to generating HTML.
Feel free to contact me if I can help more!
After building several mobile web application I can say that the 3 top most common, mature, extensive and supported frameworks are:
Twitter Bootstrap: http://getbootstrap.com/
Zurb Foundation: http://foundation.zurb.com/
They are all "mobile first" and support all devices incl. desktop. they are responsive and you can really build an app on top of them.
Which one to pick you ask?
It really depends on the nature of you app.
for example, If you're focusing on parent child relationship and want to achieve nice page navigation of master-details, my gut feeling would probably go for jquery.mobile (page navigation: http://view.jquerymobile.com/1.3.2/dist/demos/widgets/transitions/)
For a heavy data entry app, bootstrap and zurb may be a better fit.
I'll be glad to hear more about your app and recommend the perfect fit for you.