It is difficult to have a discussion around web experience today without talking about mobile. Mobile has rapidly evolved from something that only a technically inclined group of users participated in (hey – look I can view the weather forecast on my phone!), to an omnipresent extension of our navigation, knowledge and interaction with the world. It is not surprising then that organizations need to embrace technical capabilities to engage customers, partners and prospects within this medium.

WebCenter Portal offers a variety of capabilities around mobile, some running on device, while others offering development platforms to cater to a wide range of devices – both off and on device. The pace of device capability is hurdling forward at a tremendous pace, as table and other form factors have grown rapidly in adoption. Depending on the project needs with a WebCenter Portal it may make sense to look at using CSS3 and Adaptive Design techniques to provide both a desktop browser, tablet and mobile experience from a single code base*

Only a few short years ago it was important to cater to a very wide range of devices web capabilities. Thankfully those days are coming to a close, as consumers of the “Facebook” generation frequently want the best access to news, events and services related to them and their social interactions.

Ok – enough around the introduction. How do we take WebCenter Portal onto a mobile? What do we want to achieve with the mobile version?

• What we will Achieve
• Technical Approach
• WebCenter Portal Adaptive Page Template
• Media Query CSS for Page Template
• Project Source Code
• Excellent Supporting Resources

What we will Achieve

1. The mobile experience will optimize the browsing experience for an iPhone style viewport, removing the login box and dropping the Offerings to below the page body. This simple example shows how with basic CSS we can easily change the visibility and positioning of the elements. Keep in mind that because this is client side, some items still remain within the document object model, but are removed in the user’s view. With EL these could be removed when the sever processes the user request, so that they would not show in the page markup behind the scenes, but in our case we are just going to use this as an example to illustrate Adaptive Design.
2. We will also change the navigation for easier use on a small form factor device.  In our case – and this is just an example – we are going to disable the dropdown functionality available on the desktop, assuming that child pages would have their own respective detail navigation.  In an actual deployment it may be more likely to use other techniques to handle this, but we do it here to show the difference that various CSS modification based on viewport size can have.

How will we do it?

1. CC3 Media Queries – CSS3 affords us the ability to understand the size of a user’s viewport and respond accordingly with styles tailored to a given user’s device. This means that we can adjust our user interface on the basis of desktop, tablet, mobile and even the big display in Times Square as needed
2. Portal Skin Family – WebCenter offers some nice skins around the Fusion UI, but for our example we need to set our skin to “simple” in the trinidad-config.xml file to give us the most control over the page style.
3. Viewport Meta Tag – We need to add a meta tag to let the browser know how to behave with our page (see more detail related to mobile meta tags) to keep our work abstracted from the core of WebCenter I used JQuery to append the meta tag within the header as follows$(‘head’).append(”);
4. WebCenter Page Template – For the purposes of this demonstration I created a slimmed down template with IDs and classes that make it very CSS edit friendly for this example.
5. IE – what would a post about the web be like without some caveats around IE? IE9 embraces the latest around media queries, but prior versions need a little extra love. We won’t showcase it in our example, but this great post over at Web Designer Wall – Adaptive & Responsive Design with CSS Media Queries dives right in to the gritty details of legacy support and how with a few extra files it is actually not too bad.

  
  







<script>
$('head').append('<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />');
</script>





    
     

          Account Login
        

        


          
            

                

                

                

              

                

                  
                    
                  

                  
                    
                  
                

                
                  
                

              

            
          
        

        

        

        
        
${node.title}
            

                

                  ${child.title}
                  

                
              

            
        

        
        

        

        




        
          
        

      
    

    
      
        pageTemplate_adaptive
        
          content
          content
        
      
    
  

mediaquery.css – CSS3 using Media Queries

Source code included in download package below code block

.contentbody
{
  width: 960px;
  margin: 0 auto;
}

.header
{
  height: 50px;
}

#maincontent {
	width: 600px;
	float: left;
}

#sidebar {
	width: 280px;
	float: right;
}

#sitelogo
{
  background: url("../images/webcenter.png") ;
  height: 61px;
  width: 126px;
}

#mobileloginlink
{
  display: none;
}

.footer
{
}

.clear
{
  clear: both;
}

#nav{
	list-style:none;
	font-weight:bold;
	margin-bottom:10px;
	float:left;
	width:100%;
}
#nav li{
	float:left;
	margin-right:10px;
	position:relative;
}
#nav a{
	display:block;
	padding:5px;
	color:#fff;
	background:#888;
	text-decoration:none;
}
#nav a:hover{
	color:#fff;
	background:#6b0c36;
}
#nav ul{
	background:#fff;
	background:rgba(255,255,255,0);
	list-style:none;
	position:absolute;
	left:-9999px;
  margin-left: -40px;
}
#nav ul li{
	float:none;
}
#nav ul a{
	white-space:nowrap;
}
#nav li:hover ul{
	left:0;
}
#nav li:hover a{
	background:#000;
}
#nav li:hover ul a{
	text-decoration:none;
  font-weight: normal;
}
#nav li:hover ul li a:hover{
	background:#333;
}

/* CSS that will be used for screens <= 600px */
@media all and (max-width: 600px)
{

.headerloginbox
{
  display: none;
}

#mobileloginlink
{
  display: block;
}

.contentbody
{
  width: 300px;
  margin: 0 auto;
}  

  #maincontent
  {
    width: 100%;
  }

  #sidebar
  {
    clear: both;
    float: left;
    background: #efefef;
  }

  #nav li:hover ul a{
    display:none;
  }
}

Sample Code Download

• Download the sample portal project code - please note that it is not 100% identical to the video code, but has all key elements (in the video the mediaquery.css file was located in "styles" vs "css" as in the download version.

Great Resources

Many other great techniques are possible through Adaptive Design. I suggest that you check out the following posts for more information.

• Web Designer Wall - Adaptive & Responsive Design with CSS3 Media Queries
• HTML5Rocks - "Mobifying" Your HTML5 Site
• Yannick Ongena - WebCenter 11g PS3 Tutorial: Building a WebCenter Template

Happy mobiling!

* Please note that this blog represents my own views and not those of Oracle. The techniques illustrated here are an implementation approach and sample.

Posts Related to E2.0 Workbench Podcast 6 – WebCenter Portal Mobile Templates using Adaptive Styles

• Site Studio Mobile Example – WCM Reuse
• WebCenter Portal Template Design Best Practices
• WebCenter Spaces 11g – UI Customization
• The Minimalist Approach to Content Governance – Create Phase
• Oracle UCM Integration with WebCenter