Screencast 6 – WebCenter Portal Mobile Templates using Adaptive Styles

Screencast 6 – WebCenter Portal Mobile Templates using Adaptive Styles

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

  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.
The figure below roughly depicts what happens when our “viewport” drops below 600px.  The site is bare-bones, but setup to convey key points that you can work into your own designs.


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.

pageTemplate_adaptive.jspx – Adaptive Template ADF Code

<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
          xmlns:f="http://java.sun.com/jsf/core"
          xmlns:h="http://java.sun.com/jsf/html"
          xmlns:af="http://xmlns.oracle.com/adf/faces/rich"
          xmlns:cust="http://xmlns.oracle.com/adf/faces/customizable"
          xmlns:c="http://java.sun.com/jsp/jstl/core">
  <jsp:directive.page contentType="text/html;charset=UTF-8"/>
  <af:pageTemplateDef var="attrs">

<af:resource type="javascript" source="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></af:resource>

<af:panelGroupLayout id="webcenterroot" layout="scroll" styleClass="webcenterroot">

<f:verbatim>
<!-- disable iPhone inital scale -->
&lt;script>
&#36;(&#39;head&#39;).append(&#39;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, minimum-scale=1.0, maximum-scale=1.0&quot; /&gt;&#39;);
&lt;/script>

<af:resource type="css" source="http://127.0.0.1:7101/AdaptiveTemplatePortal-Portal-context-root/css/mediaquery.css"></af:resource>

</f:verbatim>

    <!-- This will dictate overall width -->
     <af:panelGroupLayout id="contentbody" layout="vertical" styleClass="contentbody" >

        <div id="mobileloginlink">
          <a href="../pages/login.jspx">Account Login</a>
        </div>

        <af:panelBorderLayout id="header" styleClass="header">

          <div id="sitelogo"></div>

          <f:facet name="end">
            <af:panelGroupLayout layout="vertical" id="headerloginbox" styleClass="headerloginbox" halign="end">

                <af:outputText id="ot_username"
                               value="Welcome #{securityContext.userName}"
                               rendered="#{attrs.showGreetings}"/>

                <af:goLink id="gl_adminlink" text="Administration"
                           destination="/admin"
                           rendered="#{attrs.showAdmin and !attrs.isAdminPage}" />

                <af:commandLink id="cl_logoutlink" text="Logout"
                                action="#{o_w_s_l_LoginBackingBean.doLogout}"
                                rendered="#{securityContext.authenticated}" />

              <af:subform id="sf_loginbox" defaultCommand="pt_logincb">

                <af:panelFormLayout id="pf_userloginform">

                  <af:panelLabelAndMessage id="pl_username" label="User Name">
                    <af:inputText id="pt_it1" simple="true" value="#{o_w_s_l_LoginBackingBean.userName}"/>
                  </af:panelLabelAndMessage>

                  <af:panelLabelAndMessage id="pl_password" label="Password">
                    <af:inputText id="pt_it2" simple="true" value="#{o_w_s_l_LoginBackingBean.password}" secret="true"/>
                  </af:panelLabelAndMessage>
                </af:panelFormLayout>

                <af:panelGroupLayout id="pl_loginbutton" layout="horizontal" >
                  <af:commandLink id="pt_logincb" text="Login" action="#{o_w_s_l_LoginBackingBean.doLogin}"/>
                </af:panelGroupLayout>

              </af:subform>

            </af:panelGroupLayout>
          </f:facet>
        </af:panelBorderLayout>

        <af:panelGroupLayout id="topnavigation" layout="horizontal" styleClass="topnavigation">

        <!-- UL / CSS based nav -->
        <ul id="nav">
        <c:set var="node" value="${navigationContext.defaultNavigationModel.listModel['startNode=/, includeStartNode=false']}" scope="session"/>
        <af:forEach var="node" varStatus="vs" items="#{navigationContext.defaultNavigationModel.listModel['startNode=/, includeStartNode=false']}">
        <li class="parentnode"><a href="/webcenter${menu.goLinkPrettyUrl}">${node.title}</a>
            <c:if test="${not empty node.children}">
              <ul>
                <c:forEach var="child" items="#{node.children}">
                  <li class="childnode">
                  <a href="/webcenter${child.goLinkPrettyUrl}">${child.title}</a>
                  </li>
                </c:forEach>
              </ul>
            </c:if>
        </li>
        </af:forEach>
        </ul>

        </af:panelGroupLayout>

        <af:facetRef facetName="content"></af:facetRef>

        <div class="clear"></div>

