There are a million reasons why your business’ website needs to be responsively designed, the least of which is Google’s inclusion of this factor in their algorithm.  The most important reason is to ensure your current and potential clients and customers are having an optimal experience with your user interface regardless of what type of device they are using.

Responsive websites flow like water to adapt perfectly to the size of any viewport. Whether or not your visitors are using a maximized browser on a desktop or viewing your site on their mobile smart phones, your design will be displayed beautifully and efficiently.  It won’t be the exact same, but it will represent the unified creative vision of your brand.  The goal is to remove the physical limitations of the viewport while maintaining maximal conversion rates.

So how can you pull this off quickly to gain all of these benefits right now?  If you’re wondering what to do so you don’t take a hit on your organic search visibility as well, don’t worry.  We’ve got you covered with our list of 12 tips below.  Without further ado…

1. Set Your Viewport Meta Tag!

Without this tag, your site isn’t responsive.  Forgetting this is the easiest mistake in the world to make and even veterans continue to do it.  You could go through all of the other steps in this guide and have everything looking great as you decrease and increase the width of your browser on your desktop.  But as soon as you load your site up on your phone or tablet, it looks just like the desktop version (aka not responsive!).  Before you go wasting hours chasing down the problem, this is it:

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

This must be placed in the <head> of all of your pages.  It accomplishes two goals.  It basically tells your site and your browser to forget about themselves this time and to take each other into consideration.  Your page will flow to width of the current viewport instead of forcing it to zoom out, and the viewport will establish a one-to-one ratio with its native resolution and your CSS attributes so everything isn’t visually tiny.

To put it simply, this tag makes it so your users never have to pinch to zoom or scroll horizontally.

2. Create a Mobile-First Design

We are all used to designing for the desktop with static positioning of all of our website elements.  So now that we are designing responsively, we tend to work backwards from desktop down to tablet and then on to mobile.  Break this habit now!  You want to work in the reverse order.

Since many of us are converting a non-responsive layout into a fluid one, we don’t have this option, but we can be aware of it to help us guide our decisions.  The reasoning is that if you start with a desktop version and move “down,” you’re likely to have a million design elements that you’ll attempt to cram into your mobile designs that simply aren’t necessary or welcomed and will harm the user experience overall (more about that in tip 4).

Use this mobile-first philosophy in your conversion to a responsive design by considering which flashy design choices can be completely removed as your “screen real estate” is made smaller and smaller.  This CSS snippet will be your best friend:

@media (max-width: XXXpx) {

.Whatever-Becomes-Invisible {

display: none;

}

}

Maybe your tablet and phone visitors simply don’t need to see your sidebar, even though it looks amazing on desktop.  On mobile, it’s probably just distracting and makes the page load so slooooow.  Just axe that sucker completely using the snippet above.  If you aren’t entirely sure how to use it, just keep reading this guide and you’ll get it down pat.

3. Let Your Design Dictate the Breakpoints

There are no conventions when it comes to devices and their screen sizes.  Browsers aren’t always maximized, monitors are different sizes and resolutions, and we all know how tablet and phone makers keep competing with each other by pumping out a thousand different screen sizes.  So why do designers keep mechanically using the same breakpoints!?!?

A breakpoint is set using a CSS media query (that snippet you see above!).  It says to your sidebar, to continue with the example, “Hey, if the screen is smaller than 550 pixels wide, I want you to disappear altogether.”  Or move to the bottom.  Or get redesigned completely.  You can literally do anything you want with as many media queries as your heart desires.  There is no correct and standardized set of widths to use, so please don’t worry about that.

Your main consideration is your design, and therefore user experience.  Do what’s right for the design and your users will be happy.  I know that’s a very broad statement, but of utmost importance.  Guidance is coming in the following tips so keep reading.

4. Optimize for Speed and Slow Mobile Connections

Your safest bet is to always assume your mobile users are connected through their drudgingly slow cellular connections.  This helps you remember to de-clutter the design and serve the page as fast as possible.  Let’s look at some ways to accomplish this:

  • Minimize HTTP Requests

This means that you should load as few different files as possible.  Do you really need that extra image?  Are you loading three CSS files that can be combined into one?  What about JS files as well?  Are you using three Google fonts when one would suffice?  Start trimming off the fat.  It’ll help with the desktop version of your site as well.

  • Compress Image Sizes

Don’t serve an 800 pixel wide image that hasn’t been compressed (check out TinyPng.com or Kraken.io), to a device that can only display 320 pixels.  Sure, you can tell the picture to resize, but that’s over double the amount of data you’re forcing the user to load before your page is visible.  Speed is everything online.  Trim the fat!

  • Forget Videos, Flash, Unity, etc.

