Nichols College | Examples | Responsive Web Design

Nichols College

Nichols College Responsive Design
Nichols College across four different breakpoints

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

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){}

Plugins used on Nichols College

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.