Web Stock NZ | Examples | Responsive Web Design

Web Stock NZ

Web Stock NZ
Web Stock NZ across four different breakpoints

View Web Stock NZ

Web Stock is a conference that runs out of New Zealand and is coming in to its 10th Year Anniversary. I’ve heard a lot of great things about Web Stock from friends, but lets take a look how their website goes.

Mobile metadata is used on the Web Stock site:

<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">

Critical CSS

Critical CSS is employed on this site, as is critical JS to a certain extent (although that’s not really a thing). There is only 1 http request that is used to include fonts from typography.com. The remainder of the CSS, which looks to be a custom version of Foundation, is included inline in the head. This is great to avoid any additional http requests, which can be more costly than the file itself, but it does have a knock on issue in that there’s not way of caching the CSS (at least in the way they’ve done it) meaning you download the same CSS and JS over and over again.

Web Stock NZ Technical Details

Site Meta Tag

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

Media Queries

@media only screen { }

@media only screen and (min-width: 641px) { }

@media only screen and (min-width: 1025px) { }

@media only screen and (min-width: 1151px) { }

@media only screen and (min-width: 1401px) { }

@media only screen and (orientation: landscape) { }

@media only screen and (orientation: portrait) { }

@media only screen and (max-width: 640px) { }

@media only screen and (min-width: 641px) and (max-width: 1024px) { }

@media only screen and (min-width: 1025px) and (max-width: 1150px) { }

@media only screen and (min-width: 1151px) and (max-width: 1400px) { }

@media only screen and (min-width: 1401px) and (max-width: 999999999999) { }

@media only screen and (min-width: 1320px) { }

@media only screen and (max-width: 768px) { }

@media only screen and (max-width: 480px) { }

@media only screen and (max-width: 1150px) { }

@media only screen and (max-width: 1024px) { }

@media only screen and (max-height: 600px) { }

Plugins used on Web Stock NZ

Subscribe to our Newsletter

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