Designing Responsive Elements

Responsive design is an essential aspect of developing modern websites and applications with Liferay. By adapting to different devices, you ensure consistent user experiences, boosting engagement and satisfaction. Implementing a responsive design also reduces maintenance overhead by eliminating the need to create separate websites for different solutions. With a single responsive website, you save time and resources and streamline your design workflow.

Furthermore, responsive design enhances product visibility. Search engines often prioritize mobile-friendly sites when serving search results. By designing responsive solutions, you can boost your search ranking and organic visibility.

For these reasons, responsive design is no longer optional; it's a core requirement for modern web development. Clarity recognizes this necessity and wants to position their solutions for success by prioritizing responsiveness. Here you’ll explore the key principles they can follow to achieve this goal.

Building Responsive Layouts

Liferay's default theme offers built-in responsive elements. This means widgets and many UI elements (e.g., navigation and product menus) automatically adjust to fit the user's screen size. When the screen width is low, Liferay combines columns to keep all page content fully legible.

In addition to this out-of-the-box behavior, Liferay provides features for both developers and designers to implement responsive layouts.

Developing Responsive Custom Elements

As explained in Module 3, Liferay client extensions enable the creation of custom HTML elements. These extensions are frontend web applications that you can integrate with Liferay and use as page elements. When building responsive elements, developers can leverage Bootstrap (a CSS framework) using a mobile-first strategy. Bootstrap provides a robust set of features for responsive design, including

• Grid system: Built with flexbox, this twelve-column grid is adaptable and fully configurable, so you can build layouts of all shapes an sizes.
• Media queries: With this CSS feature, you can apply different styles to a webpage based on device characteristics or user preferences.
• Display utilities: With these classes, you can configure element visibility and behavior across breakpoints.

Take advantage of Bootstrap utilities and best practices to ensure that your custom elements are responsive and mobile-friendly.

Using the Grid Fragment

As explored previously, page fragments are core to Liferay’s design toolkit and serve as modular building blocks for pages. The grid fragment is a native layout element that provides granular control over how your content appears. With built-in responsive design support, you can fully configure column widths, spacing, padding, and the number of modules in each row. This empowers designers without coding skills to use Bootstrap's robust layout capabilities.

Configuring Fragment Visibility and Rendering

Liferay's page builder UI enables you to toggle the visibility of page elements and customize their rendering for desktop, tablet, landscape phone, and portrait phone viewports. Combined with grids and other fragments, this enables viewport-specific experiences. For instance, you can display high-resolution images on desktops while serving optimized versions for mobile devices, or simplify navigation menus on tablets.

By controlling fragment visibility and rendering across viewports, you ensure users see content designed for their devices, enhancing their overall experience.

Simulating Screen Sizes

To further assist you with designing responsive solutions, Liferay’s site UI includes a simulation panel for previewing any page at different screen sizes.

This panel has five options:

1. Desktop (1050 x 1300 px)
2. Tablet (900 x 808 px)
3. Mobile (640 x 400 px)
4. Autosize (Adapts to window)
5. Custom (User-defined dimensions)

With this feature, you can verify how responsive your pages are by simulating different scenarios.

Optimizing Images

In Module 2, you learned about optimizing image resources with Liferay’s adaptive media feature. How your solution handles images can play a significant role in its overall responsiveness. Adaptive media automatically generates and serves different image sizes based on the end user’s device and screen resolution. By delivering optimized images, you enhance page loading speeds and improve user engagement without sacrificing visual quality.

Conclusion

Responsive design is one of the central organizing principles of modern web development. Liferay provides several features for making your solutions more responsive, from supporting Bootstrap’s mobile-first utilities for fragment development to enabling tailored experiences based on user devices and screen sizes. Clarity wants to make sure that their website meets the standards for responsive design.

Next, you’ll help Clarity customize their layouts and other elements to make them more responsive.