Skip to main content

Search

We are excited to announce the launch of updated product names, logos, and headers within our user interfaces as part of the CivicPlus® Solution Rebranding initiative. These changes mark the first step toward creating a cohesive and seamless user experience across all solutions in our portfolio. As part of this transition, users may notice minor design updates. While the functionality you rely on remains unchanged, we are in the process of updating screenshots and other resources on our Help Centers to reflect the new branding. We appreciate your patience and understanding as we work to complete these updates.

Responsive Web Design

  • Updated:

A responsive website responds to its environment and adapts to small, medium, and large screens. Responsive design allows a single version of a website to be optimized across many devices, including desktop, tablet, mobile, and more. Elements re-size and re-position to fit the screen size that the website is being accessed from, so the design and user experience are consistent every time.

 

Note: Users still have the control to affect the look and feel without damage to the responsive aspects.

  • Reasoning: This is important because it allows the site to have familiarity with devices. A user on a smartphone will see the same design elements, navigation, and functionality as a user on a PC. Because of this, simplicity in design and layout is very important. This helps ensure the best performance, no matter how the website is being viewed.

 

Maintain Site Responsiveness

  • Re-Size Appropriately: Adhere to size constraints provided by your designer on banners, slide shows, and spotlights
  • Follow Standards: Maintain set standards for assigned text and colors
  • Limit Global Navigation Items: Limit global navigation items to six
  • Use 5 or Fewer Graphic Buttons: Limit horizontal navigational graphic buttons to five
  • Use Widgets in Place of HTML: Do not use HTML to specify an item's absolute position in page creation
  • Set Percentages in Width: Use percentages (i.e. 100%, 50%, 25%) instead of set numbers if you want to add a table or item with an adjustable width
    • Note: This will allow your content to adjust with the screen size.

Comments

Let us know what was helpful or not helpful about the article.

0 comments

Please sign in to leave a comment.