Responsive Web Design

Prev Next

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 desktops, tablets, mobile, and more. Elements re-size and re-position to fit the size of the screen that the website is being accessed from, so the design and user experience are consistent every time.

Important Note:

With responsive web design, 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 desktop computer. 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.

  • Use 5 or Fewer Global Navigation: Limit global navigation items to five or fewer. Utilizing short titles on navigation items helps your website scalability.

  • Limit Graphic Button Topics to 6: Limit horizontal graphic buttons to six. The best practice for graphic buttons is to use an even number of topics with short titles.

  • 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 (for example, 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.