Responsive Design

When planning for a Web site, there is one major inescapable issue, and that is responsiveness. Perhaps you have heard the term “responsive design” bandied about, or read about it in one of our other articles. Responsive web design refers to a layout that reconfigures itself for various devices. The layout that looks one way on a desktop computer display, may change slightly on a tablet, and will adjust further on a smart phone. It was becoming too arduous, and nearly impossible, for web designers to be constantly checking for and redesigning for more and more devices. Technology was about to outpace our design capabilities.

It all started with an article from 2010 by Ethan Marcotte on a site called A List Apart, that called for a new method of web design that made use of the flexibility of the screen sizes without the same restrictions that designers had to deal with on the printed page. This started a revoultion of sorts that has taken the industry by storm.

For a while, it was perfectly fine to expect a user to zoom in, pan, and zoom out, especially on a smart phone, in order to navigate a web page. While that may still be fine with you or your user (I never minded it), the times are changing. Some of the newer web browsers are not handling those static pages the same way anymore, although some have been updated to be backwards compatible— to an extent. With each new browser release, and each new mobile operating system (OS), those old static pixel layouts are not displaying properly. To make matters worse, newer versions of desktop browsers are breaking up static pages, too! So you can either embrace responsive design, or have your web sites kicked to the curb. And if you think you can ignore this, think again, especially if you have an affiliate web site (Amazon, Commission Junction, Clickbank, etc.). Consider this: 70% of our Amazon sales last year were from orders placed on mobile devices!

So How Do You Know If a Site is Responsive?

From your desktop computer or laptop, grab the lower right corner of your browser window, and resize the window to make it narrower, as it would be on the screen of a smart phone. If the page elements do not rearrange to fit the new width, the layout is not responsive.

Blogs by Design is built with a responsive theme. Grab the bottom right corner of the window and close it in. Everything on the page redistributes to a narrower layout. Try this on various websites you visit to see if they are responsive.

Another way to tell is to view a site both on your desktop or laptop, and on a smart phone at the same time to compare them. When you have both open, scroll. A responsive layout will re-align on the mobile screen. Sometimes, the upper navigation will become a menu or use a hamburger icon (stacked lines icon) to indicate a menu. (Some of the themes we use do that.)

Sadly, NONE of the old PLR sites out there are responsive, and people are still building those Amazon mini sites without a responsive design. Are they crazy? No, they just don’t know any better. They’re not design professionals, and they are certainly not Web professionals. Responsive layouts are a must for any Web presence today.

Addendum

Since the original publication of this article, as of April 21, 2015, Google has rolled out its mobile-friendly update. This means that if your website is not responsive (mobile-freiendly), its ranking in search engine results will suffer. That means people won’t find you when they search. Bummer!

In addition, the IM (Internet Marketing) and SEO (Search Engine Optimization) communities have since labeled this update Mobilegeddon. It has proven to be aptly named.

About the Author

Linda Carruth is an illustrator and designer who enjoys creating new art, amateur photography, and riding her motorcycle. Her professional work can be seen at her company site, lwwallace.com. Her motorcycle, humorous, and motivational designs are available at MadDashRiot.com, LinesByDesignBoutique.com, and at MadDashRocket.com. Home decor and fine art items can be purchased at Carruth Creative Art & Gifts and on Fine Art America.

Top