You may have heard the term “responsive” in regards to websites. And you are almost certainly familiar with the phrase “mobile-friendly.” But there is often confusion regarding what these terms mean specifically, and how they relate to each other.
Your site on a phone
It’s common knowledge that approximately two thirds of all Internet traffic occurs on mobile devices — mostly smart phones. This number is growing. Obviously, the way your website looks and operates on a phone is critical.
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.
Case Studies
Read about real results we’ve obtained for our clients, including website redesigns, SEO, PPC, and combinations.
Don’t forget tablets
Now think about the fact that phones only comprise part of the mobile landscape. You’ve also got to factor in Tablets, “Phablets,” notebooks, and any other devices that can be carried around.
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.
Beyond “mobile-friendly”
Of course it’s impossible to anticipate every single screen format on every single device with which your website may be visited. The solution is something we like to call “liquid design.”
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.
What Clients Say
The GHT Companies' VP of Customer Service talks about working with us on websites, SEO, PPC, and more.
WatchWhy liquid design matters
One of the main benefits of a smoothly-functioning liquid website is that it preserves the look and feel of your site for all sizes and devices. This is critical because most people will view a website on multiple devices.
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.
How it’s done
Using the experience garnered during more than two decades of both designing and programming websites, we’ve created a unique method that delivers this result. It takes a designer that knows programming, and a programmer that understands design.
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.
Form Fills vs. Phone Calls vs. Chats: What’s Best?
When it comes to getting users to your website, it’s important to think about how customers want to reach out once…
Read MoreSumming it all up
Of course we are not the only people in the world doing this kind of sophisticated design. However, as you can probably gather, we are absolutely passionate about it — to the point of fanaticism! That and our breadth of experience are what make us leaders in the field.
Want to know more?
Request a quote
