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.
Dimensions: 486px x 65.33px
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
Dimensions: 182.667px x 32px
I want to... Buttons
Dimensions: 376.854px x 178.67px
This button spans 2 rows and is positioned to the left of the other, smaller buttons.
Dimensions: 366.854px x 81.33px
There are 4 buttons this size, and they are positioned in a 2x2 grid.
I am a... Buttons
Dimensions: 546px x 162.896px
There are 2 buttons this size, and they are positioned above the rest of the buttons.
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 is an h2 with
Send Me Info! button
Dimensions: 160px x 50px
Please enter your contact information below is an h2 with
Form labels Name and Email
Form Input fields
Dimensions: 168px x 20px;
Dimensions: 61.875px x 30px
Success is an h2 with
Both feed headers use an h2 heading with
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.
Dimensions: 382.396px x 290px
View All Events Button
Dimensions: 133.583px x 38px
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.
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
Dimensions: 267.188px x 38px
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.
Dimensions: 560px x 110.333px
Read All District Announcements Button
Dimensions: 263.5px x 38px
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.
Dimensions: 560px x 166.334px
Read More TCC News Button
Dimensions: 176.667px x 38px
Dimensions: 640px x 1112.33px
Dimensions: 560px x 393.667px
Read More at Reach Magazine Button
Dimensions: 248.813px x 38px
Dimension: 600px x 646.667px
Video Description is an h3 heading with
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
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.
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
Dimensions: 100.5px x 34px;
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
Main content section
Height will expand to fit the content on the page
The footer's width extends to 100% of the page
Column headers are h5 headings with
Dimensions: 150px x 130.667px
Dimensions: 32px x 32px
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
Dimensions: 218px x 681px
Navigation Top Header
Navigation Current Page
padding: 10px 6px;
Sibling and Parent Pages
border-bottom: 1px solid #e9e9e9;
padding: 10px 6px;
bolder-bottom: 1px solid #e9e9e9;
padding: 10px 6px;
Updated June 28, 2016