Nichols College

View Nichols College

They’ve done a great job embracing the responsive images solution on the homepage by using the art directed method you can see below.

<picture class="carousel__item__photo">
  <!--[if IE 9]><video style="display: none;"><![endif]-->

    <source srcset="/assets/ce/images/remote/http_cms.nichols.edu/sites/www/assets/fp/1450x645_Home_Leadership_1440_600_int_c1_full.jpg" media="(min-width: 40em)">

    <source srcset="/assets/ce/images/remote/http_cms.nichols.edu/sites/www/assets/fp/800x600_Home_Leadership_800_600_int_c1_medium.jpg" media="(min-width: 20em)">

    <source srcset="/assets/ce/images/remote/http_cms.nichols.edu/sites/www/assets/fp/800x600_Home_Leadership_480_360_int_c1_small.jpg">
    <!--[if IE 9]></video><![endif]-->
    <img src="/assets/ce/images/remote/http_cms.nichols.edu/sites/www/assets/fp/800x600_Home_Leadership_480_360_int_c1_small.jpg" alt="">
</picture>

The site is doing almost everything it can to be performant. This has included

• Grunticon
• Responsive Carousel
• Picturefill
• Lazy Font Loading
• Responsive Table Pattern

The site is super lean for performance, but it is lacking two very key performant improvements on the server side:

• GZIP
• Expire Headers

Unfortunately for people that build websites you will not always have access to the server to make these changes (which is the case here).

Developed by Easy Designs

Nichols College Technical Details

Site Meta Tag

<meta name="viewport" content="width=device-width, initial-scale=1"/>

Media Queries

@media only screen and (max-width:43.1249em){}
@media only screen and (max-width:770px){}
@media only screen and (max-width:59.9375em){}
@media only screen and (max-width:60em){}
@media only screen and (max-width:59.9375em) and (min-width:28.75em){}
@media only screen and (min-width:29.49152542em) and (max-width:44.74566271em){}
@media only screen and (max-width:59.9375em) and (min-width:43.125em){}
@media only screen and (min-width:44.74576271em) and (max-width:59.9999em){}
@media only screen and (min-width:17.5em){}
@media only screen and (min-width:20em){}
@media only screen and (min-width:28.75em){}
@media only screen and (min-width:35em){}
@media only screen and (min-width:40em){}
@media only screen and (min-width:43.125em){}
@media only screen and (min-width:60em){}
@media only screen and (min-width:71.25em){}