How To Make A Responsive Site

UPDATE: Please note this post is from 2012.

Every since the tablet boom in the last two or so years, responsive design is the only way to make sites.

As an owner of a tablet and heavy web user, it makes a world of difference on my impression of a site (and thus a company/organization) when you visit a site that’s responsive. It’s butt hurt going to (a) a full size site where you have to awkwardly zoom-in, wait for 9000 things to load, and awkwardly scroll down in a straight line with the article. Worse than loading an unresponsive full size site on a tablet is a site detecting the large iPad to be a “mobile” device, thus redirecting you to a plain-text-2005-mobile site with images no bigger than your pinky finger nail, and no visual interest at all, and no care into textography for large-mobile devices.

Responsive design is easy, and for reference here’s the framework for detecting the screen size:

I found using CSS was enough, but sometimes loading bigger images and extra things is a pain, so you can use some basic Javascript to detect the size and change things up.

To make sure the viewport is the width of the device, HTML meta tag is used:

On a foot note, to further enhance the responsive experience, optimizing the site for the visitors screen-size, I use tools like LazyLoad to ensure the site loads speedy on slower 3/4G connections, Swipey for scrolling horizontal images, and Off-canvas-navigation easy app-like navigation.

Leave a Reply