<br/>
        <af:panelGroupLayout id="footer" styleClass="footer" >
          <af:outputText id="ot_copyright" value="Some Copyright Info Here..."/>
        </af:panelGroupLayout>

      </af:panelGroupLayout>
    </af:panelGroupLayout>

    <af:xmlContent>
      <component xmlns="http://xmlns.oracle.com/adf/faces/rich/component">
        <display-name>pageTemplate_adaptive</display-name>
        <facet>
          <description>content</description>
          <facet-name>content</facet-name>
        </facet>
      </component>
    </af:xmlContent>
  </af:pageTemplateDef>
</jsp:root>



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.

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.

Related Articles

32 comments
candacephelps
candacephelps

Hi John,

I downloaded your sample application and ran it, but it doesn't actually seem to change layouts when I resize the browser. I'm running it in JDev 11.1.1.6. Will this work? What version did you build in? 

Thanks,

Candace

rajasree
rajasree

Hi John,

 

I have a created  a webcenter portal application. I have a requirement that it should be mobile friendly. I am trying to implement that using bootstrap. In desktop it looks fine. But bootstrap-responsive.css is not working with portal application. When I test my application only with html then it works fine. But in webcenter portal, its not taking. Can you provide me suggestions.

 

Thanks,

Rajasree

nierea
nierea

Hi John,

 

I am creating a responsive WebCenter space using the Foundation framework. Everything is working well except when I use the @media query in the CSS to render the site differently on the desktop, tablet or phone. The phone is rendering the site as the tablet (max-width 1280 and min-width 768) and will not render the phone class (max-width 767). This is happening on both the iphone and android. We are using WebCenter 11g / PS5.

 

Thanks in advance for any assistance.

 

Allen 

OscarCorredor
OscarCorredor

Hi John, im trying to implement dynamic styles on a Webcenter Portal page with a css file ( not on a template as i cant make a template for each page), the code where i reference the css file and all the stuff i need on the page is this:

MarketPlacePortal is the name of my Webcenter Portal Application Project.

 

<af:resource type="javascript" source="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js">

</af:resource>

<f:verbatim>

<!-- disable iPhone inital scale -->

<script>

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

<af:resource type="css" source="http://127.0.0.1:7101/MarketPlacePortal-Portal-context-root/css/mediaquery.css"></af:resource> 

 

</f:verbatim>

 

<div id="mobileloginlink">          <af:goLink destination="/faces/pages_registro" id="cl1" text="Registrar"/>                    </div>

 

for now all i want is that go link to disapear if the width of the device is less than 640.

 

And my css file, which is located on the css folder auto generated by Webcenter, looks like this:

@media all and (max-width: 640px) {

#mobilelogoinlink { display: none; }

}

The problem I'm having is that its not working, i change my browsers resolution but nothing happens. I would really appreciate if you  could help me, i've been working on this for days and can't seem to make it work.

 

Thanks in advance

 

bysanibhanu
bysanibhanu

Hi John, Thanks for the information. But, John actually in Jdeveloper IDE I could find a check box "Render in Mobile" and from documentation of Oracle , it is said that this thing should be checked for Rendering the page in Mobile. But in the above example you have not checked that option ,.. Can you please let me know the significance of the Checkbox.

radhikac
radhikac

John,

Have you come across any Mobile/ tablet Webcenter UI's that may need file uploads ? One major problem we have for iPad interfaces are the file browse and upload features.

Thanks

Radhika

tim.hickey
tim.hickey

John,

I have got this working and have added some code for detecting ipads as well. But I am trying to now add some normal Webcenter Components on to the page. And I want the same effect of showing and hiding the regions.

