How to approach desktop application development with web and mobile apps in mind?

Question

I've been tasked with the requirement to produce a desktop application with a 'sexy'** look and feel. I intend to use WPF to achieve this. One of the requirements is that the desktop application will later expand to an ASP.NET MVC web application, and then a mobile (probably Android first) application, all while maintining the same look and feel.

**in this context, 'sexy' means sliding menus, and a generally modern look and feel

With this in mind, what is the best approach to take when beginning the desktop UI design if I want to reuse components (and/or) style?

E.g. in creating the desktop application I'd be using XAML for the UI, but considering there will be a web version of the app that should look the same as the desktop, should/could I use HTML/CSS instead? Is it ridiculous to even think that?

Answer 1

You'll get 1000 answers to this question but yes, I think it's pretty improbable. I'll try to explain why (considering the user interface only).

Why

The point, for me, is not what you can reuse but what you should reuse.

A desktop application, a web application and a mobile application are different. Different targets, different user interface, different standards. The way you use your, for example, favorite word processor is appropriate for a desktop application (menu, ribbon, context menu and anything else) but it's not the right look & feel for a web application. In a web application you navigate, probably you do not have many dialogs, user can move back and forward between pages. Now imagine the same application for mobile! It must be designed to be used with a finger, buttons must be large and it shouldn't have dialogs at all (and I'm over simplifying the topic).

An application shouldn't even be similar for these platforms, each one has its own characteristics and guidelines. If you do not follow them your user won't feel comfortable with your application even if its UI is really sexy. If you want to write a good application for web then be sure it'll be different (sometimes, but it depends on the type of application, completely different) from the desktop version and the mobile version will be even more different (even regardless languages and development environment).
Do you imagine a desktop version of StackOverflow site? Do you think it should look and behave the same? I guess your answer will be "no" even if we all appreciate how SO works for web.

Take a look to this:

• Android User Interface Guidelines
• Windows User Experience Guidelines

Even if there is not a standard guideline for the web take a look at this article (and imagine to use that tips for a desktop application):

• http://uxdesign.smashingmagazine.com/2009/09/24/10-useful-usability-findings-and-guidelines/

How many contact points you can see? Moreover for a restricted set of applications you may converge a little bit the UI for the web and the UI for the desktop (mobile applications are always too different in use) but it depends on the type of users you have and their background and experience.

What

If you write your application with WPF you may reuse part of the code to build a Silverlight application for the web. I'm sure you won't reuse everything because for a real world application their differences are too big.

For Android (even thinking to write for Mono) you can't reuse them at all (ok, it'll be a reference but you'll have to rewrite). Of course if you'll use Windows Phone your XAML will be partially reused and even your code.

Idea to use HTML/CSS is not bad, you can write a desktop application in HTML5/CSS3/JavaScript it'll run everywhere (desktop with Windows 8, web and mobiles). Ok, at least with few modifications.

Do not forget that a web application can be used from a mobile device. You may have to refine the application with appropriate CSS (and maybe to use the mobile version of your favorite JavaScript framework) but it's not a (so) big job.

Answer 2

In my opinion the notion of "write once run everywhere" is an unobtainable utopia. Both in general terms and more specifically if you want the users to have the best experience possible.

On one hand you can for sure go down the HTML/CSS route, using an embedded web browser for all desktop platforms, may it be Windows or Mac. With a skilled designer and good UX programming skills you probably can achieve excellent results. Some parts of that could probably also be re-used as a mobile version in the shape of an PhoneGap / jQuery Mobile / Kendo UI Mobile solution for all major mobile OSs, iOS, Android and Windows Phone. The potential drawback is that the application will not be looking as an native app on either of the platforms. Xamarin Mono Touch or Mono for Android can also be something to look at.

On the other hand, you could put or your app logic behind an ASP.NET Web API solution on the web, authorize (if needed) through Azure ACS or OAuth. Develop native apps in WPF for the desktop, Java for Android and you may even re-use some of that XAML for Windows Phone.

Personally, the latter solution taste best for the purist in me, but as you mentioned, if branding and look & feel is very important (with the cost of native look), the first option is probably better suited for your needs.

As usual, "it depends" as an answer is still going strong.