How to Learn to Use Responsive Layout...

User 10077 Photo

Senior Advisor
1,095 posts

I remember right before I started using RLM. I didn't know anything about responsive programming except that I had to learn it. I bought a responsive theme and figured out how breakpoints work by studying the css file. I edited the site, but that was just to replace pictures and fill in text. I still didn't understand anything but breakpoints.

Then came RLM, and I jumped on it. I went through the tutorial, and it was helpful to allow me to learn how to use the software, but it did not help me grasp what I now call "thinking responsively." However, by using the software and using the forums and support for LOTS of questions, I began to understand more and more how RLM works and how to think responsively. (I am incredibly thankful to experienced users and CC staff for all the help they have given me.)

The journey to (1) thinking responsively and then (2) learning to use RLM and Editor to make it happen has been a long one. There are two large hurdles in the process of that learning. If you can make these two jumps, it will help you more easily learn to use RLM.


There are so many posts about this throughout the forums. It took reading lots of them plus playing with the CC responsive software (primarily MB and RLM) to understand it. The jump from static to responsive is a hard one to make. It's like culture shock -- moving from one place to another.

If you move to another country, the first thing you need to do is learn where you are and where to find the things you need. In the same way, learn what a responsive web site really is. It's more than just "a page that rearranges itself for display on a phone." Being responsive means that you purposely program the page so that always displays correctly at any width. Learn what that means, and it will help you better understand how the tools work and what you can and cannot do with the various tools.


If making the jump from static to responsive thinking is culture shock, then learning to use responsive tools is like learning the new language. Think of it this way. We have an English word "dog." However, in a Hispanic or Spanish country, they don't understand "dog." They understand "perro." In France, they understand "chien." (Please forgive me if I am wrong about Spanish or French. I don't speak either.) In all three cases, the people involved are thinking of a four-legged, furry creature that barks and is generally friendly, but if I say "dog" to a Frenchman, he will not understand what I'm saying. On the other hand, if I show him a picture and then say "dog," then he relates "dog" and "chien" and understands what I mean.

In the same way, make the transition to RLM. Here's an example. Before css, we applied backgrounds to pages by adding them in the <body> tag. Technology changed, and we made the jump to css and applied the background in the body style. So now, how do we make that same jump to RLM?

1. Recognize that, at its most basic, RLM is a visual stylesheet.
Thinking of RLM as a visual stylesheet is like your picture that relates the two languages. You know what a stylesheet looks like. RLM is just working with a stylesheet in a different language -- a visual language. This means that you can now frame your questions in a different way. Instead of asking, "How do I put in a background?" instead ask, "How do I access the styles for <body> in RLM?" More about this in a moment.

2. Recognize that RLM is a wireframe creator not a web page programmer.
Think of your web site like a body.

The web page itself is the skin that displays all processes that have happened in the background.

The server processes are like the brains and organs and all the processes that make the body function.

The CSS is the skeleton. Without a skeleton, the skin just falls to the floor like a limp balloon. Without CSS, a web page just throws everything up for display without regard to any order. However, with CSS, a web page displays everything in the proper place.

RLM creates that "skeleton," a.k.a. wireframe, on which you can hang everything else. It is NOT meant to create the "skin," a.k.a. the web page itself.

3. Learn what RLM does and does not do, then use HTML Editor to do the rest.
Let's go back to the the example of asking, "How do I access the <body> style?" This is a great example of the boundary between HTML Editor and RLM. Remember that RLM is a visual stylesheet. You can edit stylesheets with Editor. Therefore, you can do with Editor everything that RLM does. RLM just makes it visual and much much easier.

So where is the boundary between the two programs? If it deals with the CSS and the behavior of elements on the page, then RLM most likely does it. If it deals with the look of the web page itself (backgrounds, images, etc.), then Editor does it.

CC has gone "above and beyond," however, to include features in RLM that blur the boundary just a bit to help making editing even easier. For example, if RLM were soley for the wireframe, it wouldn't have you set background colors at all. You would not be editing text in RLM. You wouldn't put images in it either. However, CC has added features so that you can set background colors but not images in RLM. You can edit text. You don't put images in RLM, but you can enter the paths so that when you export, the images are on the page. These are extras that have been added to help users be able to cross from RLM to Editor and back more easily as they develop a web page.

Remember above about setting a background image for the <body>? RLM doesn't do it, because that deals with the look of the page. You set the background of the page with Editor by editing the stylesheet: body { background-image:url('images/pic.jpg'); }


First, understand the points above: RLM is a visual stylesheet that is meant to create the wireframe. Your html editor (or web page programming software) is meant to do the rest.

Second, learn how to use RLM itself. Follow the tutorial and simply learn to use the software. Experiment with it. Play with it. Don't look for what it doesn't do. Just learn what it does.

Third, learn to relate RLM functions and Editor functions. What you cannot do with RLM, you CAN do with Editor. So how do you know the difference? If you learned what RLM can do, then you also know what it cannot do. Therefore, do it in Editor.


Once you get used to doing non-RLM tasks in Editor, learn how to make the two work in tandem. Set up your web projects in such a way that you can make changes in RLM, re-export and keep going in Editor. "How do you do that?" you might ask.

Well, that's an involved topic for another day.
I provide personalized help for Coffeecup Users including training for Site Designer and Web Form Builder via Zoom.
Email me at or call 865-687-7698.

Did you know that Web Form Builder can be used for both simple and complicated forms and that it's not limited to the default fonts and buttons? Take a look at a form we developed for … ppingcart/

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.