Quiksilver Global – New and Responsive*

This week we recently launched a new Quiksilver Global Page.  The cool feature of this is that we made it responsive, meaning that any way you view the page, from landscape to portrait, thin or wide, desktop or mobile, it’ll look good.  I was debating on if I should use a reactive framework like Skeleton JS or Bootstrap or Foundation, but I opted to just write it from scratch.  Too many people rely on frameworks I think without knowing what actually is going on, so I find it fun to write the actual media queries for things.

The site has 2 backgrounds

  1. Portrait Background
  2. Lanscape Background

The site has 3 views

  1. Full View
  2. Medium View
  3. Thin View

Should you choose to resize your browser, it’ll adjust.  However the main idea here is that the site is not built for ‘mobile’, its built for anything.   Rather than decide which devices get which code (and potentially duplicating code altogether), we use a single template, single JS file, and single CSS file that all has the reactive code in it.  That way if I need to add in a new country, i just have to add it once, and the site will react accordingly.

URL: http://global.quiksilver.com

Quiksilver Global - Mobile

The thin view after the jump…

The thin view (and theres even a THINNER view)

The old version…Quiksilver Global - Old Version

Update: Title updated from ‘reactive’ to ‘responsive’, my bad