What is resolution independence? Ever noticed that not all Web sites fit properly on the small display of a smartphone or tablet? That is the opposite of resolution independence. Content should fit well and look great on displays big and small—that’s resolution independence.

Recent trends in Web design have highlighted two solutions to this problem: Adaptive Web Design and Responsive Web Design (RWD). There has been a bit of an argument over semantics (surprise) of these two terms but they both create resolution independence.

The distinction between the two is that RWD leans toward fluid layouts which change as the viewing area changes while Adaptive changes after the viewing area has changed. This is a simplified explanation, but one that most of us can think with.

Choosing which method to use is best determined case by case and can be based on many factors. It’s a subject all its own.

So what does resolution independence have to do with anything other than maybe a technical gripe? More than you might think, because even though users often take no notice of the width and layout of a site, they will if there’s something wrong.

From my less-than-technical friends, if I hear a comment about the layout or design of a site it’s something like, “How come I can only see half of this page?” when browsing on their smartphone.

Wouldn’t it be nice if your site looked great across all devices and resolutions from the same URL? And if instead of commenting about some flawed design aspect of your site, your users comment about how great your product is?

One key design principle that I have learned in recent years is that not only do the words and images of a design communicate the message, so does the design itself: the fonts, the shapes, the colors all have their own message, too.

So, when a user pulls up your site and the right half of the page extends beyond the edge of visibility, what message does that send? The average user is probably annoyed; the technical user might scoff; and the smart Web designer should solicit you for work. In all three cases, one thing’s sure: they’re not getting your site’s message clearly and without distraction.

To see resolution indepence in action go to css-tricks.com or getskeleton.com. Go ahead, give the edge of the window a drag. Make it small. Nice, right? And if I hadn’t pointed out this aspect of these particular sites, would you have noticed it? Probably not. I stumbled on it accidentally myself by inadvertently resizing a browser window.

There have been various solutions for the problem of screen resolution in Web design but they’ve often been clunky in my experience. The latest solutions implemented in Adaptive and RWD are sensible approaches that combine good design principles and smart Web development. They have also become easier to implement due to the benevolence of the Internet community.

One of the example sites I listed above, Skeleton, is a tool for getting started with RWD. It isn’t a content management system, so you’ll still need a skilled hand and mind behind the scenes to put the pieces together. The benefits of Skeleton are that it saves one the trouble of starting from scratch to achieve responsiveness and makes it easy for the designer to just design without too much technical work to do. An additional feature beyond the already baked-in responsiveness, it that is also based on the 960 grid which combines a typographic grid with a widely used width of 960 pixels.

Above is a sample of Skeleton as you might see it on a desktop. Any arrangement of columns resizes down to stack upon itself as seen in a smartphone’s width.

As I work on finding a solution to match our needs for our own Web site, I have primarily become familiar with Skeleton, but I have found a few other free templates/frameworks/kits online that are all similar in that look like a good place to start from.

Frameless is a grid based on fixed columns without any fluidity that adapts down to mobile widths. This is Frameless at 1920 pixels.

Golden Grid System uses 18 columns with each column based on screen width and gutters (the space between columns) based on font size. This an interesting concept for the gutters as it adds an element of control to white space that can sometimes get out of hand in fluid designs. This system also encourages not setting a maximum width to allow its column to take full advantage of any display’s proportions. Pinterest.com may or may not use this specific system, but its columns behave in the same manner.

The 1140 CSS Grid embraces designing for a wider resolution to start but still stacks beautifully at the bottom for good mobile usability. Here shown at 1280 pixels, my preferred browser width.

320 and up takes the “tiny screen first” approach. Instead of downloading all the content that might be displayed on a larger display first and then formatting it to fit the smaller screen, 320 does the opposite. Mobile users without unlimited data plans rejoice.

In looking at these different resources one additional point came to mind and that is at what resolution should a Web site start? Should it be designed with a perspective from small to large or vice versa? The best answer to that is going to be found in your user base. Take a look at your site’s analytics and see where the majority falls: small or large display.

Regardless of which end you start from, it’s becoming more and more important to be able to reach both ends so as not to miss out on potential customers.

Want to see how your site looks on various devices? StudioPress has a useful tool for this. Go to studiopress.com/responsive and enter your URL to get a preview.