Which approach is best?

Graceful Degradation, Mobile First, Desktop with Smart phone Apps….

With the new generation of smart phones, wireless devices etc, creating just a desktop web app is no longer a good solution for many business applications. Classic 3 tier development no longer supports the new client requirements. The most common approach which I’ve seen in most IT companys, is a Desktop Web Application and see what comes after. This usually happens because the technical decision maker is usually a software engineer who prefers java or C# and doesn’t like frontend development. This is just html, css and javascript… Choosing the right user interfaces for the client business case, needs a change of approach. One of the biggest problems today is that many implementations of back-ends do not support the requirements for modern frontend UIs.

What are the possibilities ( 3 Tier Applications ):

1. Classic approach: Desktop Web Application, see what comes after
Example: .NET 3 Tier Web application

Description

This is how most software company’s implement web application today. The front-end is implemented for a desktop and uses components which are not suitable for mobile websites. The page size is usually to big and HTML helpers are used on the back-end. The business is usually implemented in such away that it is not reusable for mobile applications. If a mobile front-end is added at a later date, the business code nearly always gets duplicated or is almost completely re-engineered. This is sometimes the best approach if you need to get your foot in the door. It’s the client problem after that. This is not always a good strategy as happy clients usually buy more than unhappy clients who have to pay loads for every little change that comes after…

Advantages

• cheapest, good for tendering procedure if only a desktop web application is required

Disadvantages

• Results usually in back-ends which are not re-usable for mobile front-ends
• More expensive if mobile applications are added at a later date.

2. Graceful Degradation Planned
Example: .NET 3 Tier Web application

Description

You design for the best (desktop) and provider a subset for the rest with less resolution. This is not a good solution as it’s almost impossible to maintain or plan. What features do you supply with what resolution or browser? Responsive design for the mobile devices makes it even more complicated and the testing effort is large for each front-end change. This should be avoided.

Advantages

• none really.

Disadvantages

• Front-end development gets complicated when supporting all the different browsers, screen sizes, input methods, versions
• Can’t use Html5 and css3 as most desktop browsers don’t support this yet.
• Testing effort must be increased for the same UI quality

3. Mobile First
Example: .NET 3 Tier Web application with jquery mobile frontend

Description

This is a good approach if you front-end is not too complicated. You design for your mobile devices first and then adapt upwards. Most user interfaces are to complicated and this approach forces you to plan a good user experience. A problem is that many desktop browsers still do not support html5 and css3 which are a great help when producing responsive mobile web interfaces and rotational features. When you use this approach maybe you could decide not to support older desktop browsers. This depends upon you target users.

Advantages

• Quality user interface, only display the features which are required and not all

Disadvantages

• Front-end development gets complicated when supporting all the different browsers, screen sizes, input methods, versions
• Can’t use Html5 and css3 as most desktop browsers don’t support this yet.
• Testing effort must be increased for the same UI quality
• UI can’t take advantage of keyboard input or desktop tools

4. Separate user interfaces, one for Desktop and one for all other devices
Example: .NET 3 Tier Web application with jquery mobile frontend + desktop frontend

Description

This is my preferred solution. For applications with complex user processes, I believe this solution is best. You can deliver a strong user interface for desktop applications (Keyboard input) and also design a quality mobile GUI with reduced functionality. When designing this solution a common service backend can be used, with separate front-ends.

I believe you should not try and support all mobile devices but just Android version 4 or later, iphone4/5 and Windows 8 phones. You can implement these correctly with responsive design (also support rotation) and you application will work well with most of the market. IPads and tablets with touch screen are in-between. The mobile application works well but the classic desktop view could also work well as the display is large enough. Depends on you business requirements.

Advantages

• Best user experience for desktop and mobile end users
• separate css and javascript files (each optimized for target front-end)
• KISS, simple software architecture and software design for each front-end
• Frameworks optimized for desktop or mobile front-ends can be used as designed.
• Complex business processes can be supported with the least amount of effort.(Desktop)
• Html5 and css3 can be used for the mobile applications, most destop PCs, don’t support this yet.

Disadvantages

• Mobile UI is still complex, devices, screen size, responsive design etc
• No html helpers in business backup (Could also be considered an advantage…)
• Backend is reduced to data provider or restful service (Could also be considered an advantage…)

5. Desktop Application with smart phone Apps
Example: .NET 3 Tier Web app. + iphone App + Android App + Windows 8 RT App

Description

This is the most expensive version. Requires extra effort in all cycles of the software process. Very few company’s have expertise in all areas required to produce the different applications for each end device. This usually ends up in an outsourcing sub-project which requires extra effort in business engineering and requirement engineering. It has an advantages that mobile hardware functions can be used in the mobile applications. If your developing LOB applications (or enterprise apps), deployment of Win RT and Iphone is also complicated and costs extra. I would recommend that this path is avoided unless extra mobile functionality is required or you need to support just one specific mobile device (Which includes extra hardware functionality…).

Advantages

• Each application architecture implemented as designed by parent system.
• Mobile applications can be outsourced to cheap software producers. (Requirement Engineering costs more!)
• Access to mobile device hardware functions/interfaces

Disadvantages

• Separate applications for end devices.
• Web Desktop application not optimized for mobile devices.
• High cost if n-mobile devices need to be supported. Desktop + Iphone + Android Samsung + Nokia Win 8 …
• Separate software development expertise required. (Apple, Android java, Web desktop application (.NET, Java, …), Win 8 RT Apps)
• Separate software deployment, release processes

When should I choose what:

This depends. Each approach has it’s advantages. Depends on your project and more important your company’s strategy. Do you sell plain software or expertise…

What about CMS, Intranets, Sharepoint?

When you use CMS or third party tools like twitter bootstrap, this usually results in bad mobile user interfaces. The quality is getting better but at present it is still best practice to avoid these when implementing mobile front-ends. If your front-end has no serious requirements in layout and style, frameworks like twitter bootstrap can be used. This supports mobile front-ends to a certain extent.

Links

http://www.webdesignshock.com/responsive-design-problems/

http://designshack.net/articles/css/mobilefirst/

http://en.wikipedia.org/wiki/Responsive_web_design

http://msdn.microsoft.com/en-us/magazine/dn197837.aspx

http://www.snowflake.ch/design/responsive-design/

http://www.abookapart.com/products/responsive-web-design

http://www.html5rocks.com/en/mobile/responsivedesign/

http://bradfrostweb.com/blog/mobile/the-many-faces-of-mobile-first/

http://mobilegovwiki.howto.gov/Mobile+First

http://www.netmagazine.com/features/mobile-first

http://www.lukew.com/resources/mobile_first.asp

http://www.w3.org/wiki/Graceful_degredation_versus_progressive_enhancement

http://andreasviklund.com/learn/graceful-degradation-vs-progressive-enhancement-part-1/

http://thecosmicparadigm.blogspot.ch/2012/06/ungraceful-degradation.html

Responsive Design Test Tools

http://www.responsimulator.com/

http://www.responsinator.com/

http://ami.responsivedesign.is/

http://resizemybrowser.com/