Verint | Telligent Community
Verint | Telligent Community
  • Site
  • User
  • Site
  • Search
  • User
Telligent Community 9.x
  • Verint Community
Telligent Community 9.x
User Documentation Responsive design
  • Ask the Community
  • User Documentation
  • API Documentation
  • Manager Training
  • Developer Training
  • Tags
  • More
  • Cancel
  • New
  • Telligent Community 9.0
  • -All platform topics
    • +9.0 Release notes
    • +Achievements
    • +Activity Story Stream
    • +Authentication
    • +Blogs
    • Calendar
    • +Chat
    • +Content tools
    • Document Preview
    • +Email
    • +Errors & logs
    • Featured content
    • +Forums
    • +Friends
    • +Groups
    • Hashtags
    • +Ideas
    • +Install or Upgrade Telligent Community
    • +Job Service
    • +License
    • Likes
    • +Localization
    • +Media galleries
    • +Members
    • Mentions
    • +Mobile
    • +Moderation, spam and abuse
    • +Notifications & messages
    • +Page Editing
    • +Permissions
    • +Profile & sign-in
    • Quick Post
    • Ratings
    • Responsive design
    • +Roles
    • Rule Automation
    • +Scores
    • +Search
    • +Security
    • +SEO
    • +Site admin
    • +Site configuration
    • Social basics guide
    • Social Twitter feed
    • +Status messages
    • Tags
    • +Telligent Community Troubleshooting Guide
    • +Themes
    • Tour Tips
    • +Tuning & performance
    • +User accounts
    • Video Transcoding
    • +Widgets
    • +Wikis
  • Customization
  • Development
  • Getting started
  • Install/Upgrade and Configure

Responsive design

[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

responsive design format 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
desktop full-sized image

Fixed-size image on mobile page
fixed size image on mobile

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. 

comparison of table sizes

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
options list in post

Fonts

Font sizes and spacing adjust based on screen size.

  • Share
  • History
  • More
  • Cancel
Related
Recommended
  • Telligent
  • Professional Services
  • Submit a Support Ticket
  • Become a Partner
  • Request a Demo
  • Contact Us

About
Privacy Policy
Terms of use
Copyright 2022 Verint, Inc.
Powered by Verint Community