Responsive Portals: Responsive Portlet Design

July 31, 2016 by Igor Lozhkin
Arnica WebPortal integrates content from various sources (databases, Web APIs, HTML reports, XML files, other portals,  etc.)  and presents the result to end uses as a single webpage.  Content parts (portlets) are generated by Arnica WebPortal in HTML format and may be displayed in any web browser. To ensure compatibility with various contemporary devices ranging from wide screen desktop monitors to narrow mobile phones, portlet's HTML content  must be responsive - i.e. include media directives which instruct browser to display/hide various content parts based on the screen resolution, or modify presentation characteristics of content parts (such as font size, image size, etc.) based on screen resolution. 

With simple portlet template modification in Arnica WebPortal,  HTML content may be easily customized to be displayed differently in devices with different screen resolutions.

The first step is to generate a default portlet template:


The next step is to provide ID values to the HTML elements which should change their presentation when screen resolution changes (lines 15 and 31 in the screenshot below), and finally add CSS with media directives to specify how presentation style should be changed when screen resolution changes (lines 1...7). Note that element ID values may reference portlet identifier (oData.oPortlet.cPortletCode), which makes template compatible with multiple portlets sharing the same template on the same container page.