Good Morning,

I have multiple questions that I need answers to before I can continue working on my website. I had been using Visual SIte Designer for years up until you discontinued it - with great success. I loved that program! Now, I am finding RSD extremely frustrating and frankly, I am ready to give up and toss the program in the trash. Can you PLEASE answer the questions below so that I can get my updated website onto the web? Please realize that there are users of your program that are NOT web site developers and need basic level info. I am very good at what I do for a living but this program is really making me feel stupid.

1. There are 8 breakpoints showing on the screen when I am working on the site on my large desktop screen. Can you please tell me where I should place these? How many should I eliminate? And, please do not tell me that you cannot say exactly because there are so many screen sizes. There must be a basic standard rule.

2. I have loaded RSD onto my desktop and laptop computer. When I use my laptop, I get an error saying that not all of the breakpoints are visible and that I need to grab the app and move it to the left - this does not seem possible. How does one do this?

3. I worked for several hours last nite on my laptop doing changes to my site. Both when I previewed the site on my laptop AND when I looked at the file on my desktop, the changes that I made were not there. I changed fonts, colors, added picture place holders with captions. The changes were only visible on my desktop when I slid the break point slider to what seemed to be the same place as my laptop. Do I have to redo all of these changes for all the different breakpoints? I understand that I will have to change the column span widths at the different breakpoints, but to also have to redo fonts and colors as well??? That's like making several different websites - seems crazy inefficient! Is there a way to rectify this?

Any help would be greatly appreciated - I am worried that I am going to do all of this work and then the site will be all screwed up when I upload it to the web.

Good Morning Also from Sunny Bali,

To try and make things a little clearer for you there are a couple of things one needs to know about your project before one can offer any help and advice.

1/ Are you working your project "Desktop Down" or "Mobile First" ?

2/ Who put those breakpoints there in the first place ? (one assumes you are using a template for your new project, in which case which template are you using).

I can however answer part of your questions,

2. I have loaded RSD onto my desktop and laptop computer. When I use my laptop, I get an error saying that not all of the breakpoints are visible and that I need to grab the app and move it to the left - this does not seem possible. How does one do this?

to see the hidden breakpoints on your laptop (or indeed on the larger screen for that matter if there were any)

