Architecture Design Guidelines – User Interface – Part II

The first post of the ‘Architecture Design Guidelines’ covered architectural principles/guidelines at an overarching enterprise level. This post intends to move to the next level and start focusing on individual application tiers. The first to cover is user interface or the presentation tier/layer.

Too much JavaScript is injurious to your application’s health

Web frameworks selection is driven by flavor of the season popular web frameworks. The current lot of web frameworks support rich and responsive UI. Implementation of the UI richness has started a decisive shift towards using a lot of client side JavaScript code. Elements of the UI typically HTML content which earlier were handled at server side has started moving to client side JavaScript. This has two consequences. The browser’s rendering has become CPU intensive and client side JavaScript does not leave any room for performance tuning. The page rendition time is now largely driven by the browser, operating system and device’s compute capacity. Earlier if we had an issue with performance we could get better compute/more machines at server end and boost performance. Now that is not an option. We are at the mercy of the end user device capability. My recommendation is that only those aspects of UI for example conditional rendering, runtime component enable/disable which need to be handled by client side JavaScript etc should be @ client side. The rest should be handled by server side logic.

Keep your web page light

We are living in the ‘mobile first’ design world. Understand that the mobile device screen real estate is at a premium and you do not want JavaScript rendering to use up your CPU. Keep the web page light and simple. For a handy example look at, very light on content and extremely mobile rendering friendly. Keep your message simple and to the point and we are good.

Evaluate the responsive vs adaptive UI trade-off

Today the internet is accessed using multiple devices (phones, tablets) besides the desktop. This requires your web site design to handle multiple display form factors and orientation. The web designer has two broad options or techniques to use to handle this need. They can either use responsive web design practices or use adaptive web design. Responsive web design allows the same page to cater to multiple devices or form factors using CSS media queries. Based on the form factor, it basically hides or changes content layout. Adaptive web design creates targeted content for a specific form factor. Adaptive web design seems a lot of work vis-a-vis responsive, however it has its benefits. It provides greater control on the content layout. It ensures that client side Javascript processing is optimal; responsive web design typically receives the entire page content and based on form factor does a show/hide of the content.

My preferred approach is to simplify content and reduce the show and hide behavior of the form factor to minimum. Then we can look at using responsive web design. On the other hand, in case your desktop page content is very heavy, I suggest using adaptive web design with targeted content differentiated by device type.

Do an App only if it is a true market differentiator

Developing and maintaining a mobile app is a daunting prospect. You will need to create an app which at the minimum supports iOS and Android. Windows Phone (although I am a user) is not really popular and not really worth the effort unless your app enhances or uses the Office experience. Even with two OSs you need to cover multiple OS versions, device form factors and in case you are using device APIs, API compatibility.The only real reasons why one should create an app is if

  • The app is a real differentiator in the marketplace
  • The users are regular visitors to your web property
  • App is highly interactive or using high end features like gaming
  • Uses native functionality like click-to-call, SMS, GPS etc
  • Need to provide offline support


Featured Image courtesy pixabay.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s