Responsive Websites

How many times have you been standing in line at the grocery store, in your dentist’s waiting room, early to a meeting, or in a similar situation? If you’re like most of us, you made the most of these “spare” moments to catch up on your email, read the latest news, or visit some favorite website.

See if you can recall a recent struggle you had with a website that did not work well on your phone. Frustrating, wasn’t it? It probably didn’t take you too long to leave that site, and find another that provided a better experience. We all do the same thing; it only makes sense.

When designing — and coding — websites, one of the key factors is accounting for the thousands (yes, thousands) of sizes and formats of screens you may encounter. This includes everything from a jumbo monitor in an office or home (with a resolution of 2560×1640 pixels or more), to an iPhone whose 3-inch screen may offer only 320×480 pixels.

If this sounds complicated, that’s because it is! Which is the reason why an enormous number of websites out in the digital world do not satisfactorily address this issue. It’s a job for experts; very diligent and dedicated experts.

A “liquid” website accounts for every device by moving and flexing as the size of the screen changes. This way, a website can fit any device it encounters, because it re-shapes itself to the right proportions.

You can test a website by accessing it via a number of different sized devices. But there is an easier way. Using the largest computer screen to which you have access, fill the screen with your browser and visit the site. Now “grab” the right-hand edge of your browser, and gradually drag it to the left, “squeezing” the site as you go.

You should notice two things: 1) the elements of the site should shift and “flex” as you change the size of the browser window; and 2) if you stop at any point, the site should look like it was designed exactly for that size.

That’s the beauty of properly-executed liquid design.

A customer — or potential customer — may view your site on a computer at their office, later on their phone while they are out somewhere, and finally at home on their iPad. You want to make sure that the flavor of your site stays consistent across all these devices.

There are easier ways to design “mobile-friendly” websites. (Many website producers opt for a two-tiered approach: one version for all computers, another version for all mobile devices.) But these miss the advantage enjoyed by a liquid website, which keeps your business branding uniform.

During the design process, we specifically produce designs for the “most common” screen widths: generally, four different formats. But, we keep in mind that each format is just an approximation, and that our designs must accommodate larger and smaller versions.

Our programmers (coders) understand how to take these design concepts and make them flow smoothly, one into the other. Think about a plastic bag that holds water; you can squeeze it in various directions and change the shape, but the water always fills every crevice of the bag.