IBM WebSphere Portal as the platform – The evolution
Just as devices and users' habits are changing, there are new challenges in creating web experiences for multi-channels. Responsive web design is a key approach in creating exceptional multi-channel web experiences. Technology is evolving to meet the new challenges including support for responsive web design.
Those familiar with WebSphere Portal technology will know that the portal theme controls the look and feel of the overall portal user interface and the navigation throughout the site. The rest of the layout of the portal page, which includes how the portlets are displayed relative to each other, is controlled by the default skin for that theme.
Since WebSphere Portal v5.x was released, access through mobile devices has become increasingly important, but there were no smart phones and tablets in the market at that time. Using embedded transcoding technology, WebSphere Portal v5.x supported markup based on HTML, WML and cHTML.
Later, with the proliferation of more than 10,000+ mobile devices with varying capabilities, it became impossible to support device optimized rendering with transcoding technology. Mobile Portal Accelerator (MPA), another offering from IBM, provides an easy way to deliver online content and applications to virtually all mobile devices. It includes out-of-the-box mobile portal samples and tools to develop Portlet applications for mobile devices. Using an intelligent multi-channel server it can adapt the content for each mobile device based on the specific device characteristics and capabilities, as defined in the software's device repository. Developers can therefore "write once" and render highly navigable, personalized web content quickly across 10,000+ different mobile device types.
Aware of the changing trends in mobility and to provide options to those focussing only on smart devices, the IBM Portal development team started developing Webkit based mobile themes (available since v6.1.5).
Using the default Portal theme for desktops and a mobile theme for smart devices poses certain design and architectural questions such as:
Whether to create different pages for mobile sites and non-mobile sites or to create virtual portals having different themes
If using a single URL, how to redirect the users to different pages based on the agent definition in HTTP header (web server URL override or filters or something else)
How to render the same IBM Web Content Manager (WCM) content on different portal pages (one for desktop and another for mobile viewing)
Despite the core Portlet applications being developed by IBM Web Experience Factory (WEF) having a common code base, the use of different themes creates issues with multiple code instances.
WebSphere Portal v188.8.131.52 has introduced responsive web design features for the default theme, which addresses these design challenges by having a single theme for multi-channel rendering.
Responsive web design for the Portal theme in v184.108.40.206
Responsive web design (RWD) has become a popular approach for creating a single website that automatically responds based on screen size, device and orientation, eliminating the need to design for a specific device preference.
Ethan Marcotte published an article discussing a practical solution to the shifting landscape of devices and screen sizes by creating flexible, fluid, and adaptive websites.
The WebSphere Portal v8.0 default theme is not optimized for mobile devices. It is essential to understand how the portal theme in Portal v8 works and how the default theme has been enhanced in v220.127.116.11 as responsive theme (creating a responsive portal theme is out of scope for this document).
The responsive UI in Portal was made possible using features that were introduced over the last few releases that allowed for separation of static and dynamic resources as well as modularized approach to page aggregation.
A WebDav “client” is needed to connect to WebSphere Portal, the WebDav “server”. We used the AnyClient WebDav client. This client provides a FTP based type of IDE. There are other WebDav clients available, some which allowsyou to map a drive to WebDav. AnyClient from JScape can be downloaded from here
The “wps/mycontenthandler/dav/themelist” WebDAV entry point should be used when you are creating a new theme (typically by an administrator). Once the theme is created, you should use the “fs-type1” entry point.
To create a new theme, export/download the existing theme from the file store. Use the following URL to connect to the filestore using the WebDav Client:
The value is the host name of the portal.
The value is the port number for WebSphere Portal.
The new theme was uploaded using the “themelist” entry point. To update your new theme, connect to the filestore usiing the following URL to connect to the filestore using your WebDav Client:
Portal Theme Optimization Framework
Rich web user interface (UI) designs are not without cost in terms of larger page sizes and increased processing in the browser when each page is rendered. These rich capabilities are worth it when you need them, but removing them for an entire site or including them only on pages that take advantage of these capabilities provides far more flexibility.
The WebSphere Portal (v18.104.22.168 & v8) modularized theme provides a flexible framework that:
Minimizes download size by giving you the control to specify just the capabilities that are needed for a certain scenario or use case.
Minimizes the number of requests to server by combining necessary resources.
Theme optimization uses modules and profiles to achieve the flexibility that allows you to achieve better performance. Modules are the components of the new theme that define capabilities. Examples are Tagging and Rating, Dojo, or jQuery. Profiles define sets of modules which can be assigned per page. A default profile is used if no page-specific profile is defined.
By applying these concepts, it is possible to control an arbitrary number of features for certain pages, develop modules independent of each other for greater development speed and flexibility, easily add new capabilities later on into an existing theme and build an altogether new theme with the existing one. With modular theme in v8, we were able to bring the empty portal page size to just 80 kbs.
Refer to the product document link on developing themes and skins in WebSphere Portal v8.0.
Enabling Responsive Design in the Default Portal Theme
There are two parts for the enablement of responsive design in a Portal theme. In step 1, CSS Media Queries are leveraged to optimize "look and feel" elements of the web page. Media queries are used to deal directly with page optimization based on screen real estate. Step 2 involves detection of user-agent in the HTTP request header, and combining that knowledge at runtime to render portal pages with resources (CSS, JS, markup) specific to the device. This created an adaptive UI where the proper resources were fetched for a group of devices, and only when those resources made sense, ensuring that bandwidth was not wasted and enhancing performance of the responsive application.
Media queries: By using media queries, presentations can be tailored to a specific range of output devices without changing the content itself. It enables the use of CSS based on orientation, screen size, and other attributes of the device/media.
Follow the content design approach using CSS3: Anyone who has tried to create multiple columns in the past using CSS & DIVs will already know that this type of layout has been achievable for a long time. However, this has often resulted in the use of complex techniques and floats. More often than not, this has been quite time consuming and is definitely not the easiest of layouts to create. The new multi column layout module offers more flexibility and control over previous CSS methods.
The new approach uses CSS3, which is an extension to the current CSS box model. It allows content to run from one column to another and makes it easily adaptable for different viewing devices and dynamic data.
Fluid elements: A fluid element uses percentages, instead of fixed values, to define container widths. Percentages create an elastic container that will optimize for different form factors. This concept applies to many parts of the theme, such as the navigation, footer, layout containers, and more.
Using styles to hide markup for responsive design is quick and easy, and in some cases might be the best approach.
Device Classes: The concept of device class or type is not new to WebSphere Portal Server v8. It has been in existence since v5. If you are building a website using WebSphere Portal, then the portal provides its own mechanism for determining "Device Class" (such as smart phone vs tablet vs other) that is configurable using WebSphere Portal configuration mechanisms (Portal XML Config, Portal's Supported Clients admin portlet etc).
Instead of using style sheets, you can leverage device classes to control markup that is rendered.
More information on the device class can be found here. If you are familiar with multi-channel application development using IBM Web Experience Factory (WEF), then you may be thinking why use WEF for device profiling when Portal itself is providing device classification? There is an excellent article on Portal Wiki by Michael Burati. Refer to “Using the Portal DeviceClass for Web Experience Factory multi-channel Profile Selection”.
Touch Events: As the mobile web evolves to enable increasingly sophisticated applications, web developers need a way to handle these events. For example, nearly any fast-paced game requires the player to press multiple buttons at once, which, in the context of a touchscreen, implies multi-touch.
The Touch Events specification provides a solution to this problem by specifying interfaces to allow web applications to directly handle touch events, and multiple touch points for capable devices. Refer here.
When optimizing the theme for smaller devices, it is important to take into account that the input mechanism will change as well. Tablet and smart phone devices allow a user to use touch events to select items on the page. You want to make sure that elements on the page are easily selectable using a finger. Smart phones provide less real estate UI space than a desktop or tablet, so it is more difficult to display items side by side while still making it easy to determine the different areas of the page and use touch events effectively. You may want to stack some elements of the page so that they are optimized for smart phones. The areas of the page to optimize in this manner are navigation, layout, and footer.
Refer to the following developerWorks article series “Implement responsive web design using WebSphere Portal, Part 1: Get started with the default theme” for more information on responsive theme and design.
Tools to create exceptional multi-channel web experiences
IBM provides many products, tools, and strategies to help organizations to create exceptional web experiences.
IBM WebSphere Portal provides a series of features fundamental to your multi-channel strategy. We described "responsive web design" in the earlier section. In this section, we bring special attention to the Content Template Catalog 4 (CTC4), Worklight, IBM Web Experience Factory, Rational Application Developer, and the multi-channel Feature Pack for Web Experience Factory 8.0.
Content Template Catalog (CTC4)
To create exceptional multi-channel experiences, you need to mix content with applications. In the past, building multi-channel websites using IBM Web Content Management (WCM) could be complex, involving information architects, creative designers, and WCM developers. Most websites have a common approach for navigation, layouts and over all website design.
Business users need a simple solution to:
Create and manage sites (and templates). Easier In-Place Editing (vs. In-Line Editing), guided forms based site creation wizards etc. This feature is only available when displaying content using a web content viewer portlet.
Create and edit content and assets.
As shown in the figure below, business users can easily start editing with the Full edit button, see more information, or open forms. They can also do some simple editing right on the web page.
Make sites work on different devices (key focus area, driven by responsive web design) & be multi-lingual – more about it later in this document.
Publish across channels and social networks (social marketing made easy, download from here)
As shown in the figure below, a business user can easily refresh statistics such as Likes, Reshares and Comments for a given message; delete messages from WCM and Social network; posts to specified social network, unlinks or unmanages a message in WCM.
Keeping these in mind, the IBM WCM development team developed the Content Template Catalog (CTC4), consisting of templates that are used to accelerate the process of building a multi-channel website.
The included templates cover many basic content types and design elements. Using these templates you can build a basic site very quickly with little or no customization. For more complex sites, CTC4 allows you to rapidly move past the initial build phase and proceed to delivering real value to your customers.
CTC 4 improves CTC 3.0 and 3.1 by adding the following new features:
Content targeting and application objects. Content targeting uses targeting rules to match the best content to the audience viewing the content in a spot on the page. With the new content targeting user interface, you can quickly create targeting rules directly on the page rather than creating other types of rules in the Applications > Personalization > Business Rules area of your site. This feature provides team members who do not have in-depth Personalization rules administration experience the ability to add content items to the spot and to determine which segments of users, groups, or devices see the content items in the spot. If you have created rules in the past, you can think of targeting rules as an easy way to blend binding and select action rules into one rule.
Integrating with MediaBeacon. MediaBeacon R3volution Enterprise is digital asset management software that can organize and manage digital assets, such as images, videos, and audio files. With integration support in IBM WebSphere Portal, you can access assets from a MediaBeacon server and display them to users with IBM Web Content Manager.
List presentation. A list presentation stores a reusable presentation for navigator, menu, personalization, and search components. If the presentation of a navigator, menu, personalization, or search component is used in more than one component design, then you can store that presentation in a list presentation.
IBM Web Content Manager Multilingual Solution (MLS). The IBM Web Content Manager Multilingual Solution is a set of tools used to manage translated versions of localized and regionalized websites.
Social rendering. Social rendering enables IBM WebSphere Portal page editors to feature social data that is hosted on a remote IBM Connections server in the context of portal pages.
IBM Worklight provides an open, comprehensive and advanced mobile application platform that can help you efficiently develop, run, and manage HTML5, hybrid mobile, and native applications, using standards based technologies and tools, mobile optimized middleware, a variety of security mechanisms, and integrated management and analytics capabilities.
Portlets and the server-side interaction may be developed with IBM Web Experience Factory, or Rational Application Developer. If you need Mobile Device Management and other feature, you may consider Worklight Server.
IBM Web Experience Factory and Rational Application Developer
For developing websites with Portal, two kind
s of tools are available: IBM Web Experience Factory (WEF) and IBM Rational Application Developer (RAD). IBM Web Experience Factory is an IDE that enables you to create multi-channel Portlets and Widgets. They can then be deployed on WebSphere Portal or WebSphere Application Server.
RAD is a traditional Eclipse based IDE/Java which enables you to create not only multi-channel Portlets but also to develop Enterprise applications. WEF comprises many tools, builder and wizards to speed up your development process. Rational Application Developer comprises a full Java EE stack, with support to SOA development, Web Services, and a the full extent of Java Enterprise. WEF is recommended when your need for development are well suited to predetermined builders or wizards, for example when you have to integrate with products such as SAP , and when you mostly have web development skills. RAD is more suited for Java developers, or people with a more deep knowledge or interaction of Java Enterprise world.
Web Experience Factory provides wizard-like constructs (builders) which help automate the generation of portlets and web applications, while RAD is a more generic-purpose development environment. Both of these development tools are based on the Eclipse platform and they can live in the same environment. RAD gives you full support to JSF.
The Portal toolkit v8.5 is included in RAD v8.5. This useful feature can be installed as a additional package. It gives you features such as:
Single Click Web 2.0 features: enabling Ajax, JAX-RS, Dojo, analytics for user interfaces with just a single click
A Rich page editor included for WYSIVIG Dojo, HTML5, CSS3, and Dojo mobile. The Editor now supports filtering based on CCPP profiles (Composite Capability/Preference Profiles) and device classes instead of user agent strings
Support for JSF 2.0. Portal 8 is fully supported.
Active Site Analytics, Client Side capabilities, RPC adapters, JAX -RS - REST Services
The following screen shows a single-click enablement of web 2.0 feature in RAD v8.5.
The following screen shows the rich page editor.
The Multi-Channel Feature Pack for IBM Web Experience Factory 8.0
The Multi-Channel Feature Pack for IBM Web Experience Factory 8.0 has some exciting capabilities which will further shorten the development time of multi-channel applications using Web Experience Factory.
This Feature Pack builds on the mobile and multi-channel support of IBM Web Experience Factory 8.0 and adds two new features:
Multi-channel and Responsive UI Support. This set of features provides support for building multi-channel portlets with a user interface that works well with the WebSphere Portal 22.214.171.124 responsive web design theme. This support includes several new layouts for the Data Layout builder, three new IBM Web Experience Factory UI themes, and a new wizard for creating models that include this new UI support. With these new tools, you can easily build great-looking applications that work well on any mobile or desktop device.