At Insight, we’re all about flexibility. Whether it’s practicing yoga at lunch or taking a day off from business to ride the Courage Classic, we believe that life is more enjoyable when you allow yourself to stretch to fit in the things that you think are important. And we take that same approach to web design, where we’ve been incorporating responsive design to keep sites looking snazzy as well as flexible.
We ask a lot of websites nowadays. We want them to look good on a 60” TV monitor as well as a smartphone. But we all know that these displays are sized at opposite ends of the spectrum, and we interact with them differently. Responsive design is here to fix that.
But first, a short flashback.
When phones that could access and display the internet first came along, they brought with them a range of problems for people with websites. You probably still notice when you go to a site that isn’t mobile friendly. Your phone only provides a small window into the site, you have to scroll all the way to the right and to the left, up and down, to view an entire page, and you’re constantly zooming in and out to read content and click on links. It ain’t pretty, and it ain’t fun.
The original solution to these problems was to create a mobile site, essentially a separate website at a separate URL, that could only be accessed by mobile devices. For a while, this was a great option for people who knew that a fair amount of their traffic would come from cell phones.
But then new phones with new screen sizes came along.
And then tablets with a wide range of screen sizes were put on the market.
And after a while, it got hard to keep up with all the different ways that someone could access your website.
And then responsive design was invented.
Based on a fluid grid system, which restacks elements depending on the width of the screen it’s viewed on, responsive design allows a website to gracefully rearrange itself depending on the device its audience is using.
So a bold, broad menu on a work desktop becomes a compact dropdown on a phone. A product list, which would normally have 4 products in each row, rearranges so that three show up on your iPad, two on your phone when it’s held in landscape mode, and just one when you hold your phone upright.
In other words, your website becomes flexible. Like, doing the splits flexible.
We’ve been using responsive design quite a bit recently (see Given Goods, ThirtySevenFive, and LiquorMart for some of our favorites), and it’s caused us to rethink our designs. We’re pretty excited with the results. Check out some of our recent responsive site launches and drag the browser window to larger and smaller sizes to see how flexible the web can be.