Southwest Heart

View Southwest Heart

South West Airline site are doing a lot to keep the size down. They compress the HTML (remove all the whitespace) to save even the slightest bit of size.

There’s a really bizarre media query for (min-width:850px) and (min-width:850px){ } — I can only assume it’s a typo and they meant (min-width:850px) and (min-width:960px){ } but if anyone can clear up what that might be used for it would be great (add it to the comments).

While on the media queries it’s also worth pointing out the subtle use of height based queries to keep the hero image just the right size for the screen when it’s so often left to javascript to make those calculations and changes.

They do load in an Adobe Campaign Custom external script at the top of the page which kind of defeats the purpose of minifying the HTML, however this is sure to be a business decision and benefit because all other scripts are loaded before the closing body tag.

They make use of FastClick to remove the 300ms delay between the physical tap and the click event.

Moderizr is used to check against a few things including the presence of no-cssvhunit and has plenty of user interaction stuff going on in the main.js file.

Southwest Heart Technical Details

Site Meta Tag

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

Media Queries

@media screen and (max-width:800px) and (orientation:landscape),screen and (max-height:300px){ }

@media all and (max-width:900px){ }

@media (min-width:960px){ }

@media (min-width:768px){ }

@media (min-width:480px){ }

@media (min-width:440px){ }

@media (min-width:320px){ }

@media (min-width:321px){ }

@media (max-width:900px){ }

@media (min-width:1200px){ }

@media (min-width:850px){ }

@media (min-width:850px) and (min-width:850px){ }

@media (min-width:850px) and (min-width:960px){ }

@media (min-width:465px){ }

@media (min-width:590px){ }

@media (min-width:340px){ }

@media (min-width:340px) and (max-height:310px){  }

@media (min-width:445px) and (max-height:340px){ }

@media (min-width:460px) and (max-height:365px){ }

@media (min-width:685px) and (max-height:430px){ }

@media (min-width:785px) and (max-height:465px){ }

@media (min-width:900px) and (max-height:590px){ }

@media (min-width:1190px){ }