5 Steps to Implement Responsive Web Design in a WebCenter Portal

In a previous post I outlined two techniques for building mobile-ready Oracle WebCenter portals. In this post I demonstrate how one of those techniques (Responsive Web Design – RWD) could look and also call out 5 high level steps to implementation.

To implement the responsive portal shown in the video, I adopted a hybrid approach with respect to skinning. Oracle’s best practices for developing skins says this approach works very well. It uses traditional HTML/CSS to define the page scaffolding, or what Oracle calls “coarse-grain elements”, and embeds fine-grain components using either HTML/CSS or traditional ADF skinning. Think of the coarse-grain elements as container elements such as headers, footers, navigation regions, title areas, and columns of content. An example is represented in the wireframe template shown in Fig 1 below. By contrast, a fine-grain element could be a poll, image carousel, list of articles or any such content or functionally encapsulated within a coarse-grain container. You gain the following benefits by using traditional HTML/CSS for your coarse-grain elements:

• You’re speaking the language of most Web Designers and UX Developers and can implement their designs easily, without having to convert them to ADF.
• You can take advantage of the many great UX/front-end frameworks available. In fact, your design team may already have one in mind.

The IT Leader's Guide to Multicloud Readiness

This guide provides practical key insights and important factors to consider to make informed decisions in your multicloud journey.

Download the Guide

To the second bullet point, I used Bootstrap in the portal shown in the video, and relied heavily on its grid system to implement the coarse-grain components.

Fig 1. Sample wireframe of a portal page

Page Templates and Page Layouts

In WebCenter Portal, the coarse-grain components are implemented via page templates and page layouts. Page templates defines the structure of the outer most layer and are typically used to ensure that the site, or large sections of it, are branded the same and always look and behave consistently. Page layouts describe the structure of the inner layer and are typically used to affect the layout and positioning of page content. Page layouts are always wrapped by a page template.

So, now that you’ve seen an example of a responsive portal, and hopefully understand the approach,  I’ll layout the steps in implementation.

5 High-level Implementation Steps

1. Add your mobile first CSS to your portal skin.
   This is the CSS for the site’s default state (i.e. mobile device view – no media queries) . Do not include CSS media queries and do not include CSS that overrides Bootstrap (or whatever 3rd party framework you’re using). As always, add your ADF related CSS for your “fine-grain” elements.
2. Add the resource tags and responsive markup to you page template
   The tags are used to include CSS and JavaScript for any 3rd party frameworks you require and also for your customizations. Make sure your custom resources come after that of the 3rd party framework. It may look something like this:
   <af:resource type=”css” source=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css”/>
   <af:resource type=”css” source=”http://fonts.googleapis.com/css?family=Roboto”/>
   <af:resource type=”css” source=”http://fonts.googleapis.com/css?family=Merriweather:300,400,700″/>
   <af:resource type=”css” source=”//webcenter/content/conn/ucmserver/path/Enterprise Libraries/UCH/style.css”/>
   <af:resource type=”javascript” source=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”/>
   <af:resource type=”javascript” source=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js”/>
   <af:resource type=”javascript” source=”//webcenter/content/conn/ucmserver/path/Enterprise Libraries/UCH/scripts.js”/>

   Also from the page template, here’s a snippet of responsive markup that uses Bootstrap’s grid system to deliver a coarse-grain container element

   <div id=”siteFooter” class=”container”>
   <div class=”row”>
   <div class=”col-md-4 narrowFooter”>
   <div class=”adfWrapper”>
   <af:panelGroupLayout id=”pt_pgl6″ layout=”vertical”>
   <!– More ADF Code goes here –>
   </af:panelGroupLayout>
   </div>
   </div>
   </div>
   </div>

   Notice how the snippet adds an extra wrapper  (i.e. div class=”adfWrapper”) around the ADF code. This class does nothing, it is for informational purposes only (i.e. Don’t add any styling to the adfWrapper class). Because of the way the ADF rendering engine works, this layer is necessary to affect the class of the container wrapper above it (i.e. div class=”col-md-4 narrowFooter”). Encapsulate all of the ADF code in your page templates and layouts this way, and don’t mix any HTML within this encapsulation. Consider this the delineation between your coarse-grain and fine-grain elements.

3. Add the required “viewport” meta tag and responsive markup to you page layouts
   This tag controls the viewport size and scale and is required for a responsive page. It may look something like this in your layout.
   <f:facet name=”metaContainer”>
   <trh:meta name=”viewport” content=”width=device-width, minimum-scale=1, maximum-scale=1″/>
   <trh:meta name=”keywords” content=”#{bindings.SEO_KEYWORDS}”/>
   </f:facet>

   Responsive markup, similar to that shown in step 2, should be included in your template too.

4. Add your CSS media queries and bootstrap overrides to your external custom CSS resource files
   This is the resource file “UCH/style.css” listed in step 2. In addition, you may require one or more custom JavaScript resource files as well (ex: “UCH/scripts.js” also shown in step 2). NOTE: media queries are striped from skins, which is why this external custom file is required. This changes in WebCenter Portal 12c.
5. Place your external resources in WebCenter Content
   You’ll need a place outside of WebCenter Portal to hold the external resource files mentioned in step 4., and you’ll likely need a place for other unstructured styling assets such as images and fonts. You can use WebCenter Content for this as it allows design teams to access and work with these assets without involving the development team. It also allows them to take full advantage of useful content management features such as revision control and workflow.