United Pixelworkers | Examples | Responsive Web Design

United Pixelworkers

United Pixelworkers across four different breakpoints

View United Pixelworkers

I love the merchadise at United Pixelworkers! My wardrobe is quickly expanding into a view not unlike the website layout you see above. Nothing but Pixelworker t-shirts.

The navigation is really simple and easy to use on smaller screens, but the coolest part of the site is around the yepnope moderizr stuff they’re doing in the background. 

The run a check on the the bandwidth using foresight.js which seems to then link to the image that is served up for the shirts, as you can see below in the image tag

Images are loaded in with the src as the smaller default image and a data-src larger sized image. 

<img data-src="http://cdn.shopify.com/s/files/1/0118/1012/products/pixeliverycamera_front.jpg?10471" alt="" class="product-image fs-standard-resolution fs-src-uri-template" data-aspect-ratio="1" style="display: inline; " src="http://cdn.shopify.com/s/files/1/0118/1012/products/pixeliverycamera_front_medium.jpg?10471">

They extend the use of foresight even further in their CSS by including…

.product-image-area .product-image {font-family: "image-set( url(http://cdn.shopify.com{directory}{filename}_grande.{ext}?{query}), url(http://cdn.shopify.com{directory}{filename}.{ext}?{query}) 2x high-bandwidth )"; }

… and allowing the serving of smaller files to mobile consumers.

United Pixelworkers Technical Details

Site Meta Tag

<meta name="viewport" content="width=device-width">

Media Queries

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {}
@media (min-width: 480px) {}
@media (min-width: 600px) {}
@media (min-width: 800px) {}

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

@media (min-width: 1200px) {
.product-image {
font-family: "image-set( url(http://cdn.shopify.com{directory}{filename}.{ext}?{query}), url($asset_url{directory}{filename}.{ext}?{query}) 2x high-bandwidth )"; }
.product-image-area .product-image {
font-family: "image-set( url(http://cdn.shopify.com{directory}{filename}_grande.{ext}?{query}), url(http://cdn.shopify.com{directory}{filename}.{ext}?{query}) 2x high-bandwidth )"; }
}
@media (min-width: 1400px) {
.product-image-area .product-image {
font-family: "image-set( url(http://cdn.shopify.com{directory}{filename}_grande.{ext}?{query}), url(http://cdn.shopify.com{directory}{filename}.{ext}?{query}) 2x high-bandwidth )"; }
}

@media (min-width: 1600px) {
font-family: "image-set( url(http://cdn.shopify.com{directory}{filename}.{ext}?{query})"; }
}

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

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

Plugins used on United Pixelworkers

Subscribe to our Newsletter

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