First of all, most mobile browsers can’t even handle Flash or Unity.  It just won’t load.  And this isn’t 1998 any more.  If you’re using anything like Flash, get rid of all of it.  Also, for mobile go ahead and make a dedicated video page if you feel you must have them around, but don’t cripple your page loading time by including them in your footer on every page.  If you’re using WordPress or any other CMS, drop all of those aweful plugins that are doing the opposite of helping your site and your users.

5. Tweak Your Text Sizes for Readability

Don’t be fooled by how short this tip is and how quickly you can implement it.  It is one of the most important in this list.  More often than not, you need to slightly increase the size of your text for tablets and a little more for phones.

This is actually one of the main factors Google is measuring in their mobile-friendly testing.  Get this wrong and everyone will be upset with you, even Google’s robots.  What’s the point of having words on your page if they are too small to be read comfortably?

6. Alter Your Margins and Paddings

This is another quick tip that is extremely actionable and beneficial.  Your desktop design might be jam-packed full of visual goodies or it might follow the minimalist philosophy of including a lot of white space.  You’ve either got a lot or a little of margin and padding surrounding your various design elements.

Whatever amount you have, it’s not going to be appropriate for tablets and phones.  The aesthetic balance will shift based on the size of the screen, and a 50 pixel gap surrounding images or columns can change from being a beautiful sense of space and calmness to eating up over a quarter of your user’s screen space.

Here’s how you fix it:

  • Use CSS media queries to set specific pixel-based values
  • Or forgo media queries and use percentage-based values

Moving backwards from desktop to tablet to mobile might cramp your style and force you into using pixel-based values.  But in the future when you are designing responsively from the ground up, try out percentages.  You’ll never go back to hard values again.

7.  Size Tap Targets Appropriately

On a desktop or laptop, we’re all used to using a mouse or a trackpad to control a pointer on the screen that is very precise.  On mobile devices, not many people are using a stylus with a fine point.  Most of us use our chubby little fingers to click on the links, advertisements, and buttons.  This is why it’s important to size your tap targets appropriately.

This begs two questions: “What are tap targets?” and “What is an appropriate size?”

Tap targets are any clickable element.  Think about links in your header menu, any call-to-action button, and any text link in your content.  Consider the left and right arrows in your image gallery.  Literally anything that is meant to be clicked on (or tapped with a finger) is a tap target.

To appropriately size the clickable regions of these elements, you need to consider their size and the space around them.  For instance, if you have a vertical list of links that are 10px font-size and separated by 3px of padding, there’s no telling which one is actually going to be clicked when I place my finger over the screen.  My finger will cover up most of that list as it is.  Clickable elements should be large enough and styled in a way to be recognized as clickable, and there should be plenty of space around them.

Here’s a pro-tip for you.  Use padding to increase the area of clickability and use margin to increase the non-clickable space around the element.  The goal is to reduce miss-clicks to zero.

8. Set a Max-Width for the Whole Site

Don’t break your desktop design when switching over to mobile.  The most common way of sabotaging your current design is to forget to set a max-width on your overall container or wrapper.

Your only concern right now is for devices with screens smaller than a desktop browser.  Don’t worry about people browsing your site on a 62-inch Smart TV.  We can all adjust for that if it ever becomes common.  Right now it’s largely apps being used on TV’s.  So what we can do is set a maximum width for your site so that it stops expanding at a certain point.  Any extra browser space can be filled with whitespace, a background color or image, or even a background advertisement.

The most common width for desktop designs is around 980 pixels.  This accommodates the largest percentage of computer monitors without increasing your duties of designing even wider versions.   Let’s use 980px as our example.

Identify the outermost Div in your HTML.  These are called wrappers or containers, depending on who you’re talking to, but any good design will have one that wraps the entire site.  Let’s say you’ve found it and it is written in the HTML like this:

<div id=”site-wrapper”> …a ton of code… </div>

In your CSS sheet, you can search for the ID called #site-wrapper.  It could also be a class, in which the pound sign will be a period instead.  It may already have some CSS attributes assigned to it, but you’ll want to add the following:

#site-wrapper {

max-width: 980px;

margin-left: auto;

margin-right: auto;

}

What you’re doing is telling the site to not stretch in width past 980 pixels.  When your browser surpasses this width, the empty space will be filled with the HTML or Body background-color or background-image.  The left and right margin’s being set to auto will center your site in the middle of the browser window.

9. Allow Your Images to Be Fluid

HTML5 isn’t quite ready to help us serve different files for different size images.  That will be advantageous in the future, but a larger detriment is adding on HTTP requests like we mentioned in tip 4.  Here’s is how you can serve one picture to a mobile device and automatically resize it while keeping it at a respectable file size…

  • Aim for an “In-Between” Resolution

