With our 2 year anniversary in mind, we wanted to repurpose our old website and bring it into the next generation with mobile and tablet devices in mind with accessibility. If you remember our old site, it was fun and quirky, but my biggest issue with it personally was that it was pretty much unusable on phones and tablets. I started to develop a mobile version of it but then decided we needed a solution where we didn’t have separate folders and files that needed to be updated.
In comes responsive web design. The idea is that the website will tailor itself to whatever size your browser window is, whether you’re 320px wide on your phone or you’re 1800px wide on your 27″ desktop. Go ahead and give it a try and resize your window (and other pages too).
<link href="/css/mobile.css" media="all" rel="stylesheet">
<link href="/css/desktop.css" media="screen and (min-device-width: 768px)" rel="stylesheet">
If you’re on a desktop you’ll notice the page stops at 768px wide, which is our breaking point from our mobile styling to our desktop styling. What this does is allow us to serve up some of our larger background images for the desktop while saving bandwidth for phones. It’s a mobile first thought process, as we built everything for mobile and then brought in our desktop stylings on top of it.
As technology pushes towards getting information wherever and whenever we can, websites are needing to adapt too. Devices will always be changing, but creating a website that can adapt to those changes will prove to be invaluable.
Some other little nuggets you’ll find will be the animations (using either Safari or Chrome) around the site. Hope you enjoy the site and if you run into any little bugs just let us know.