Table of Contents
Zimbra Community 8.0's new Social theme invokes our goals with this release:
- Modern, uncluttered appearance
- Constant access to search and personal icons
- Menus hidden when unneeded
- Uniform experience across platforms
- Contextually sensitive action buttons
- Understand what options the user needs in the context
- Assistive search that includes current context
- Search finds results as you type
- Technical advances
Social has a simpler layout than previous themes did, using a three-column central block and one-column side rail layout that is conducive to rearrangement between viewing devices (such as viewing the theme on the mobile app).
The flatter, easier to render design elements include a general absence of clutter as well as:
- One action per page
- Easy-to-read fonts
- Solid colors
- Simple block buttons
The theme header (including search) is constantly visible on a page, including when a user scrolls down the page.
Slide-out menus that stay hidden unless they are expressly selected. Extra menu items are layered under a New menu or a More menu. The options appear when clicking the menus.
This design concept helps to create a uniform experience, regardless of form-factor. Please see Responsive design for comparative views.
In the Social theme, in each use context - on the site home page, a group home page, inside a group, on an application home page, on a post page, or profile - the options adjust to the current context. For example, the following screen captures display the More menu options available on the site and group home pages:
This theme is designed to keep a static header, which includes the search box, visible from any scrolled location on a page. Release 8.0 adds clickable filters in the search results box that change depending upon context. For example:
- On the site home page, search defaults to searching content (that is all content), groups, and people.
- On a group home page, search filters results by the current group context, anywhere, content, and groups.
This theme makes use of many modern approaches to responsive design and adds improved platform support for implementing and customizing themes against multiple device sizes with a single implementation:
- CSS3. The theme makes extensive use of CSS3 to provide visual effects that enhance the user experience and ease customization. There are no images defined by the theme.
- Icon fonts. The Entypo font is used to provide all iconography within the theme. This both ensures that all devices get a high resolution version of each icon (including high DPI devices), but also makes recoloring/resizing existing iconography easier.
- Web fonts. Various web fonts are used to improve the readability of content within the new theme.
- LESS-based stylesheets. All CSS within the theme makes use of the LESS superset of cascading stylesheets. LESS enables the definition of variables that are used throughout the stylesheets to control color, spacing, and iconography. LESS also provides easier nesting of rules, decreasing the total bulk of the source stylesheets and simplifying customization. All LESS syntax is resolved to standard CSS on the server side, preventing the need to process LESS adjustments to CSS on clients' browsers.
- REST batching. Zimbra Community 8 includes support for batching REST requests. Widgets within the theme make use of this API to provide a faster user experience, especially when performing bulk actions.
- New REST APIs. The theme makes use of new APIs to improve the responsiveness of the UI, including Ajax-based resizing of media and physical image resizing.
- Starter Kits. Starter kits exist on the default site and group home pages and enable administrators to provide details about their community/group, enabling the widget to set meaningful configuration options within the site and theme as a starting point for future customization.