[toc]
Telligent Community Server 9.0 implements responsive design as part of the Social theme. Telligent 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.
Benefits of responsive design in Community Server
- Accessibility. All user desktop functionality is exposed from mobile devices.
- Portability. All user features available in release 9.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.
Community Server adjusts content, images, and tables to the device
Page layouts adjust according to layout priority and device width
Page layouts reflow from a full, 3-column-wide desktop layout to mobile device screen width (such as 2 columns or 1 column wide) based upon widget layout 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 Community Server provides in release 9.0 -
- Always shown, Priority 1 in single column mode - Widget is always shown; will precede priority 2 and 3 widgets on mobile devices or in single column formats.
- Always shown, Priority 2 in single column mode - Widget is always shown; will come after priority 1 widgets, but before priority 3 widgets on mobile devices or in single column formats.
- Always shown, Priority 3 in single column mode - Widget is always shown; will come after priority 1 and 2 widgets on mobile devices or in single column formats.
- Only shown in single column mode - Widget will only be displayed on mobile devices or in single column formats, and sticks to where it is placed. It could displace priority 1, 2, or 3 widgets.
- Hidden in single column mode - Widget is not displayed on mobile devices or in single column formats.
- Featured Content Slider widget responsive options
Community Server adds those priority formats to previously existing formatting options -
- Images and media adjust to full screen size
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.
Fixed-size image on desktop page
Fixed-size image on mobile page
Tables and pre-formatted content are scrolled
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 become option sheets
Pop-up menus convert to option sheets on handheld devices.
"More" menu shown on desktop screen and mobile-sized screen
Fonts
Font sizes and spacing adjust based on screen size.