;

WebCenter Portal & Spaces Boilerplate template and overview to responsive design.


By

What is Responsive Design?
Responsive Web design - 
is an approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.

So as the user switches from their laptop to iPad, mobile device or TV etc to access a website – it should be automatically able to switch and accommodate for resolution(retina display), image size(bandwidth) and scripting abilities(touch, spatial events)

Web designers have always had the ability to create responsive sites (before html5 and css3, these standards just make it easier now); however with majority of users using their mobile devices or even TVs now; more than ever, to access the web we need to accommodate for our audience and provide a good user experience. One of the ways this can be achieved is through responsive design – although you need to look carefully at your site to see if responsive is the right approach and provides the correct user journey for your audience.

Read on to download the templates and find out more

Responsive ADF is scary::
To be truthful responsive design with ADF is scary and I would be one of those devs saying to stay clear of it!..

Why?
ADF is tag driven with all it’s html being generated via its renderkit; as a developer you shouldn’t modify the html output of any of the ADF tags from the renderkit.. Continuous work and progress is being made to the renderkit – and who knows in the next patchset the renderkit could support a subset of responsive design or custom mobile device templating.

We have seen Oracle making progress with mobile support with it’s new touch events and replacement of Flash with canvas graphing (DVT) in PS5.

I had a conversation on the topic with Angelo Sangata (@AngeloSantagata) - https://blogs.oracle.com/angelo/ who opend my eyes a bit more to responsive design with ADF and got me thinking..

At the end of the day users don’t need the capability to support on the fly responsive design as you scale your browser the site transforms; what they are really looking for; is for the site template to transform before the page loads. This where is where the adf magic can take place as the layouts automatically can be generated based on declarative stuff ie..  render based of an expression:: rendered=”#{EL Expression}”..

There is a small limitation I can see with this and it is down to orientation of the device as the ADF renders at request before the page loads. So when the page loads if you have a fixed defined width ie with table generated horizontal layout then when the device is turned the resolution of the display changes width & height. But I see this a very minor issue and can think of ways to fix this. One of which if you have played with the panel tabs or navigation providing the ability on overflow to hide the selectable links and provide a button to show a popup of those links now hidden by the page resize..

Recommendations::
That said here are my current recommendations and steps to creating a responsive WebCenter Portal.

First off, design your site template in html (since the PS3 release this is now possible).
(There is a divide in the community on the best approach pure ADF or Mix & Match with HTML).
Myself, Yannick Ongena (If you don’t have it I recommend Yannicks book on webcenter 11g administration) and a number of Oracle team members believe that this is the best approach.

In terms of ::
- ease of development with skinning pixel perfect sites.
- reduction of DOM (improving mobile interaction)
- allows design teams with no knowledge of ADF to enhance site faster.
- controlled browser support.
- css interaction hover events etc is faster than javascript events.
- no requirement to override default styles.
- possibility to incorporate custom IDs (none obfuscated)
- DOM structure will not change on next patchset of a renderkit upgrade

If you’re not going to do that and go down the pure adf route then I suggest you use panelgrouplayout vertical as this generates a div or default which generates a span – try to avoid tables unless they are for data grids or you have an adaptive framework that will transform the structure of your grid..

What makes a responsive or adaptive website?
In my eyes these are the elements needed to make your site responsive:

+ Fluid Grids
Are flexible grids that allow content to flow smoothly as the grids dimension increases
+ Flexible Images
Images that will auto scale based off the resolution (generally set images as width 100% or better set them as a css background with background-size:100%) Using WebCenter Contents DAM addon will give you the ability to generate multiple renditions of images to optimise them based off devices requirements. i.e you dont want a large desktop image to be downloaded onto a mobile device unless you know the correct hacks I recommend reading retinafy.me
+ Break Points
These define the resolution at which your template adapts and changes and are often defined within css3 media queries or javascript
+ Media Queries
The new CSS3 queries @media only screen and (min-width: 480px) { } that define the transformation of your template from the query.
+ Touch of JavaScript
Used to support older browser that are not capably of using CSS3 and html5

Lets get started::
There are a number of responsive JS/CSS frameworks available.
In this guide I’ll use Gumby (gumbyframework.com) although I have also worked and tested with Foundation (foundation.zurb.com). If you use any others please post a comment and let the others know which ones you’ve used successfully with WebCenter Portal.

(Remember you don’t need to use these frameworks you can create a responsive site from scratch but I find this makes it easier)

