Getting started with a first attempt...

User 404575 Photo


Registered User
887 posts

OK gang. This is my first attempt ever, to use RSD. For my home based business page, I had Adam design it for me, and I've struggled and been able to maintain and modify it as needed, with RSD.

NOW, I volunteered to attempt to do a new basic page for The Universal Individual Rights Project. This is purely volunteer work on my part. Whew...

So for the last hour or so, I've been struggling to find out how to create the basic page. But it looks like one thing in RSD and quite different when I try to preview it in a browser, and I'm not sure why.

http://universalindividualrightsproject.org/JPG/The%20Universal%20Individual%20Rights%20Project%20in%20RSD.jpg

http://universalindividualrightsproject.org/JPG/The%20Universal%20Individual%20Rights%20Project%20in%20Preview.jpg

Melissa Rhiannon
OS Windows 10
User 103173 Photo


VP of Software Development
0 posts

That is because you are working within a breakpoint (1571px). Look at your screenshot and right on the border of the right hand pane, you can see a breakpoint is selected (1571px). This means those styles will only appear on that breakpoint and below.

To fix this, move the slider just to the right of that breakpoint. That is where you should have applied your first styles. Then slowly move the slider to the left and as your content breaks, add another breakpoint and set your styles. Rinse and repeat. ;)

Also, that first breakpoint is at 1571px which is extremely high. Slide that over to around 1024px.
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
User 404575 Photo


Registered User
887 posts

I see the slider now, and think it bit me once before, on one of my first attempts. I'm just not even sure what you mean by setting my style. I haven't the foggiest idea how this thing works yet. Sorry.

But my first image, where the photo shows, is on the RSD screen, and the second one is what it comes up looking as, on the browser screen when I preview it. I wonder if it's because my monitor is 24".

I guess there cant be any simple instructions on how to use this program, because it's so robust.
Melissa Rhiannon
OS Windows 10
User 103173 Photo


VP of Software Development
0 posts

Melissa Rhiannon wrote:
I see the slider now, and think it bit me once before, on one of my first attempts. I'm just not even sure what you mean by setting my style. I haven't the foggiest idea how this thing works yet. Sorry.

Styles are everything from padding and margins, to using Flexbox and alignments. Even adding images. You added a picture element to your page but when you changed it from a placeholder image to a real one, you did that on a breakpoint. This is why you see it one way in RSD and another way in your browser. You can fix that by following my instructions in the last post.

But my first image, where the photo shows, is on the RSD screen, and the second one is what it comes up looking as, on the browser screen when I preview it. I wonder if it's because my monitor is 24".

That is because you are working within the breakpoint. It has nothing to do with your monitor being 24". You could have a 75" monitor, but the same process applies.

I guess there cant be any simple instructions on how to use this program, because it's so robust.

There is a ton of information. ;)

Personally, I think the video tutorial article is the best way to get a good understanding of how the software works. It breaks down the design of a complete responsive page into 5 steps. These instructional videos can be found at: http://www.coffeecup.com/help/articles/1449

We also have a step-by-step article that walks you through converting a non-responsive theme into creating a full page, responsive design. This is great for getting hands on, practicing using the controls. http://www.coffeecup.com/help/articles/1481

You can view the Help Guide here at http://www.coffeecup.com/help/articles/ … -overview/ or the Help index http://www.coffeecup.com/help/articles/ … lp-manual/

Just a plethora of info at your fingertips. ;)

While the designs above may not be what you envision for your new website, we highly recommend reading them both from start to finish as it will give you the foundation you need to be successful with this app. Then you’ll have the knowledge you need to breeze through your own custom design, or to modify any of the pre-loaded themes.

The Quick Start tips also make a great reference while in working mode. It includes the top FAQs for using the app. http://rsd.coffeecup.com/tips-v09.html#toc-header

If starting from scratch is too difficult, you might want to just use one of the themes that come with RSD and customize it to fit your needs. Then as you learn how the software works, you could tackle a site from scratch.

Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.

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.