{
    "version" : "https://jsonfeed.org/version/1",
    "content" : "news",
    "type" : "single",
    "title" : "Trends on Tuesday: 8 Ways To Format Tables for Responsive Web Design |Digital.gov",
    "description": "Trends on Tuesday: 8 Ways To Format Tables for Responsive Web Design",
    "home_page_url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/","feed_url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/2014/10/28/trends-on-tuesday-8-ways-to-format-tables-for-responsive-web-design/index.json","item" : [
    {"title" :"Trends on Tuesday: 8 Ways To Format Tables for Responsive Web Design","summary" : "Making tables, charts and graphs mobile friendly is like squeezing 10 pounds of sugar into a 5 pound bag. Mobile Gov Community of Practice member Debra Fiorrito from the Defense Accounting and Financing Service recently highlighted this challenge in her responsive Web design implementation. The challenge also came up during a call with the Federal","date" : "2014-10-28T10:00:27-04:00","date_modified" : "2025-01-27T19:42:55-05:00","authors" : {"david-fern" : "David Fern","clair-koroma" : "Clair Koroma","beth-martin" : "Beth Martin"},"topics" : {
        
            "design" : "Design"
            },"branch" : "bc-archive-content-3",
      "filename" :"2014-10-28-trends-on-tuesday-8-ways-to-format-tables-for-responsive-web-design.md",
      
      "filepath" :"news/2014/10/2014-10-28-trends-on-tuesday-8-ways-to-format-tables-for-responsive-web-design.md",
      "filepathURL" :"https://github.com/GSA/digitalgov.gov/blob/bc-archive-content-3/content/news/2014/10/2014-10-28-trends-on-tuesday-8-ways-to-format-tables-for-responsive-web-design.md",
      "editpathURL" :"https://github.com/GSA/digitalgov.gov/edit/bc-archive-content-3/content/news/2014/10/2014-10-28-trends-on-tuesday-8-ways-to-format-tables-for-responsive-web-design.md","slug" : "trends-on-tuesday-8-ways-to-format-tables-for-responsive-web-design","url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/2014/10/28/trends-on-tuesday-8-ways-to-format-tables-for-responsive-web-design/","content" :"\u003cp\u003eMaking tables, charts and graphs mobile friendly is like squeezing 10 pounds of sugar into a 5 pound bag. Mobile Gov Community of Practice member Debra Fiorrito from the Defense Accounting and Financing Service recently highlighted this challenge in her responsive \u003ca href=\"/preview/gsa/digitalgov.gov/bc-archive-content-3/2014/10/21/responsive-web-design-challenges-webinar-recap/\" title=\"Responsive Web Design Challenges Webinar Recap\"\u003eWeb design implementation\u003c/a\u003e. The challenge also came up during a call with the Federal Mobile Crowdsource Testing Program when discussing \u003ca href=\"/preview/gsa/digitalgov.gov/bc-archive-content-3/2014/08/13/photo-carousels-on-mobile-websites-use-with-caution/\" title=\"Photo Carousels on Mobile Websites: Use With Caution!\"\u003ephoto carousels\u003c/a\u003e. David Fern, from the Social Security Administration (SSA), Clair Koroma, from the Department of Health and Human Services (HHS), and Beth Martin, from the Federal Aviation Administration (FAA), researched the topic to see what current approaches there are and found eight ways organizations are making charts and graphs mobile friendly.\u003c/p\u003e\n\u003ch2 id=\"what8217s-the-issue\"\u003eWhat’s the Issue?\u003c/h2\u003e\n\u003cp\u003eA table or chart is like a picture, worth 1,000 words. It packs a lot of information into a single artifact that may not be communicated clearly using words.\u003c/p\u003e\n\u003cp\u003eWe regularly access charts and tables on our desktop computer to glean valuable information from a pile of data. But, how can you display a full-size, desktop sized chart on a 4″ smart phone screen, and make it remain useful?\u003c/p\u003e\n\u003cdiv class=\"image\"\u003e\n  \u003cimg\n    src=\"https://s3.amazonaws.com/digitalgov/_legacy-img/2014/10/570-x-665-doublesuck.jpg\"\n    alt=\"Two smartphones displaying a table, one with just a few cells visible, the other has an entire table but too small to read on a phone. Above both is a line of black text that reads, Both Equally Suck.\"/\u003e\u003c/div\u003e\n\n\n\u003cp\u003eWithout properly leveraging responsive design techniques and principles, the user of a small device, like a smart phone, has two choices:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eView the entire table that has been reduced to the size of a credit card, which would require the use of a microscope; or\u003c/li\u003e\n\u003cli\u003eNavigate through the table by viewing a small portion at a time.\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eNeither solution is optimal and will make even the most determined reader leave the site empty handed.\u003c/p\u003e\n\u003ch2 id=\"possible-solutions\"\u003ePossible Solutions\u003c/h2\u003e\n\u003cp\u003eWhile there are many great choices, none of them offer a universal solution. Your table size, format and information will determine the solution that works best for you. In some cases, there will be no great solution for displaying a large amount of information that is formatted in a table on a 4″ screen. Finally, we asked a few developers in the Mobile Gov Community of Practice and they said many approaches are tough to implement so be sure to consult with the developers on your team.\u003c/p\u003e\n\u003cp\u003eThat being said, if using a table is a necessity, we found Chris Coyier, an industry CSS expert, offers some excellent solutions for displaying tables on a smart phone in his article, \u003ca href=\"http://css-tricks.com/responsive-data-table-roundup/\"\u003eResponsive Data Table Roundup\u003c/a\u003e.\u003c/p\u003e\n\u003cp\u003eHere are a few of the options he offers:\u003c/p\u003e\n\u003ch3 id=\"1-freeze-the-first-column-or-row-and-let-the-user-scroll\"\u003e1. Freeze the first column or row and let the user scroll\u003c/h3\u003e\n\u003cp\u003eWe freeze rows of columns all the time in Excel sheets so that we can keep track of our place in the table as we scroll up or down.\u003c/p\u003e\n\u003ch3 id=\"2-make-each-row-its-own-table\"\u003e2. Make each row its own table\u003c/h3\u003e\n\u003cdiv class=\"image\"\u003e\n  \u003cimg\n    src=\"https://s3.amazonaws.com/digitalgov/_legacy-img/2014/10/600-x-300-orig.jpg\"\n    alt=\"Regular table view in background with an overlay showing one row of the table as its own table.\"/\u003e\u003c/div\u003e\n\n\n\u003cp\u003eOn smaller screens the formatting can be changed so that all information on a single value can be displayed together instead of spread across a row in the chart.\u003c/p\u003e\n\u003ch3 id=\"3-convert-the-table-to-a-chart\"\u003e3. Convert the table to a chart\u003c/h3\u003e\n\u003cp\u003eOn smaller screens a chart of percentage values could be converted to a pie chart for easy interpretation.\u003c/p\u003e\n\u003cdiv class=\"image\"\u003e\n  \u003cimg\n    src=\"https://s3.amazonaws.com/digitalgov/_legacy-img/2014/10/600-x-369-responsivetabletochart.jpg\"\n    alt=\"Table in background with a pie chart overlay\"/\u003e\u003c/div\u003e\n\n\n\u003ch3 id=\"4-hide-the-table\"\u003e4. Hide the Table\u003c/h3\u003e\n\u003cp\u003eThe table could be hidden by default on the page, but easily accessible by tapping to open for smaller screens. This is best when the table or chart is not the only content on the page.\u003c/p\u003e\n\u003ch3 id=\"5-hide-the-least-important-columns\"\u003e5. Hide the Least Important Columns\u003c/h3\u003e\n\u003cdiv class=\"image\"\u003e\n  \u003cimg\n    src=\"https://s3.amazonaws.com/digitalgov/_legacy-img/2014/10/600-x-438-stu.jpg\"\n    alt=\"Regular table in background with smartphone in foreground showing table with fewer columns.\"/\u003e\u003c/div\u003e\n\n\n\u003cp\u003eIn Excel we regularly hide rows that we do not want others to see or deem less important.\u003c/p\u003e\n\u003ch3 id=\"6-select-only-the-columns-they-want-to-see\"\u003e6. Select only the columns they want to see\u003c/h3\u003e\n\u003cp\u003eThe user can be prompted to select the rows or columns they want to see displayed.\u003c/p\u003e\n\u003ch3 id=\"7-switch-the-table-from-portrait-to-landscape\"\u003e7. Switch the Table from portrait to landscape\u003c/h3\u003e\n\u003cp\u003eGenerally users use their phone in portrait mode, however, once a user opens a table it may be best displayed by opening it in landscape mode by default.\u003c/p\u003e\n\u003ch3 id=\"8-remove-the-table-structure\"\u003e8. Remove the table structure\u003c/h3\u003e\n\u003cp\u003eOften times we convert excel files to Comma Separated Values (CSV) files, this just removes all the formatting and blank spaces that were in the Excel sheet, leaving you with rows of data.\u003c/p\u003e\n\u003cp\u003eYou can find more about these approaches in the resources below.\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"http://css-tricks.com/responsive-data-table-roundup\"\u003eResponsive Design Table Roundup\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"http://css-tricks.com/responsive-data-tables/\"\u003eResponsive Data Tables\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"http://www.informed-design.com/responsive/\"\u003eResponsive Data Grid\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"http://zurb.com/playground/responsive-tables\"\u003eResponsive Tables\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"http://ux.stackexchange.com/questions/15463/how-should-large-table-columns-be-handled-on-a-responsive-design\"\u003eUX User experience – How Should Large Table Columns be Handled on a Responsive Design?\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"http://filamentgroup.com/lab/responsive-design-approach-for-complex-multicolumn-data-tables.html\"\u003eA Responsive Design Approach for Complex, Multi-Column Data Tables\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e\u003cem\u003e\u003cstrong\u003eDavid Fern\u003c/strong\u003e is an IT Specialist and Technical Leader at the Social Security Administration’s Division of Quality, Testing and Validation. \u003cstrong\u003eClair Koroma\u003c/strong\u003e is a Public Affairs Specialist in the Digital Communications Division of the Department of Health and Human Services. \u003cstrong\u003eBeth Martin\u003c/strong\u003e is a Usability Specialist at the Federal Aviation Administration.\u003c/em\u003e\u003c/p\u003e\n"}
  ]
}