All layout snippets are designed to be mobile-friendly automatically - this means that each snippet responds to the size of it's containing element. By using snippets to contain certain types of webpage content, editors can ensure that their pages look great at any browser size.

Using Columns Layout Snippets


The 2 Column Layout and 3 Column Layout snippets allow editors to split the editable content region of their webpages from one large section into two- or three-column sections.

  • Each column will be an equal width with a small gutter in between. 
  • Editors can place any content type into each column box
  • Each column snippet functions as an invisible table with one row divided into two or three columns
  • At the mobile size, the columns will stack vertically with the left column on top, then middle, then right. 
  • If you want to do multiple rows, insert a new columns snippet where you want the next row to start
  • Since all of the snippets are mobile-friendly, no matter how to layout the desktop view, the mobile version will always stack vertically.

Using Content Collapsing Snippets


The Accordion and Tabs snippets allow editors to condense the amount of information that appears on the page at first load. These snippets are great for pages with a large amount of content that visitors need to skim in order to find the content relevant to the task they are performing on your website.

This is especially relevant for webpages that see a high amount of mobile traffic - webpages with a lot of content means a lot of scrolling. 

  • The Accordion snippet creates a list of text stacked vertically and when a visitor clicks on one of the text items, that item is expanded in a dropdown to show hidden content. You see this type of snippet used most often in FAQ webpages. This snippet is recommended for lists of all sizes. 
  • The Tabs snippet creates a horizontal list of text and when a visitor clicks on one of the text items, that item is expanded in a tab to show hidden content. This snippet is recommended only for collapsing four or fewer items. At the mobile size, tabs transform to look the same as the Accordion snippet.

Other items to consider when editing webpages with mobile visitors in mind


  • Regular tables are difficult to display at the mobile browser size due to their inability to stack vertically. It is recommended that tables only be used for the display of data, and that other layouts be used to display all other content types
  • Reduce the amount of text per page. The ideal word count on a webpage is 500-1500. 
  • Use bulleted lists to display a series of content that would normally be separated by commas in a paragraph. This makes it easier for visitors to skim.