Technical Assistance & Support


CivicEngage
®

Responsive Web Design

Understand What It Means to Be Responsive

A responsive website responds to its environment and is adaptable to small, medium, and large screens. Responsive design allows a single version of a website to be optimized across devices: desktop, tablet, mobile, and more. Elements are re-sized and re-positioned to fit the size of the screen that the website is being accessed from, so the design and user experience is consistent every time. Note: Users still have the control to affect the look and feel without damaging the responsive aspects.

  • Reasoning: This is important because it allows the site to have familiarity across devices. A user on a smart phone 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 Your Website's Responsiveness

  • Re-Size Appropriately: Adhere to size constraints provided by designer on banners, slide shows, and spotlights.
  • Follow Standards: Maintain set standards for text and colors assigned.
  • Limit Global Navigation Items: Limit global navigation items to 6.
  • Use 5 or Fewer Graphic Buttons: Limit horizontal navigational graphic buttons to 5.
  • Use Widgets in Place of HTML: When creating pages, do not use HTML to specify an item's absolute position.
  • Set Percentages in Width: Whenever you are adding a table or something where you can set the width, always use percentages (i.e. 100%, 50%, 25%) instead of set numbers. This will allow your content to adjust with the screen size.
?



I'd Like to Request an Enhancement

0 out of 0 found this helpful

Updated:
Follow