Editor Widget Tables on Mobile Devices

On mobile, there may be tables with shorter text or fewer columns, and tables with more text or more columns.

Important Notes

• CivicPlus works toward WCAG 2.0 AA accessibility standards and our websites are highly compliant when they go live. However, ongoing ADA compliance and maintenance is the customer's responsibility.

• The images in the examples below portray tables with text. Without being able to use the Editor Widget's specific Table tool on this help center, the tables were recreated to be as close as possible.

Short Tables

Shorter tables often contain less text or fewer columns. These tables will display on mobile devices similarly to how they display on computer screens.

Issues that might arise:

• Text and words are stacked, and words can be broken up to fit the screen. A table with text in one or two lines on a computer monitor could easily turn into 3 to 4 lines on a mobile device.

• Words that are split up are not divided based on any English best practices. These can include splitting words at a syllable or adding a dash (-) to indicate that the word has been broken.

• It is not entirely possible to decide which tables will stay in their monitor table form on a mobile device because it differs between devices, screen size, browser, and text size setting (controlled by the user.)

Long Tables

These tables are often altered and reoriented. The header row is applied to each column, and then the column is presented in a block.

Computer Screen Example

The following Computer Screen Example table reflects a table as it appears on a computer screen. On a mobile device, the table will reorient to resemble the Mobile Device Example.

Mobile Device Example

When viewed on a mobile device, a table should respond appropriately to fit the screen size and orientation. The column's header is copied to appear in front of each table data it applies to, and table data appearing in the same row is grouped in one of the table's cells.

The table reorientation resembles a bulleted list more than it does a table:

The table is still readable, but it might confuse someone when shorter tables stay in their desktop form on the screen, and longer tables require the person to scroll or change the layout on the same page.

This page looks clean and readable but long when viewed on the desktop browser. On a mobile device, however, two tables that convey similar information have been oriented and transferred very differently because of the amount of text they contain.

Issues With Long Tables

• Reorientation is confusing if it coexists with shorter tables that remain in their original form

• The reorientation does not add a space between the table header and the table data.

• There is no clear and consistent visual line separating the information, which is usually an advantage of a table.

Recommendations

• To avoid confusion, it is recommended that customers do not have multiple tables of varying lengths on a page. The problem is tables with a lot of text, so simple tables containing only a few words and numbers should be fine.

• Complex tables containing big blocks of text can be created in Word, marked with the correct code for screen readers, and then converted to PDFs so that their formatting stays consistent between all mobile and desktop devices and remains compliant for users with disabilities.

Mobile Responsive Code

To make tables in the Editor Widget more mobile responsive, you can add the following code before the opening table tag:

Add the Table's HTML code here.

Here's an example of how that looks in the editor widget code view:

Location   
Rita Reves Park60-foot and 90-foot baseball, 1 soccer/lax fieldGreetree ParkRecreation fieldMill Park2 baseball fields

=