How to Create a Fully Responsive Website and Stop Losing 6 out of 10 Potential Clients

Is a responsive website all that important, really?

So unless you don’t mind losing 6 out of every 10 readers who land on your website just because your website couldn’t respond… Then, yeah, having a responsive website in this digital day and age is a pretty BIG DEAL.

How Google will start punishing non-responsiveness

UPDATE:Things got even MORE serious, when Google announced that “mobile-friendliness” will now count as a signal for ranking. In other words? No responsiveness? No views from Google for you! Forget about 6 out of 10, you’ll be loosing 9 out 10 viewers soon!

Starting April 21, we will be expanding our use of mobile-friendliness as a ranking signal. This change will affect mobile searches in all languages worldwide and will have a significant impact in our search results. Consequently, users will find it easier to get relevant, high quality search results that are optimized for their devices.

What’s a Responsive Website anyway?

All websites can be visited from tablets and phones. But not all websites are responsive websites.

Have you ever visited a website from your tablet or phone where the text was sooooooooo small you couldn’t even read it with your grandma’s glasses on? That was NOT a responsive website.

Or what about one where you had to really zoom in to see the navigation menu–let alone click it–and then had to keep sliding left-right left-right left-right as you read each line of text with increased annoyance? That was NOT a responsive website either.

And that time you stumbled upon that really interesting webinar you meant to sign up for, but then started cursing at the microscopic form and at the photo that covered half the form fields no matter how hard you tapped your screen, finally deciding to leave it for later when you got on your laptop, only to NEVER remembered to visit that site again? You got it! NOT a responsive website.

To put it functionally, a responsive website is one that’s built to function dynamically, rearranging and readjusting itself for best viewing according to the size of the visitor’s screen.

To put it aesthetically, a responsive website is one that, when visited from a phone or tablet, doesn’t look like a five-year old threw up all over his macaroni-collage.

Checking for signs of responsiveness

Not sure if your website is fully responsive and pretty-looking from all devices? Luckily, you don’t need a whole ER team to find out. You just need a browser window and the cunning use of your mouse. Even if you don’t happen to have any handheld devices laying around.

If you’re reading this post from a desktop or laptop, slide your mouse over to the bottom right-hand corner of your browser window, and click-and-drag the edge of the browser towards left to create a narrower window. As you drag you’ll notice how the elements of the page rearrange themselves! At least on THIS website they do. Oooooh it’s like magic!

First the sidebar disappears and magically appears at the bottom of the page. (Go on, scroll down to see). Then the lines of text begin rearranging themselves at different lengths as you keep squashing them inwards with your mouse moving left. And all the line dancing performed by the text? Means that the font NEVER gets smaller, but maintains its readable size, so you don’t have to squint and cock your head 15 different ways just to make this paragraph out!

And if you scroll on to the top of this post, you’ll also see how the image changes along with the narrowing window to stay centered and fully in your view with no scrolling required. Even the navigation menu shape-shifts from options across the top of the site to a neat open-close stack that you can access whenever you need through the three-bars icon. Ta-da! Responsiveness!

Don’t much like dragging the corner of your browser window? Or not sure which size corresponds to which viewing device? There are online tools, like responsivedesignchecker.com, that show you exactly how a website looks across the different devices. All you have to do is enter a website’s address.

And since announcing its new rules, Google has also come out with this highly nifty responsiveness tool that actually tells you exactly what is wrong with the website (i.e. text too small, or links too close together, or mobile viewport not set, etc).

Easy, peasy, responsive-sy.

Responsiveness comes with creation. NEVER as an afterthought

If you were thinking you should just get your website up and running first, and worry about responsiveness later, STOP RIGHT THERE AND HOLD YOUR BREATH!

If you build your site with no flexibility for rearrangement on different screens, the only thing to rearrange itself will be your hair as you pull it out your head with all your might and frustration when you go check your beautiful baby from a mobile device and find a puked-up macaroni collage in its place. Not pretty.

Although a non-responsive website can be resuscitated from its deep comatose state at a later point, the process will likely be long, difficult, and mucho mucho expensivo, because of the extra back coding your web-doctor developer will need to do. (Okay, you can breath again. Here comes the solution!)

One-two, one-two checking, checking… or, How to create a responsive website.

As we’ve already established, if you never want your website to fall into a coma, you’re gonna need to make it responsive to all the shape-shifting demands of mobile browsers.

Here are the major considerations to take into account:

If you’re hiring a designer and developer to create your website, make sure you expressly tell them from the get-go that you want a responsive website. Never take it for granted that they’ll build it in anyway.

We always deliver responsive websites to our clients, explain to them exactly what responsiveness means, how it will work on their site, and why it will benefit their businesses (cha-cha cha-ching!). But don’t just suppose (dahling) that everyone else will, too…

Our advise is: NEVER ASSUME ANYTHING. ALWAYS ASK PRECISELY FOR WHAT YOU WANT!

If you’re going the DIY route using WordPress, you can still build a responsive website, without having to become a coding whiz-kid. What you need to do is select a RESPONSIVE THEME from the beginning. (We told you responsiveness couldn’t be an afterthought, didn’t we?)

You should never select a theme based solely on its appearance alone. Functionality and responsiveness should be your first two criteria for accepting or rejecting themes as possible candidates for your website.

To check a theme’s functionality, go into the full view of the theme and use the click-and-drag trick we described above.

:: If the theme is fully responsive you’ll see beautiful rearrangements right before your eyes. Ooh la la! Fave list it is!

:: If it’s not, everything will just keep getting smaller, or elements will begin to get cut off from view, making you do that awkward left-right scroll. Urh! Rejected!

Responsive themes

Always responsive. Never comatose.

What’s your experience with website responsiveness?