But it seems I can only use your .headlerloginbox class to do this. When I try to create my class it is not working. I noticed the ID and classes are the same. Can you explain some more how I might go trying to get Webcenter Components to work the same way.

Thanks

Tim

nickolmsted
nickolmsted

One other note is it looks like the above video was cut off at the end? Will there be a part 2 to the video?

nickolmsted
nickolmsted

Hi Jon - thanks for the above article. I have a couple of questions:

1. Can the above techniques also be used with a WebCenter Spaces template?

2. Within your template when do you decide to use HTML vs ADF? It seems you only use HTML when you need to manipulate the DOM through jQuery.

John Brunswick
John Brunswick moderator

@candacephelps Do you know if the CSS media query code is referenced within the page that the portal is rendering?  I would suspect that if the page runs fine, but does not update for the form factor, the CSS needed for that media query is not being applied.  Using Chrome's developer tools or Firebug in Firefox you can inspect an element on the page - like the navigation - to see if the media queries are being applied.

If you are trying to do a simple proof, you can always include an inline style block within your page template with the CSS from above.  Then, externalize the CSS for a real scenario.

Let me know if that helps :-)

John Brunswick
John Brunswick moderator

 @rajasree Hey Rajasree,

 

Most commonly if your design is working on the desktop, but not on an actual mobile device it has to do with the meta tag associated with the Viewport.

 

https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag

 

Without adding the proper tag, the mobile device will do its best to render it like a standard page - opposed to your mobile design.

 

You can start to try something like the following to ensure that it can run on an actually device, opposed to the browser.

 

<meta name="viewport" content="width=device-width" />

 

Additionally, check out the Opera Mobile Emulator http://www.opera.com/developer/mobile-emulator - it will actually help you troubleshoot the above item, as it does more than simply show a smaller screen and will require the proper Viewport setting to display as you are intending.

 

Hope that helps!

 

Cheers,

John

OscarCorredor
OscarCorredor

 @OscarCorredor  @media  It seems like its the way I'm calling the css file,

 source="http://127.0.0.1:7101/MarketPlacePortal-Portal-context-root/css/mediaquery.css"

The name of the project im working on its called MarketPlacePortal, shouldn't it work?

John Brunswick
John Brunswick moderator

 @bysanibhanu As far as I know that will change the JDeveloper preview window to show a smaller view size.  The example in this post uses CSS3 Media Queries and I suspect that the change in the JDeveloper preview window may not adjust as expected with media queries.  I am away from my dev machine, but can definitely test.  I suspect that setting is really intended for the traditional ADF Mobile.  With the latest release (as of a few weeks ago) the preview does a nice job of previewing based on device / screen size.  That is different from the portal adaptive design though, as ADF Mobile uses a different "rendering" engine.

 

Hope that helps shed some light on the setting!

 

Cheers,

John

John Brunswick
John Brunswick moderator

@radhikac Hey Radhikac,

I have not personally worked with that before. What is the specific issue you are running into?

Cheers,

John

John Brunswick
John Brunswick moderator

@tim.hickey Thanks Tim. The easiest way may be to apply a custom class to the component that you wish to show / hide vs what is autogenerated out of the box. For an ADF component you can add the styleclass attribute (e.g. styleclass="headerloginbox") as you noted. This would give you tighter control than attempting to leverage an existing class. If you would like I would be more than happy to check out your sample code.

John Brunswick
John Brunswick moderator

@nickolmsted Thanks Nick. It was very late at night when I wrapped up the video (4AM), so I actually moved the demo to the front and the code walkthrough to the back, so there is not a part 2 as of now. I will review it though, as I do not want it to be too confusing. After awhile I can only listen to myself so much without going a bit crazy :-)

John Brunswick
John Brunswick moderator

@nickolmsted Thanks Nick. Please note that my following comments reflect my own views and not necessarily those of Oracle, but

1. Yes - there would just be more markup in the template that may make it a bit more complex. Given what people do within a Spaces instance it may make sense to look at the <a href="http://www.oracle.com/technetwork/middleware/webcenter/iphone-163241.html" rel="nofollow">iPhone application</a> if collaboration is the focus and if that is a device that is targeted for use.