When it comes to responsive design I stick with 2 breakpoints (480px, 768px) to support mobile, Tablet & Desktop view.

(Although I have been playing with retina support with these views I won’t be covering it this in the post.)

Here is a viewet of our Responsive Fishbowl Portal Demo environment I created a couple months back.
(I’m not sure if I was the first to create a responsive portal template but if you have created one let me know I’d love to see it in action!..)

Another WebCenter Mobile optimised site includes LADWP.com although not truely responsive more of an adaptive site it is a good alternative to show you that you can still develop mobile supported sites without responsive html templates and use ADF.

1. First thing is to deploy your template::
Please go here to gain access to the zip file.
This is my ADF responsive boilerplate template that I use for the majority of portal projects – if you have any recommendations please pass them along, maybe I’ll setup a github for this if it gets a lot of downloads and becomes successful.
I do this at runtime as I find it quicker below are the screenshot steps.
Copy in the source from template.adf.jspx

2. Setup your Page Styles
Now the outer framework template has been setup here are a couple of responsive page styles you can incorporate into your site; this will transform the layout containers of your content to support the breakpoints. (One of the things I have done is prevented the ability to adapt and create additional columns/rows from the pagestyle layout – one of the power features of composer as these are table generated)
Use the same process as above but for pagestyles instead of template.
Copy in the source from pageStyle_3col.adf.jspx

3. Setup Apache
Create a folder “boilerplate” in your webroot and upload the folders within the zip file.
Or you can contribute these assets into your WebCenter content server or package them as resources into your template bundle be sure to adjust the links in the template, pagestyle and css if you do.

4. Create a space
Finally create a Space or define the new template to the space and create a page using the new responsive 3 col layout.
In Composer drop in 3 movable boxes to the containers and it should look something like this -

A word of warning and caution.. The OOTB WebCenter Portals, taskflows do not support responsive design you must make sure that any portal that is dropped into the containers can support the different resolutions or your content regions may stretch or even worse you will have scrollbars all over the place one of the major problems I see when I come on site to fix ADF templates.

That’s all there is to it; hand this to your webdesign team and they can brand the template and off you go. You can update the global.css this is just a sample stylesheet to tidy up the look of the boilerplate and give the template a basic wireframe look/feel..

Maybe in my next post I will create a pure ADF Responsive Boilerplate but as a webdesigner my approach would be the above template. And if you use my template at all for the start of your project please post the URL or image of the Portal.

12 Responses to “WebCenter Portal & Spaces Boilerplate template and overview to responsive design.”

  1. andrealmar says:

    Hi John awesome work. I just don’t get the Apache part. And when I try to update the source of the page template and the page definition, it throws me an error.

    Cheers,

  2. andrealmar says:

    Internal Error (WCS#2012.08.16.23.36.14)

  3. John Sim says:

    Check the page definitions are setup correctly with regards to required template taskflows.

    Also remove the Help link.

    Apache is just where I prefer to hold my webAssets you can bundle them with the template in JDEV or upload them into UCM you just need ot update the paths to those webasset resources.
    I setup a boilerplate folder in the webroot where my assets are held.

    Sent you an email;)

    • Harika says:

      Hi john,

      We followed exactly what you had on your site.
      We were able to get the responsive design down to Tablet level but, we are not successful on Mobile devices.
      Is there something on the taskflow or Page def we have to change?
      Can you please let us know about this.

  4. [...] WebCenter Portal & Spaces Boilerplate template and overview to responsive design by Fishbowl [...]

  5. Allen N says:

    Hey John…i’ve added the boilerplate to a space and the responsive design is rendering great if I view the page in the Fire Fox responsive design view tool but if I bring it up on a apple or android phone, it doesnt respond to the device. Any suggestions.

    The site is only on a development server so I wont be able to share the link at this time.

    Thanks…Allen

  6. NRH says:

    Hi,

    I am developing a webcenter portal application. I am able to successfully implement responsive style using foundation css. But, for some reason the styles of portal is changed. I am not understanding how to deal with that. Generally the dialogue boxes like Error Password incorrect style has changed and also when we try to edit pages in portal using addcontent — that style has also changed. So can you please suggest what can be done.

    Thanks,
    NRH

  7. J. Menge says:

    Hello,
    where can I find your presentation about repsonsive web design at OOW2013 (Sunday). Can’t find it in OOW content catalog.
    Juergen

  8. Chris says:

    Can you show how to set this up for testing on a local system using JDeveloper?

Leave a Reply