look at the top left of the bar above the work space, next to the + & - thingies for the adding & removal of breakpoints, there you will see a + & - zoom control (magnifying glass icon) with the % value of the view in-between, on your laptop if you then use the - zoom control to reduce the size of the working canvas, until the hidden breakpoint comes into view. At which point you can either work away and make changes to your hearts content, or move the breakpoint until it is at a point where you can see it once you go back to 100% view by using the + icon for the zoom. (although that seems a long way round it would be simpler to just move the breakpoint on your desktop (assuming you can see it) to a point where it would be visible on your laptop.

Breakpoints are one of the hardest things to get your head around, you ask about how many you should have and where, and you want to be told where to put them, but you don't want to be told that one cannot say because there are many screen sizes out there.
Unfortunately one cannot say where you should add or remove (in your case) breakpoints. What you have to try and forget about (and this is the hardest thing for a lot of people to get their head around) is the pixels viewports of all the many devices out there with so many around it is impossible.

There is no set formula or way, what you have to do is look at your design, from a viewers point of view, starting from either the largest view (Desktop Down) and moving the slider to the left, when it starts to look like the design is getting squished or doesn't look right from a viewers point of view, you change the design (column spans, flexing, hiding stuff, changing images etc) so that it looks good again, at that point you add a breakpoint, then continue down (left) until the design breaks again, and you change it again until it is looking good again, add another breakpoint etc etc, until you get all the way down. Working this way all design changes that you make stay with the last breakpoint you created, down to the next one you create.

Mobile first is the other way around (obviously) starting at the smallest viewport, and sliding to the right, adding breakpoints wherever needed. This time all the design/style changes you make stay with the last breakpoint UP to the next breakpoint you create.

So what you need to try and do is stop thinking in sizes of devices and start thinking in DESIGN mode. (RSD & FF then take the hard work out of the coding at different points for you leaving you free to concentrate on keeping your design looking great.

As for your last point, I suspect that you didn't make those changes to your design, at the largest breakpoint (the hidden one or even two) in which case you would have to apply the latest style and design changes you made at that breakpoint for it to show up at larger viewports (desktop).

I am still wondering however where all those 8 breakpoints came from in the beginning, the problem being if it is a template or theme you have used, it will probably mess up your whole design if you start moving or deleting them.

One normally would start a new project with no breakpoints at all, (except for one breakpoint at a size comparable to your laptop viewport, such that if you did work to the design on the laptop, then all changes above that breakpoint would be visible on desktop (larger laptops up to huge monitors)

Hope that goes a little way to helping you through your frustration, (although probably not what you wanted to hear)

Persever, and try to let go od thinking in sizes, and start looking and thinking in Design Mode, and you will reach that orgasmic AHHHHGH moment, when all falls into place.

Wayan

This is a handy multiple viewer website that has been helpful to me. It also took me awhile to find the (-) ZOOM fix to show all breakpoints upon startup. http://quirktools.com/screenfly/

Wayan is right. Hang in there and there will be an AHA! moment when it comes together.

Regarding 8 breakpoints, I'm guessing that you either didn't realize you added them or you started with one of the templates. There are two aspects here that you need to understand about breakpoints.

1. How to set them (which will answer where to set them)
2. Why you set them (which is what you need to know)

HOW TO SET THEM
I once asked the same exact question. After reading quite a bit on the web, I understood why one person said that generic breakpoints could be:
320px for mobile
768px for tablet
1024px or higher for desktop (I suggest 990px or 1000px instead)

I've been doing responsive sites with RSD since it was released. Three weeks ago, I did a site with a client who was using an iPhone 5 to look at the site. I have a 6sPlus. It looked fine on mine, but didn't look right on his. That's because of the size differences. 320px is now smaller than the iPhone and 768 is bigger and you have multiple sizes of iPhones. Therefore, though you don't want to hear it, there is no definitive answer because there are so many devices.

HOWEVER, there is an easy way to know where to set breakpoints. This assumes that you are designing for the desktop first and then will adjust for mobile.

1. Remove ALL the breakpoints. (Recognize that if you are starting with a template, this will undo all changes made at each breakpoint you remove. Therefore, save your project under a different name so that you have your original in case you need to go back to it.)
2. Design your page just the way that you want it.
3. Slide page-width arrow to the left until something on the page does not appear correctly.
4. Add a breakpoint and then make adjustments to the settings of the various elements on the page until the page looks good.
5. Move the page-width arrow to the left again until something does not appear correctly.
7. Add a breakpoint and then make adjustments to the settings of the various elements on the page until the page looks good.
8. Continue this process until you have moved your page-width slider all the way to the left.
http://uscni.coffeecup.com/img/setting-breakpoints.jpg

WHY YOU SET THEM
I understand the need that a person who is starting out feels to know specific breakpoints. I was there at one time. Responsive programming is different than what you did with VSD. In VSD, everything appeared on a specific place on the page. Because of device sizes, that won't work anymore. Your site needs to be fluid which means that elements on the page can move around to fit the device that is looking at it.

In order to have a page that truly looks good on any device, designing is not about choosing breakpoints and then making your design. Make your design first. As you use the slider, set the breakpoints to allow you to fix the appearance of your page.

The previous instructions are correct, but I thought I'd add a picture to help.
http://uscni.coffeecup.com/img/hidden-breakpoints.jpg

All you need to do is click the magnifying glass with the minus sign until you can see the breakpoint(s) that were previously hidden behind the settings panel. You are now ready to either work on the large breakpoints, remove the breakpoint, or move it to the left so that it isn't hidden behind the panel.

Click the magnifying glass with the plus symbol to return to normal size. The percentage that appears between them will let you know just what size you are seeing.

I am assuming that you are using a desktop down design. That means that you are designing your site for the desktop first and then make adjustments to breakpoints as the screen width gets smaller.

What happened is you made the changes to a particular breakpoint. That means the breakpoints at smaller widths will have those same changes, but the breakpoints with larger widths will not.

- When you want to make a change that applies to all the breakpoints, make sure you move the slider to the right of all the breakpoints so that your changes are made to the largest size.
- Those changes will remain the same for smaller breakpoints.
- If at a smaller breakpoint you make another change, that setting will remain the same for all breakpoints smaller than the one where the change was made.

DO I LOSE ALL THE WORK I DID?
Not completely, but it's a pain to undo what you did. #1 may be the easiest way to deal with it.

1. Go to the largest breakpoint and make all the same changes you did previously. The downside is that if you make a settings change at the larger breakpoint that you want duplicated at the smaller breakpoints, you have to make the same change at the smaller one where you previously made settings changes.

2. Reset the css settings for the elements you changed. To reset a css setting:
- Select the element
- Choose the "Apply to" that you want to reset (Type, Class, or ID)
- Click the circle arrow.
Once you reset it, go to the largest breakpoint and redo the changes at that breakpoint.
http://uscni.coffeecup.com/img/resetting-type-class-id.jpg

A WORD FROM EXPERIENCE
Each time you save your RSD project, do a "Save As" and give it a version name. For example:
myproject_v001.rsd
myproject_v002.rsd
myproject_v003.rsd
myproject_v004.rsd
and so on. That way, if you make changes and need to go back to a previous version, you can. I suggest that you save often, not just when you are finished working each day.

Thanks everyone for all of the great advice. I think I am finally turning the corner on understanding what I am doing. I appreciate you all taking to answer my questions.

Thanks again,

Pati R.