2. JQuery was a quick way to append information within the head of the DOM. However, you could use ADF to add them as well, but I have not tied it with the viewport information specifically - http://technology.amis.nl/blog/4631/adf-11g-include-meta-data-tags-in-head-element-using-afdocument-and-metacontainer-facet. Hope that helps!

candacephelps
candacephelps

@John Brunswick Either I am not running the right page, or the right page doesn't exist in this project. I see the pageTemplate_adaptive.jspx file, but I don't see any page that uses that template (though maybe it's being used via the nav model), and I don't see any page that looks like the one shown here in your post. 

rajasree
rajasree

 @John Brunswick  @rajasree Hi John,

 

I tried including <meta name="viewport" content="width=device-width" /> but its not helping either.  I am able to get when I write my custom css. But with bootstrap css, I am not getting.

 

Thanks,

Rajasree

John Brunswick
John Brunswick moderator

 @OscarCorredor Hey Oscar,

 

If you use Chrome / FireFox & Firebug and use the developer console are you seeing a 404 with a request for that file?

 

If there is no issue reaching the file check out the Chrome's inspection for the region you are trying to have change based on the Media Query.  You can see if the changes you are looking to have applied are being applied, but perhaps due to execution precedence of the CSS evaluation are being overridden.

 

Additionally, with regard to precedence try to taget IDs.  The following article does a nice job of outlining the evaluation order of CSS - http://css-tricks.com/specifics-on-css-specificity/

 

Hope that helps!  It is definitely time consuming to debug Media Queries.  The new version of FireFox has some tools geared toward mobile design that might be helpful.

 

Cheers,

John

bysanibhanu
bysanibhanu

Hi John, Thanks for the reply but still john that is not related to the preview option. The rational behind asking that question was to understand whether this adaptive approach holds good for rendering all the taskflows in mobile device(not using ADF Mobile). I have analyzed the Activity Stream taskflow,connections taskflow which have Pop-Up tags present which will not be rendered in mobile. So, trying to understand whether the adaptive holds good while rendering on mobile. Please give  some pointers... Excuse me if troubled

maximecarrier25
maximecarrier25

 @John Brunswick

 Yes, it is exactly what I'm looking for (with WebCenter Portal). Is this only a solution that I can buy or open source code that I can use? I'm trying to find the best solution (either adaptive or a separate project) to make a mobile app from a WebCenter portal I already made.

 

Thanks :)

candacephelps
candacephelps

@John Brunswick Tried that already. Still doesn't look like yours. At the moment, this is not a pressing issue I need to solve, but I would like to be able to figure it out. When I have some time, I'll dig deeper into the css and page templates and get it working. 

John Brunswick
John Brunswick moderator

@candacephelps @John Brunswick Thanks.  What if you try creating a new page in the portal application and setting the template to the adaptive one?  I am not at my system with the running application right now, but that should help to verify if it works.

OscarCorredor
OscarCorredor

 @John Brunswick Thanks a lot John, so far what i've done is make changes to the css file in the adaptiveTemplatePortal and reference it on my project, it works like a charm but i can't seem to obtain the css file of my own project which is giving me a huge delay as i have to deploy your project and verify the file has changed and then deploy my project which gives me a lot of out of memory issues. I'll give the http server a try and see if i can manage to referece the file from that server.

Thanks a lot John

John Brunswick
John Brunswick moderator

 @OscarCorredor Hey Oscar,

 

The 404 is definitely the starting point for the issue, as if the browser cannot load your custom CSS, it cannot apply it to the page.

 

A quick fix for development purposes is to run something like XAMPP (Windows) or MAMP (Mac) to have a local HTTP server that you can easily drop files into for testing - http://www.apachefriends.org/en/xampp.html (don't mind the download page UI, it looks odd, but is legitimate).

 

Once you get the 404 resolved, you should be able to start to see if your code is making any adjustments based on the media queries.

 

As a side note if you are new to web development I would highlight recommend becoming familiar with the Document Object Model and CSS Selectors.  This will help a ton as you start to move forward into fine tuning the UX for your web applications.

 

