Responsive User Interface in General

In a previous post, I discussed how Responsive UI and the Grid can play nicely together. Backtracking a bit I thought that it may be helpful to explain Responsive UI in general. Responsive UI has been an intergral part of our enterprise mobile development practice.  If you are looking for the technical aspects of Responsive UI with keywords like Bootstrap and jQuery and Frameworks, please look elsewhere or simply Bing ‘Responsive UI Frameworks’ for some great posts and pages. This post is primarily focused on the general expectations of a Responsive UI and is geared more towards readers that may be facing or considering going with a Responsive design for your new Microsoft CRM-powered portal. mobile or web application.
responsive-device-compare

What is Responsive UI?

My 3000 ft. explanation: Responsive UI is a suite of technologies and design principles catered to rendering a website/portal that will function across all modern devices (and look good to boot). Key to this design approach is that no features are lost from desktop to tablet to phone. The design is ‘responsive’ and fluid so that elements may be displayed differently; some elements may change to a pop-out menu on a phone or an infobox may stack below other elements, but nothing goes away. Traditionally web applications were designed on a desk/laptop where screen resolution is a luxury and horizontal room specifically is abundant so they tend to function best in this environment. However, how does the same site work on a tablet? Or on a mobile device? I am sure that many a sleepless night has occurred due to somebody spending considerable effort (money) on a slick new web portal only to discover in the ninth inning that it fails to perform adequately on your windows phone. With our always connected, handheld world and now work environment, applications working only on the desktop are for the dark ages.

Adaptive and Responsive: Related, But Not the Same Thing

So before I go much further explaining some of the features of Responsive UI, I should mention Responsive UI’s sibling: Adaptive UI. Adaptive UI is similar in some ways but really warrants its own set of posts as it is also feature rich and could be a viable solution depending on your needs. I have colleagues at Customer Effective who are experts at Adaptive UI so maybe I can get one of them to soon post on the features of an Adaptive approach.

Responsive=Flexible

Now back to Responsive UI in general and what to expect if you are considering going this route. In many respects, Responsive to me means flexible. Elements on a page will grow and shrink based on screen resolution and if done correctly will avoid the menacing horizontal scroll. Typically elements on a page are arranged in a 12 column grid, grouped by fluid rows. So in one row you may have a data table that spans for 9 columns and an info box which spans for 3. Another row may have element A spanning for 6 columns and element B spanning for 6 as well. In a wider resolution each of the elements in both rows would be placed alongside each other. However when screen size changes, even down to a phone resolution, these elements will stack on top of each other. None go away and the user does not have to scroll left to right to view these elements. The general philosophy is scrolling to the right = bad, scrolling down = good.

This same approach can be applied to form elements. Say you have a contact form and the first name field is displayed on the same row as the last name field. Typically this works on a laptop, probably even a tablet, but what happens with the same form on a mobile device? Thanks to Responsive UI, each of these elements can live on the same row but as the room shrinks, they will gracefully stack on top of each other which makes the form usable and typical of mobile based forms. There are many other great features that can be applied to a form which I tend to group under the Responsive moniker, more stylistic approaches. I hope to cover these in detail in a future post.

Elements Explained

So far in explaining Responsive UI I have used the term ‘elements’ quite a bit and these elements have been related to the main content of the application which are the meat and potatoes of your portal – tables, forms, information. There are however many other elements of a modern web application. Headers, Navigation and Account Boxes. These also need to respond to their surroundings in a useful manner and can not go away. If your left-hand navigation bar disappears completely or is pushed over to the right, how will your users find their way to the Leads form to input Joe Decisionmaker’s information? Responsive here means flexible and by flexible I mean things change. Typically menus are part of the header or fixed to the left. In the Responsive world they will seemingly disappear but they actually don’t go away. The navigation will simply transform to a more screen friendly UI element, possibly a menu icon which when tapped will spawn a dropdown menu of navigation options.

Account boxes which usually display the user’s name or email address, links to account based pages (change password, edit profile, etc.) and a logout link. These account widgets are typically placed in the header of your application, right justified. As screen size changes you may end up with an account box that overlaps your logo/branding or breaks to a new line and forces your header to be sized too tall. Responsive UI may completely alter this account widget so that all that is displayed in a mobile view is a user icon which when tapped will spawn all necessary link options in a pop-out window.

responsive-account-menu

This is only the tip of the iceberg in terms of various Responsive UI features that can be applied to your web application. Certain components like forms and messaging can cover a lot of ground and I intend on addressing some of these elements in separate posts.

In summary, Responsive UI is not some magical potion that will make your web application look and behave as a native application. If you are seeking a true mobile experience, then you probably want to visit the Adaptive UI world which will give you more device specific interface especially in terms of controls (or build a native app). Responsive UI does however do an acceptable job of rendering one application across many devices. Things to keep in mind are that your mobile view will be different and often utilize icons for navigation, so the end user will need to learn a slightly different interface, understanding that a certain icon is where you go to navigate from page to page. Also, there can be a significant amount of vertical scrolling, especially on dashboards and form pages. This really isn’t a bad thing overall and really just the nature of a page. If you have a dashboard with four charts, a summary grid and three information boxes, this information will all display on a mobile device but will stack so your users will need to scroll down to view all. The fundamental concept again is that you do not loose functionality with Responsive UI from desktop down to mobile. Here at Customer Effective, we pay extra attention to this concept and ensure that your web application will perform as expected across all devices so that your users will be able to switch from laptop to tablet to mobile device and your portal will not sacrifice features across devices.