To create a responsive site, it is important to configure some important options. These options ensure that the site works properly:

The portal skin does not have a fixed width. If the skin uses a fixed width, like the classic skin, it will not adapt to the browser size. The 'Responsive Skin' included in JBoss Portal uses a fluid width and adapts to the portal. This skin also includes updated css to various portal components responsive. It is recommended to use this skin or to base a custom skin off of the 'Responsive Skin'.

The viewport settings specify how the site is loaded in a mobile browser. It specifies things like the site's width,height, initial zoom level, and what zoom levels are permitted. By not specifying the viewport, the site may be rendered at a fixed width instead of adapting to the screen size. The default value used in the 'Mobile' site is 'initial-scale=1.0' which specifies that the page is rendered to its screen size while still allowing the user to zoom into the page if needed.

The viewport is specified as the portal property 'Viewport Content', the value specified here will set the viewport meta tag for the site.

To pre-populate your site with the same layout and portlets that are available on the mobile site, can be accomplished by using the 'mobile portal template' when you create the portal.

To create a responsive site, your site has to use responsive portlets. This includes using the responsive portlets which are included with JBoss Portal and ensuring that any custom or third party portlets are also responsive and will work with a variable width layout.

The containers which work with responsive portlets are the row layouts. This allows one portlet per line and the portlet can easily adapt to the width of the browser.

The biggest change to having responsive portlets is that the site is no longer set at a fixed width. The width of the page will adapt to the size of the screen used to display the page. As such portlets which have been designed to fill a specific fixed space may not render correctly when the screen width differs from what it expects. This includes things like overflowing content, contents being clipped, content flowing into a new line, etc.

Responsive portlets must be written in a more fluid manner where the layout changes based on the width of the page. This is done in the same manner as creating any normal responsive html page, by mostly using CSS3 media queries. There is nothing inherently different about this approach with portlets and there are no special apis or other data which must be gathered from the portal itself.

As already mentioned in the limitation section and creating a responsive site section, the site should be done in a row layout. With each portlet stacked one on top of another and taking up more or less the actual width of the page, it makes it easier to configure the portlet's css to be responsive.

It is up to the admin and portlet developer to make sure that the portlets are responsive and are rendered correctly when the screen size changes. It is possible to set the width of the container holding the portlet to a specific width, but this will overflow outside of the normal page size if the browsers width is narrowed beyond this.

To mobile site can also be manually removed by deleting the mobile site and removing the classic site's mobile redirect configuration.

The mobile site is packaged as a portal extension. All the portlets and portal configuration are contained within this extension and it is this extension which creates the mobile site and configures the redirection service for this site. If you do not wish to have the mobile site, the extension can be removed before starting the server.

The extension to remove is located at :

jboss/gatein/extensions/gatein-mobile-integration.ear