Responsive Website Content Guidelines

General Content

Prioritize content. Focus on the main content first! What is the most important information on the page? This should be the first content that draws the user’s attention.
Consider the hierarchy of the content in smaller viewports. Parallel content blocks on the desktop will be adjusted in size and stacked vertically on a mobile device. What is the order of the content that needs to displayed?
Avoid information clutter. Evaluate whether all the related content items are necessary and directly related to the main content.
Determine how much content should be displayed initially. Some information needs to be available without asking users to interact with it, while other content can be hidden until the user is ready to view the details. It is better to keep the content concise than having users scroll down past a lengthy text block.
Ensure that navigation labels are intuitive and clear. Try to keep the number of navigation menu items at a minimum, while making sure the labels clearly represent what each category is about. The general best practice is to have no more than eight (8) navigation menu items, for both the primary and secondary navigation. Any more than this can make navigation of a mobile website increasingly difficult.

Avoid embedding maps. Use links to open a map application instead. Displaying a map image and running the required script adds time and bandwidth usage to page performance. More importantly, it adds complexity in interacting with the interface. Since the map panning and page scrolling both use the same swiping interaction, it can be difficult to precisely touch the screen to execute the intended action on a device with a small screen.
Try and keep the image size to smaller than 100K. Avoid large or high-resolution images unless they are crucial to understanding the content. Large images delay the page load time and require more data to display. Resize images in your photo editing software before adding them to the WYSIWYG Editor at the correct size & resolution.
Don’t use images for decoration. Consider hiding images on mobile viewport if the content is not affected.
Don’t put text inside images. Users may not be able to read the content when the images are scaled down.
Avoid using pop-ups or modal windows. If necessary, ensure that the content inside these blocks are simple. Not all mobile devices support these functions.

Avoid assigning fixed widths to content. Content boxes need to be scalable to fit different display sizes, but fixed measurements display the content at the specified size no matter what a device screen size is.
When using tables, make sure you are using a % based width. This is controlled by right clicking on the table in the WYSIWYG Editor to bring up the table properties box. Fixed width tables (i.e. table style=”width: 500px;”) will break the layout.
Avoid using large tables if possible. If large tables must be used, provide a link to download a PDF version document.
Never copy and paste pre-formatted content directly from Word or similar programs. Paste into Notepad to strip the formatting before pasting into the WYSIWYG Editor. Inline style elements can overwrite the preceding CSS rules and break the screen display in smaller viewports.
Avoid creating complex layout in the workarea. Fancy layouts can cause the content to be out of its hierarchy in smaller viewports. Always content first!

The Association Online system includes hundreds of pages across many templates. IVT cannot guarantee that every page / template responds accordingly.
Not every section or page is suited to operate on small screen sizes, e.g. completing complex forms is just not practical on a smartphone. Site users should be encouraged to use normal desktop screens with regular keyboards for these tasks.