Cheers,

John

OscarCorredor
OscarCorredor

 @John Brunswick  @OscarCorredor Hi John, something really weird is happening  because when i made reference to the file generated in the example project you made, it works if i give  ids  same as the ids that appear on the file of your project, then these items will adjust and disappear when i change resolution but if i reference the file i created on my project it just won't work. I've tried to check what you told me on the developer console but my experience with web development its almost none and i can't seem to find the problem. I checked the resources tab, there is an item called script but my file doesn't appear listed there. i also tried browsing the url of the file (http://127.0.0.1:7101/MarketPlacePortal-Portal-context-root/css/mediaquery.css) and i get a 404 but when i try to access yours i do get a file, i tried to upload it to my public folder in dropbox so i could get a direct link to my file but it did not work. at this point i dont know what else to do, i know my code is simple enough to work but i cant seem to reach for it.

For now its working by modifiying the file in your project and  referencing it on my project. Its really odd but its the only work that it seems to work.

John Brunswick
John Brunswick moderator

 @bysanibhanu not a bother at all - just getting back to my desk this evening.  So - each instance of an adaptive design will be different on the basis of the application that you are delivering within the portal framework, there is not a one size fits all approach.  What I can suggest is using Classes on your components within template to make them easier to apply CSS to.  For some general guidelines around template design check out - http://www.johnbrunswick.com/2012/05/webcenter-portal-template-design-best-practices/.

 

- Keep the adaptive design focused around "coarse grained" changes vs trying to get very specific with small items on a given page.

 

- If your application will be delivered on a tablet you are going to have a much easier time making the experience work well on the smaller form factor vs trying to condense an existing experience into a phone sized form factor.

 

- Stay light on the number and nesting of components in your pages / templates.  Less markup within the browser will be easier to control and make your work in CSS easier to understand.

 

- Use browser developer tools found in Chrome and FireFox to look at the page markup, do realtime adjustments and port them back into a CSS file.

 

- Externalize your CSS from your template into an external file to make it easy to modify as needed without doing a lot of work constantly deploying your template / application.  Please note that by doing this, your CSS will not use the render engine for dynamically generating the CSS classes, etc.  Instead you can rely on using explicit Classes that you associate with the components within a page.

 

- The following (not ADF specific) outlines some really nice approaches to thinking through the design - http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries.  Again, understanding your target form factor is key, as a lot of effort will be needed to target a range of sizes vs 2 (e.g. desktop and tablet).

 

I hope that some of these tips help, as again there is not a one sized fits all approach.  Overall having a good grasp of CSS3 / advanced CSS will be very helpful in controlling the experience delivered to your end user within their browser.  If you know of / have some CSS gurus they can definitely help if you get stuck or are in a bind.

bysanibhanu
bysanibhanu

Hi John, Please provide some pointers regarding tinkering of the taskflows... Sorry for bothering

bysanibhanu
bysanibhanu

 @John Brunswick Hi John... No idea regarding Product Management Team. But, John if we say some trial and error attempts then it is something like we need to go into each task flow and check for the components not supporting and we need to tweak right.

 

Another point is that the native App approach is not required in my case . We need to render the portal application on mobile .And here we need to render Spaces also on mobile so we use the Spaces taskflows extensively. So, how to proceed regarding this.. Any pointers would be helpful. 

John Brunswick
John Brunswick moderator

 @bysanibhanu Not a problem at all!

 

The adaptive approach will hold good for any markup rendered within a browser - which includes regular Task Flows.  If you are using components like pop ups, etc, you may need to tinker with the approach to get it to work as expected.

 

For the most part using adaptive design strategy will be most manageable when applied to coarse grained, large scale portions of the DOM, opposed to more complex areas.  This holds true ADF aside and is a generalization about adaptive styling with web markup.

 

The net of this - yes, it will work, but you will need to adjust via trial and error.  It helps to be well versed in CSS.

 

You may also want to see if you can connect with product management to gain insight into the roadmap for mobile, as perhaps what you are asking may be covered in a product release to natively support the above.

 

Hope that was more on target!

 

Cheers,

John