When re-sizing your pictures to reduce the loading impact, you don’t want to go so small in size that when it’s stretched for the desktop view that it’s extremely pixelated.  But you also don’t want to force a smart phone to download a gigantic picture only to display it very small.  What’s a designer to do?  Aim up the middle!

“Okay, so I have this medium-sized picture but it doesn’t resize itself!”  Let’s solve that now:

  • Make Your Images Resize Themselves

Your pictures likely exist within Div’s with some form of width declared.  This opens up the world of auto-resizing using a magical CSS snippet:

img.responsive {

width: 100%;

height: auto;

}

You can add the class=”responsive” tag to your images without disrupting your prior CSS work for images.  After adding the snippet above to the bottom of your CSS file, your new width and height declarations will override previous ones.  Setting the width to 100% means that it will stretch to fill the entirety of it’s container.  With height set to auto, the image will resize proportionately and maintain it’s original width-to-height ratio.  You can set the width to any percentage less than 100% and use the margin-left and margin-right trick (set them to auto!) as mentioned above to keep them centered in their containers.

Don’t forget that you can use CSS media queries as much as you want.  You could have your image float to the left or right at a max-width of 300 pixels on desktop, and if a browser of less than 600 pixels in width loads the page, you can convert the picture to be centered with 100% width.

Pro-Tip: This exact same technique can be used on advertisements to shoot your click-through-rating through the roof on mobile.

10. Track and Optimize User Metrics

Now that you know how to design responsive websites, there’s no reason not to track the user-agent and all of the user’s metrics to make more informed changes later.  A service like Google Analytics or Clicky Analytics will collect most of this data and organize it for you.

Now, instead of trying to make decisions about your desktop users on the desktop design while mobile phone users use the desktop design and confuse your stats worse than this sentence is confusing you, you can track it all separately.  With this data neatly compartmentalized, you tweak any element at any browser width to increase your user experience.  This also greatly affects your search engine visibility.

Metrics to watch for and be aware of:

  • Bounce Rate (high can be okay if your goal is to get them to click CPC ads)
  • Pageviews per Visit
  • Time on Site
  • Conversion Rates on Specified Actions

Getting too deep into this is beyond the scope of this article, but use your design to please your visitors and get them to do what you want them to do.  Don’t let your design constrain your income.

11. Too Much to Learn? Buy a Responsive Ready Theme

I can imagine trying to comprehend all of this without having a background in HTML, CSS, PHP, Javascript, and jQuery.  You will encounter all of these languages as you set out on this journey.  If you don’t know them, don’t worry.  There is still a solution!

Thousands upon thousands of designers have created and sell their fully responsive designs.  No matter if your site is flat-file HTML and CSS or is built upon a content management system like WordPress, Drupal, or Joomla, there are themes out there that are professional and inexpensive.  They are designed with all of the tips above already taken into consideration.

Buy one as close to your vision as possible, and then you can go in and just tweak the HTML and CSS or hire a designer to make the changes for you.  This can be cheaper and much faster than trying to convert a non-fluid design into a responsive one.  There are countless independent companies with stores, or you can search the ever popular ThemeForest.net and see what you can find.

12. Use Google’s Mobile-Friendly Site Testing Tool

Let’s face it.  The reason everyone is now freaking out about responsive design is due to Google’s inclusion of it into their ranking algorithm.  Thankfully, they aren’t leaving us out in the woods without help.  They’ve created a Mobile-Friendly Site Testing Tool that will quickly scan your site and alert you to any glaring issues.  Try it out real quick.

Understand that Google’s robots are not infallible.  You can use their testing tool, but as you change your design to accommodate their robots, make sure you’re keeping you users in mind first.  Never attempt to please the robots over the people.  They aren’t your customers.  Find a way to make both parties happy and your wallet will thank you.

Conclusion

The days of people using one device and constant screen size are long gone.  Your old design is no longer appropriate for users loading your site on a 3-inch wide smart phone or an 8-inch wide tablet.  Use the tips above or pass them on to a designer to quickly convert your site to a fluid responsive design that will please your customers no matter what size screen they are using.

This is of paramount importance for all website owners.  The best time to get this done came and went at least a year ago, but if your business relies heavily upon organic search traffic from Google, a real deadline is approaching.  On April 21st, Google will push their new results live.  These results aren’t calculated live, which means they are using data they are collecting between now and then to make these decisions.  It’s been revealed that the algorithm will be binary, in that the answer to the question of “is this site responsive?” is either a yes or a no.

It was detrimental for all of us late-adopters to not have responsive designs for the past year or two.  Now it is absolutely critical that we join the crowd lest we surrender a large portion of our traffic to our competitors.  If you slip out of the rankings, guess who is moving up?  Your most-hated competitor who went responsive last year!  Get it done, and get it done now!  Good luck.  Remember to bookmark this page and refer to it as you make your changes.