DO

If you have a lot of text:

• Consider using a 2-7-3 layout, because a 2-10 can put too many words on a line making text difficult to read, particularly for people with certain vision problems or dyslexia.
• Avoid accordions as they will shove content off the screen defeating the purpose of accordions

Things that should go in sidebars:

• Blurbs
• Info Sidebars
• Media Blocks
• Buttons
• Testimonials

NOTE: Overuse of any widget (or button) is not recommended. Mix ‘em up!

Good things to do in general:

• Remember, the main reason we are going the responsive route is so content presents well on all devices. That means how your content is written and organized is more important than how it is lays out in desktop views
• Get to know and utilize the widgets. For almost anything you need to do, there is widget that exists to do it in accordance with our responsive design (especially true of Faculty/Staff profiles)
• Headings (H tags in the WYSISYG editor) are your friend. Graphic headers that contain text will not work in our new responsive design. What is more, the text they contain cannot be read by screen-readers for blind users or search crawls like Google.
• Media blocks are your friend, they allow you to introduce content, include a related image, and guide users to “Read More” on another page
• Anticipate questions and answer them throughout your site, not lumped together in a F.A.Q. section
• Recall that the analogy for today’s best websites is “telephone, not filing cabinet.” Devise a content life cycle in which there is a plan for the ongoing creation, promotion, maintenance, and retirement of your content

DON’T

Things that should not go in sidebars:

• Tabs and accordions
• videos
• tables
• photo galleries
• large images
• iframes

The following are bad for responsive design, mobile, and accessibility:

• Laying out content that is not tabular data in tables
• putting tabs and accordions in the sidebars
• using images for headers
• More than one sidebar menu
• Extremely long menus

Things that should not go in the main body column (they were not designed to accommodate wide columns or lots of text):

• Blurb widgets
• Info-sidebar widgets

Things in general to avoid:

• Flash anything (links from YouTube or Vimeo are fine because they have HTML5 video backups for when Flash is not supported)
• iframes when they are not truly needed
• Fake buttons/image-links when not truly necessary (they break a consistent user experience, branding, and can introduce problems in responsive design, accessibility, and potentially could be a security issue (if the images are hot-linked [linked from another site outside of the university’s], for instance)
• The use of accordions and tabs when not truly necessary. For instance, you should never have just one or two accordions on a page.

WATCH OUT FOR:

Links, buttons, and images:

• Make sure your links work
• If links will directly open an application or download a file make sure that you let your audience know that that is what will be happening.
• All images that are integral to your content should have ALT tags and, while not as important, try to add a TITLE as well.
• Fake Buttons (image-links) definitely need ALT tags otherwise there is nothing to signal that they are a link for people who require screen readers or cannot access the web visually. These also require the WAI-ARIA attribute role=”button”.

Remember:

• Accordions are for content that is related and identical in structure: a list of questions (F.A.Q.), course information, yearly statistics, etc.
• Tabs are for content that is related but not structured identically: services that are offered, different programs within a school or department,  or in depth details on a school or particular place (ex. history, geography, flora and fauna, customs)