According to Wikipedia Responsive Web Design (RWD) is:
“…an approach aimed at crafting sites to provide an optimal viewing experience — easy reading and navigation with a minimum of re-sizing, panning, and scrolling — across a wide range of devices (from desktop computer monitors to mobile phones)…”
Image may be NSFW.
Clik here to view.
Oracle’s main driver to make Siebel’s Open UI “responsive” most certainly has been to move to one single development and technology stack for desktop, tablet and other mobile use.
This strategy did require a complete re-factoring of the existing OpenUI themes which Oracle delivered in previous releases. The new (single) theme which comes along with IP14 is called “Aurora”.
Besides the fact that Aurora looks like a descent “flat” theme to start with, it also means that customers upgrading from Innovation Pack 13 or before, and deployed on OpenUI using the traditional themes have to go through a new cycle of change management for their end-users.
The pre-existing themes do no longer ship with Innovation Pack 2014
Well, it simply means all customers upgrading from Innovation Pack 2012 or 2013 will be affected :-( Re-factoring the existing themes and make them responsive was simply not realistic for Oracle.
The good thing is – Aurora really is a better theme base theme. Elegant, modern, easier to modify and responsive.
Aurora comes with these options:
- Tab navigation
- Tree navigation
- Side bar navigation
The new “Side bar navigation” is ultimately meant for touch devices, though it would work just fine in a desktop scenario. But in a desktop scenario it would certainly work far less efficient. The Side bar navigation on a touch device obviously has the great benefit of using far less screen real-estate.
Image may be NSFW.
Clik here to view.
The traditional Tab navigation…
Image may be NSFW.
Clik here to view.
The Tree navigation…
Image may be NSFW.
Clik here to view.
The new Side bar navigation…
Image may be NSFW.
Clik here to view.
The first thing that has changed is the introduction of the new “CSS Framework”. In previous OUI releases it would be still a cumbersome to change an existing (or create a new!) mainly theme because of scattered CSS classes, which were not really fit for re-use. The CSS Framework addresses this by standardizing CSS class names, re-use class names and have single method for modifying certain values shared by multiple CSS classes. For that cause Oracle moved to LESS-based CSS. LESS essentially is a pre-processer for CSS (like it’s competing sister SASS). This post explains the bare essentials about LESS. In a future post I will explain how LESS works in conjunction with OpenUI.
Further the CSS Framework implements responsiveness by having breakpoints for different view ports. To facilitate a responsive layout, each screen is divided into 12 equal columns. Developers can then use predefined “fluid grid classes” to specify the percentage of its parent’s width each element would occupy.
The predefined view ports are defined as:
Image may be NSFW.
Clik here to view.
This leads to these predefined classes:
Image may be NSFW.
Clik here to view.
These “fluid classes” will be used in web templates. Below an example.
Image may be NSFW.
Clik here to view.
The examples defines that “div1″ and “div2″ will be stacked for “small” screens and split 25/75 for “medium” screens, 33/66 for “large” screens and 50/50 for “large” screens. Since “extra small” is undefined, it would assume the default for “extra small” screens. This default should be found somewhere… (apologies, at this time I cannot answer this question…).
Further many icons have been changed to vector graphics so that they nicely re-size and render appropriately on other devices. That means you will find in the aurora.css a lot of base64 encoded SVG icons. Personally I’m not sure about potential performance implications having a huge CSS which in turn has many SVG images stored. In terms of CSS processing, would it have measurable impact compared to displaying just static content images? If you have an idea, let me know! I did some Googling but did not find supporting evidence pro or con.
Last but not least, traditional desktop features such as multivalue groups also apply to other form-factors than traditional desktops, hence are available on mobile devices too.
More will follow…!
- Jeroen
Image may be NSFW.
Clik here to view.
Image may be NSFW.Clik here to view.
