WiscWeb CMS - Responsive Template (rst) - Best Practices
This document goes through several best practices for responsive websites.
There is a separate document on using images in responsive templates. See WiscWeb CMS - Responsive Template (rst) - Best Practices Using Images
Accordions and Tabs
Accordions and Tabs can be useful tools for organizing content on desktop web browsers, but they can cause issues on mobile browsers. We have a few recommendations for using them.
- Don't put Accordions in Tabs or Tabs in Accordions.. While we allow you to do this, there are a variety of reasons, responsive and more, why this is a bad idea. Pages with Accordions and Tabs embedded within each other are very difficult to use on mobile browsers.
- Use Accordions over Tabs. Accordions display much better on mobile browsers and should be used over tabs except in very specific circumstances.
Large, Medium, Small Screen Settings
These settings are available in every content class and greatly increase your flexibility on your site. By turning what is seen by your visitors on or off depending on their platform, you can customize their experience on their platform.
For example, if you really like Tabs, you can use them on Large and Medium screens, and then turn them off on Small screens, instead replacing them with Accordions or Text Areas with the same information that is more easily consumed on a smaller browser. With these same features, you can have large images display on Large screens, but not on Small, which would save load times over 4G or slower networks.
Footers play an important role on responsive sites, as they are the last stop for mobile users as they scroll down your page. If they make it to the bottom of your site and haven't found what they are looking for, then having some repetitive and extra information in the footer can be very valuable, as opposed to a traditional footer which may just have a link to contact the webmaster.
Information you may want to include in your footer:
- Top navigation items
- Contact information
- Links to social media
- Links to your pages that receive the most traffic
For information on how to edit your footer, see WiscWebCMS - Responsive Template (rst) - Adding and Using a Footer