Milwaukee Ballet

View Milwaukee Ballet

This is a wonderful site to show off beautiful typography, imagery and video to bring you into what it must be like to be a part of the Milwaukee Ballet. Let’s take a look at how the site is put together.

There’s a bit of browser sniffing going on in the page around the type of browser and type of device that is being used. The first detection is

if (/Edge\/\d./i.test(navigator.userAgent) || /rv:11.0/i.test(navigator.userAgent)) {
            isBummer = true;
        } else {
            isBummer = false;
        }

This checks to see if the user is on Edge or IE11, and if so sets the variable of isBummer to true which I think is a little bit harsh on IE and the evergreen Edge Browser… it’s not a Bummer to be using those ;)

There is a little bit more detection which checks to see if the user is a mobile-esk type device and sets a isMobile to true. As part of setting the variable, the site will also load in touchswipe.js for the touchscreens/mobile devices.

I applaud the care in which this library is being added to the site, it’s being done only for the devices that require it and in a progressively enhanced way. Unfortunately, most of the other scripts and CSS files are being added by wordpress individually so it would be great to see all of the scripts concatenated and loaded once (especially seeing as the site is loading over http1.1 and not the more speedy http2)

CSS

There are a tonne of different media queries that are running on this site and they have gone the desktop first approach to media queries (using max-width to declare rules for smaller screens that override larger screens). You can usually tell how much care is taken about every aspect of a design by the number of media queries that are included…. although in this case I would hestitate a guess that using a min-width approach might have been easier (although I can’t say that for sure).

line-height has been set in an inconsistent way across the site, with the body being set to 1 and then other elements getting non-measured values of 0.99, 1.4, 2 etc while some of the other declarations are done in pixels with 18px, 24px etc.

The site positions things centrally quite a bit and rather then go for a flexbox method the site uses the following which is suported across more browsers:

.center-v {
  position: absolute;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  top: 50%
}

.center-h {
  position: absolute;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  left: 50%
}

.center-both {
  position: absolute;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%
}

While there is a lovely layout grid on the site they didn’t use any frameworks to get that to work, instead it looks as though each of the modules were designed independently, almost like atomic design in a pattern library, and then dropped into the page where they would respond to the viewport they found themselves.

Typography, at least for headings, have been set in two differnet ways. It looks as though component titles are set with rem‘s while page titles are set with vw units (which I love). Here’s an example of the titlel typography layout

@media (min-width: 1350px) {
.titles h2 { font-size: 3vw }
}

@media (min-width: 1778px) {
.titles h2 { font-size: 54px }
}

@media (max-width: 959px) {
.titles h2 { font-size: 5.8vw }
}

@media (max-height: 600px) {
.titles h2 { font-size: 3vw }
}

@media (max-width: 480px) {
.titles h2 { font-size: 6.7vw }
}

Plugins Used on Milwaukee Ballet

• Isotope
• jQuery
• Greensock with TweenLite, TweenMax, TimelineLite, TimelineMax, EasePack, CSSPlugin, RoundPropsPlugin, BezierPlugin, AttrPlugin, DirectionalRotationPlugin AND SplitText
• imagesLoaded – provide a visual indication to the user how long images are taking to load, or perform an action on the callback once they’ve loaded.
• TouchSwipe – jQuery Plugin

Milwaukee Ballet Technical Details

Site Meta Tag

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

Media Queries

@media (max-width: 320px) {  }
@media (max-width: 385px) {  }
@media (max-width: 426px) {  }
@media (max-width: 440px) {  }
@media (max-width: 460px) {  }
@media (max-width: 480px) {  }
@media (max-width: 500px) {  }
@media (max-width: 800px) {  }
@media (max-width: 959px) {  }
@media (max-width: 600px) {  }
@media (max-width: 350px) {  }
@media (max-height: 780px) {  }
@media (max-width: 767px) {  }
@media (max-width: 480px) {  }
@media (max-width: 995px) {  }
@media (max-width: 959px) and (max-height: 600px) {  }
@media (max-width: 1024px) {  }
@media (max-width: 1044px) {  }
@media (min-width: 1200px) {  }
@media (max-width: 1370px) {  }
@media screen and (orientation: landscape) {  }
@media not screen and (-webkit-min-device-pixel-ratio: 2), not screen and (min--moz-device-pixel-ratio: 2), not screen and (min-device-pixel-ratio: 2), not screen and (min-resolution: 192dpi), not screen and (min-resolution: 2dppx) {  }
@media (min-width: 1475px) {  }
@media (max-width: 1570px) {  }
@media (min-width: 1778px) {  }
@media (max-width: 995px) {  }