Table of Contents
- Benefits of responsive design in Zimbra Community
- Zimbra Community adjusts content, images, and tables to the device
Zimbra Community 8.0 implements responsive design as part of the new Social theme. Zimbra enacts this design based on:
- Stylesheets tied to media queries;
- Alternate styling and behavior for some widgets based on media queries (for example, banners);
- Automatic wrapping and/or collapsing for common controls (such as lists of links);
- High dpi rendering if the device supports it (Retina);
- Media being scaled to consume as much space as it can;
- Support of touch gestures.
- Accessibility. All user desktop functionality is exposed from mobile devices.
- Portability. All user features available in release 8.0 are available on a desktop or mobile device, making the experience feel seamless between devices.
- Usability. User interface elements and functionality respond to device form factor by providing appropriately sized elements and providing functionality in intelligent ways.
- Customizability. Customizations are defined once and apply to all devices.
Page layouts reflow from a full, 3 column-wide desktop layout to mobile device screen width (such as 2 or 1 column wide) based upon widget layout ("wrapper") priority:
- All pages have header and footer sections; however, neither necessarily has to contain any widgets.
- In a desktop layout, widget display is based upon layout placement.
- Widgets at the highest priority level (e.g., responsive 1) will appear in order down to the lowest priority (e.g., responsive - hidden) - adjusted for the column width of the device.
- It might be necessary to experiment to create a layout that works well on the desktop site as well as in a mobile format.
When entering Edit Page mode, widgets can be prioritized using 4 widget formatting, or "wrapping," options that Zimbra Community provides in release 8 -
- Responsive 1 - Makes widget first priority in responsive display
- Responsive 2 - Makes widget second priority in responsive display
- Responsive 3 - Makes widget third priority in responsive display
- Responsive Hidden - Hides widget in mobile device responsive display
Zimbra Community adds these priority formats to previously existing formatting options -
- No border with no spacing - No border or additional spacing around the widget and displays no header or title.
- No border with spacing - No border, header, or title, but applies the regular or configured widget spacing.
- Top border - Border along the top of the widget.
- Top border and header - Border along the top of the widget and includes the widget's header or title.
So that, together, the layout and priority create 20 responsive design options, such as "No border with no spacing Responsive 1" shown above for the Featured Content Slider widget.
Images and media are automatically resized according to the device format they're presented on.
Whether an image is assigned a static size or is variable in size, it is resized on mobile devices to fit the device screen. As you can see in the following illustrations, the "Fixed-size image post in wiki article" illustration fits both the desktop and mobile site layouts.
Tables and other preformatted content automatically become scrollable on screens that cannot view the entire content at once. For example, a table in a wiki article will remain full size and become scrollable on a mobile device. In the following example, you can use touch gestures on the mobile device to reposition the table and view its contents.
Pop-up menus convert to option sheets on handheld devices.
Font sizes and spacing adjust based on screen size.