Tile boxes and accordions
Tiles
Tiles boxes can help show organizational hierarchy. Pages displayed without hierarchal organization can overwhelm users, thus adding tiles will allow for a dominant category for users to quickly determine levels of information. Tiles typically display subpages/categories, with relevant images, text and action calls.
I. Single tile
A tile is created using [tile] [/tile] with contents written inside. The code template includes an image, title, description blurb, and button in each tile, as visualized in Figure 1.
Although a single tile is used as an example here, it is not commonly used, as it is too limited for the standard use (tile in Figure 20 is too large and a bit overwhelming visually). However, we included the example, considering it as a great stepping stone to understanding the use of multiple tiles. For best practice, using multiple tiles is recommended.
Figure 1. A single tile is used as seen above. The [box] [/box] code creates outer grouping which is “Research” here and the [tile] [/tile]ncode creates the inner group which is “Transfer” here.
Code Template
<h2>Title for the tile</h2> [box] [tile] <div><img src="Image source/location" alt="Description text of what the image is (for accessibility)"/></div> <h3><a href="URL of desired page linked to tile name"/>Tile name</a></h3> Description text; A blurb that gives context to the Tile name. <br> Note: this allows users to skip a line of text (whitespace) [button url="Link of desired page when button is clicked"]Button label [/button] [/tile] [/box]
Example
<h2>Research</h2> [box] [tile]<div><img src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/up loads/sites/158/2018/07/17182615/Univ-of-Washington_Forest-Resources-class .jpg" alt="ESRM 351 Wildlife Research Techniques, field trip to Teanaway River"/></div> <h3><a href="https://www.washington.edu/ccri/transfer/"/>Transfer</a></h3> Using an equity lens to guide their work, the CCRI research group is conducting a series of studies funded by the Bill & Melinda Gates Foundation to understand transfer policies and practices relative to student experiences, perceptions, and outcomes <br> [button url="https://www.washington.edu/ccri/transfer/"]Learn more[/button][/tile] [/box]
II. Multiple tiles
Adding multiple tiles is very similar to adding a single tile. Within the [box] [/box] code, add sets of [tile] [/tile] code for each tile to be grouped. As mentioned previously, [box] [/box] represents a horizontal row of tiles, and each set of [tile] [/tile] creates a column within the row. Figure 2 is an example site homepage where three subpage tiles (Transfer, New Baccalaureates, STEM) are added to a row under a Research a heading.
Figure 2. Multiple tiles are used for quick categorization, as seen above. The [box] [/box] alots a horizontal row (“Research”) and [tile] [/tile] creates vertical tiles within rows (E.g.“Transfer”, “New Baccalaureates”, and “STEM”).
Code Template
<h2>Title for the tiles</h2> [box] [tile] <div><a href="URL of desired page linked to image"><img src="Image source/ location" alt="Image description (for accessibility)"/></a></div> <h3><a href="URL of desired page linked to tile name"/>Tile name</a></h3> Description text; A blurb that gives context to the Tile name. <br> Note: this allows users to skip a line of text (whitespace) [button url="Link of desired page when button is clicked" ]Button label[/button] [/tile] [tile] <div><a href="URL of desired page linked to image"><img src="Image source/ location" alt="Image description (for accessibility)"/></a></div> <h3><a href="URL of desired page linked to tile name"/>Tile name</a></h3> Description text; A blurb that gives context to the Tile name. <br> [button url="Link of desired page when button is clicked"]Button label [/button] [/tile] [tile] <div><a href="URL of desired page linked to image"><img src="Image source/ location" alt="Image description (for accessibility)"/></a></div> <h3><a href="URL of desired page linked to tile name"/>Tile name</a></h3> Description text; A blurb that gives context to the Tile name. <br> [button url="Link of desired page when button is clicked"]Button label [/button] [/tile] [/box]
Example
<h2>Research</h2> [box] [tile]<div><a href="https://www.washington.edu/ccri/transfer/"><img src="https:// s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/158/2018/08/21 225009/Campus_102015-2385.jpg" alt="Students studying at a library"/></a> </div> <h3><a href="https://www.washington.edu/ccri/transfer/"/>Transfer</a></h3> Transfer is one of the most important but understudied phenomenon in U.S. higher education. CCRI uses an equity lens to conduct a series of studies on transfer policies and practices. <br> Note: this allows users to skip a line of text (whitespace) [button url="www.washington.edu/ccri/transfer/"]Learn more[/button][/tile] [tile]<div><a href="https://www.washington.edu/ccri/new-baccalaureates/"><img src= "https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/158/2 018/08/21225940/Commencement2013_104.jpg" alt="Student at the University of Washington 's 138th Commencement smiling with cap on."/></a></div> <h3><a href="https://www.washington.edu/ccri/new-baccalaureates/"/>New Bacclaureates</a></h3> New forms of applied baccalaureate degrees are emerging and increasingly are conferred by community colleges. Many of these degrees focus on developing occupations associated with STEM and career-technical education. <br> [button url="www.washington.edu/ccri/new-baccalaureates/"]Learn more[/button][/tile] [tile]<div><a href="https://www.washington.edu/ccri/research/stem/"><img src="HTTP s://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/158/2018/0 8/21230844/MEB_1559.jpg" alt="Student working with a mechanical engineering laser"/></a></div> <h3><a href="https://www.washington.edu/ccri/research/stem/"/>STEM</a></h3> Science, technology, engineering and mathematics (STEM) education is important for our country’s future as it provides jobs and solutions to major problems. CCRI conducts research and evaluation on STEM education. <br> [button url="www.washington.edu/ccri/research/stem/"]Learn more[/button][/tile] [/box]
III. Images within tiles
Images are a great way to add visual appeal and balance to a page, especially those overwhelmed with heavy text. For each [tile] [/tile], add in the code tag for images using <a><img/>. In order to have the image fill into the entire width of the tiles, as shown in Figure 3, add the image source into the <div></div> code tag.
Figure 3. The image above was inserted into the tile by using the <div></div> tag (to fill the image into the full width of the tile) as well as an <a><img/> tag (the code to add in images).
Code Template
[box] [tile] <div> <a href="URL of desired page linked to image"><img src="Image source/ location" alt="Image description (for accessibility)"/></a> <⁄div> <h3><a href="URL of desired page linked to tile name"/>Tile name</a></h3> Description text; A blurb that gives context to the Tile name. <br> Note: this allows users to skip a line of text (whitespace) [button url="Link of desired page when button is clicked"]Button label [/button] [/tile] [/box]
Example
[box] [tile] <div> <a href="https://www.washington.edu/ccri/transfer/"><img src="https://s3- us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/158/2018/08/21 225009/Campus_102015-2385.jpg" alt="Students studying at a library"/></a> <⁄div> <h3><a href="https://www.washington.edu/ccri/transfer/"/>Transfer</a></h3> Transfer is one of the most important but understudied phenomenon in U.S. higher education. CCRI uses an equity lens to conduct a series of studies on transfer policies and practices. <br> [button url="www.washington.edu/ccri/transfer/"]Learn more[/button] [/tile] [/box]
Accordion (Dropdown)
Using an accordion is another way to chunk content into categories. They allow for easier navigation and let users pick how much content on a page they want to appear at once. For example, this page uses accordions to group content together and make it easier for you to find the content you need.
I. Basic accordion guide
A brief overview of basic accordion codes will be discussed first. To create the accordion space, use the [accordion] [/accordion] code. To add in the different sections in an accordion, use a set of [section] [/section] code per category. Name each section by adding title='section name in accordion', followed by text content.
Code Template
[accordion] [section title='section name in accordion'] Content inside of accordion goes here, text [/section] [/accordion]
Example
[accordion] [section title='Career Pathways and Program Redesign'] Sinclair Community College in Dayton, Ohio, is the lead of a three-state consortium with Austin Community College and Broward College, that adopted and adapted the Western Governors University competency-based education (CBE) model to accelerate information technology instruction. [/section] [/accordion]
II. Accordions with multiple sections
Various sections can be added into an accordion, often organized based on similar content. Figure 4 is an accordion taken from CCRI’s Strategy briefs page under Transformative Change Initiative. For each section, a title and relevant content can be added.
Figure 24. Accordion with multiple sections.
Code Template
[accordion] [section title='section name in accordion'] Content inside of accordion goes here, text [/section] [section title='section name in accordion'] Content inside of accordion goes here, text [/section] [section title='section name in accordion'] Content inside of accordion goes here, text [/section] [/accordion]
Example
[accordion] [section title='Career Pathways and Program Redesign'] Sinclair Community College in Dayton, Ohio, is the lead of a three-state consortium with Austin Community College and Broward College, that adopted and adapted the Western Governors University competency-based education (CBE) model to accelerate information technology instruction. [/section] [section title='Curriculum Redesign'] The National STEM Consortium (NSC) is a collaborative of ten community colleges in nine states that developed five nationally portable, 30-credit certificate programs. Each includes a STEM Bridge component designed to be consistent across all fields. [/section] [section title='Developmental Education Redesign'] The Colorado Online Energy Training Consortium (COETC) developmental education redesign involves replacing the traditional sequence of developmental education courses with courses that employ acceleration, modularization, and contextualization. [/section] [/accordion]
III. Accordions with multiple content types
Using an accordion with multiple content types is common when varying content falls under a category such as hyperlinks, images, and more. For example, the Strategy Briefs page under TCI, has five different categories of strategies, with a list of documents in each category, visualized in Figure 5a-b.
Figure 5a. In a closed accordion, clicking the “+” will expand a section to reveal categorized content.
Figure 5b. Opened accordion shows organized content in its relevant section and subsections.
As seen in Figure 5b, the strategy documents under Career Pathways and Program Redesign are chunked into a set of a title, linked with the corresponding PDF document, with the context of the document. This setup organizes content to allow easier access for users.
Code Template
[accordion] [section title='section name in accordion']<a href="URL of document/content linked to text">Text that is linked<⁄a> <br>Descriptive text; A blurb that gives context to the title <a href="URL of document/content linked to text">Text that is linked<⁄a> <br>Descriptive text; A blurb that gives context to the title <a href="URL of document/content linked to text">Text that is linked<⁄a> <br>Descriptive text; A blurb that gives context to the title <a href="URL of document/content linked to text">Text that is linked<⁄a> <br>Descriptive text; A blurb that gives context to the title <a href="URL of document/content linked to text">Text that is linked<⁄a> <br>Descriptive text; A blurb that gives context to the title[/section] [/accordion]
Example
[accordion] [section title='Career Pathways and Program Redesign']<a href="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/ sites/158/2018/08/23173339/stratgy-briefs-sinclair.pdf">Adopting and Adapting Competency-Based Education<⁄a> <br>Sinclair Community College in Dayton, Ohio, is the lead of a three-state consortium with Austin Community College and Broward College, that adopted and adapted the Western Governors University competency-based education (CBE) model to accelerate information technology instruction. <a href="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/ sites/158/2018/08/23173336/sb-Building-a-Foundational-Model-for-Credit-for- Prior-Learning.pdf">Building a Foundational Model for Credit for Prior Learning: Making the Future<⁄a> <br>The Wisconsin Strategy, under leadership of Northeast Wisconsin Technical College brought together all 16 colleges in the Wisconsin Technical College System to implement Credit for Prior Learning (CPL) practices throughout each of the autonomous districts. <a href="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/ sites/158/2018/08/23173334/sb-Collaborating-on-a-Sectoral-Approach- Strengthen-Workforce-Training.pdf">Collaborating on a Sectoral Approach Strengthen Workforce Training<⁄a> <br>The Air Washington consortium used a sector approach to strengthen training for employers in the aerospace industry across the state of Washington. <a href="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/ sites/158/2018/08/23173330/sb-Strengthening-Career-Pathways-in- Manufacturing-Education.pdf">Strengthening Career Pathways in Manufacturing Education<⁄a> <br>The Illinois Network for Advanced Manufacturing (INAM) priorities address students’ needs in a variety of ways, which include: creating a practical career pathway; using individualized educational plans; purchasing advanced manufacturing equipment; developing job placement services. <a href="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/ sites/158/2018/08/23173328/sb-Short-Term-and-Accelerated-Training-through- Blocked-Scheduling.pdf">Short Term and Accelerated Training through Blocked Scheduling<⁄a> <br>The Tribal College Consortium for Developing Montana and North Dakota Workforce (DeMaND) Project has utilized blocked scheduling to accelerate short term and certificate training toward the goals of improving retention and achievement rates and/or reducing time to completion.[/section] [/accordion]