Skip to main content

Layout

When we redesigned our website, we created responsive page layouts, which means our website can be viewed on all devices and in all dimensions, including mobile.

The following dimensions are for a site being viewed on a desktop with a resolution of 1680 x 1050.

Home Page

Logo

home page logo

Dimensions: 486px x 65.33px

Main Navigation

main-navigation

Menu dimensions: 1489.33px x 48px when viewed on desktop browser with resolution of 1680 x 1050. Menu width will shrink and expand to fit the browser and will be hidden when viewed on mobile devices. 

Main Navigation Items

Admissions menu item

Dimensions: 182.667px x 32px

I want to... Buttons

See Why TCC Is Right For Me

Dimensions: 376.854px x 178.67px

This button spans 2 rows and is positioned to the left of the other, smaller buttons.

Apply

Dimensions: 366.854px x 81.33px

There are 4 buttons this size, and they are positioned in a 2x2 grid.

I am a... Buttons

New to College Student

Dimensions: 546px x 162.896px

There are 2 buttons this size, and they are positioned above the rest of the buttons.

Community and Industry Ed Student

Dimensions: 357.313px x 106.604px

There are 6 buttons this size, and they are in a 3x2 grid placed below the 2 bigger buttons.

Request Information

Request Information

background-color: #e6e7e9;
text-align: center;
box-sizing: border-box;

Request Information is an h2 with
font-size: 1.8rem;
font-weight: 800;
margin-bottom: 1rem;

Paragraph text
font-size: 1rem;
font-weight: 400;

Send Me Info! button
Dimensions: 160px x 50px
font-size: 1.3rem;
display: block;
font-weight: 700;

Request Information Form

Please enter your contact information below is an h2 with
font-size: 1.2rem;
font-weight: 700;

Form labels Name and Email
font-size: 16px;
text-align: left;
margin-bottom: 0.25rem;

Form Input fields
Dimensions: 168px x 20px;
padding: 3px;

Placeholder text
font-size: 16px;

Send button
Dimensions: 61.875px x 30px
font-size: 16px;
font-weight: bold;

Request Info Success

Success is an h2 with
font-size: 24px;
font-weight: bold;

Paragraph text
font-size: 16px;

Feed Headings
Both feed headers use an h2 heading with
font-size: 48px;
font-weight: 800;

Feed Text
text-decoration: none;
font-size: 16px;

Calendar of Events

Calendar of Events

Dimensions: 1280px x 880px

This container displays 6 items at a time in a 3x2 grid. Each item links you to the specific calendar event page that contains more detailed information.

Event Items

Calendar Event Link

Dimensions: 382.396px x 290px

View All Events Button

View All Events

Dimensions: 133.583px x 38px
background-color: #2c74ae;

General Announcements

General Announcements

Dimensions: 1280px x 543.938px

This container displays 3 items positioned on 1 row. Each item links you to the specific page that has more detailed information on the general announcement.

Announcement Items

Announcement Item

Dimensions: Width is 382.396px. The height will shrink and expand to fit the announcement description. In this announcement's case, the height is 254.604px.

Read All General Announcements Button

Read All General Announcements

Dimensions: 267.188px x 38px
background-color: #2c74ae;

District Announcements

District Announcements

Dimensions: 600px x 536.66px

This container displays announcements in a column, and each announcement links to a specific page with more detailed information on the District announcement.

Announcement Items

District Announcement Item

Dimensions: 560px x 110.333px

Read All District Announcements Button

Read All District Announcements

Dimensions: 263.5px x 38px
background-color: #2c74ae;

TCC News

TCC News

Dimensions: 600px x 826.667px

This container displays news releases in a column, and each links to a specific page with the full article. The height of this column will shrink and expand to fit the contents of the feed items.

News Items

TCC News Item

Dimensions: 560px x 166.334px

Read More TCC News Button

Read More TCC News

Dimensions: 176.667px x 38px
background-color: #2c74ae;

Reach Magazine

Reach Magazine

Dimensions: 640px x 1112.33px

Magazine Items

Reach Magazine Item

Dimensions: 560px x 393.667px

Read More at Reach Magazine Button

Read More at Reach Magazine

Dimensions: 248.813px x 38px
background-color: #2c74ae;

Videos

VIdeos

Dimension: 600px x 646.667px
Video Description is an h3 heading with
font-size: 24px;
font-weight: 400;

Video Item

Video Thumbnail

Dimensions: 600px x 341.333px

The thumbnail for the video links to video's page on YouTube.

Section and Hub Pages

All section and hub pages are built using the same template. Here is an example of one of these pages: Admission

Section Front Header and h1

sectionFront

Dimensions are 1280 x 118 and font size is 5rem when viewed full screen on a desktop view. These dimensions change when viewed in different resolutions on different devices and platforms.

Tile

Tile - Apply for Admissions

Dimensions are 386 x 356 and the tile title is an h2. These tiles expand and shrink to fit the largest tile on the row. Each row fits a maximum of 3 tiles.

The green bar on each tile is a 12px solid #8dc63f and uses the border-left element.

Learn More Button

Learn More

Dimensions: 100.5px x 34px;
font-size: 16px;

Detail Page

All detail pages are built using the same template. Here is an example of 1 of these pages: How to Apply for Admission

Detail Page Header and h1

 

How to Apply for Admission

font-size: 2em;
font-weight: 800;
color: #0c2753;
text-transform: uppercase;

Main content section

How to Apply

Width: 1038.67px;
Height will expand to fit the content on the page

Footer

Footer

The footer's width extends to 100% of the page
Column headers are h5 headings with
font-size: 14.4px;
font-weight: 700;
color: #fff;
background-color: #585858;
text-transform: uppercase;

Footer Links

font-size: 16px;
color: #fff;
list-style-type: none;

Footer Logos

Footer Logo

Dimensions: 150px x 130.667px

Facebook Icon Twitter Icon Instagram Icon

Dimensions: 32px x 32px

Footer Legal

background-color: #585858;
color: #fff;
font-size: 12.8px;
font-weight: 100;

Side Navigation

The side navigation appears on all detail pages, and it's intended purpose is to help the user navigate the detailed sub-pages of each section. 

Side navigation for How to Apply for Admission

Side Navigation

Dimensions: 218px x 681px

Navigation Top Header

Navigation Top Header

font-size: 20.8px;
font-weight: 800;
text-transform: uppercase;
color: #315cbf;

Navigation Current Page

Navigation Current Page
font-size: 16px;
font-weight: 700;
background-color: #e9e9e9;
border-right: #8dc63f;
color: #000;
padding: 10px 6px;

Sibling and Parent Pages

Navigation Sibling
font-size: 16px;
font-weight: 400;
border-bottom: 1px solid #e9e9e9;
color: #315cbf;
padding: 10px 6px;

Children Pages

Navigation Children
font-size: 16px;
font-weight: 300;
font-style: italic;
bolder-bottom: 1px solid #e9e9e9;
color: #315cbf;
padding: 10px 6px;

Updated June 28, 2016