As still a relative newbie, I was playing with my test site using Desktop-down design. I have just now read a forum response pretty much stating that one should now use Mobile-up as the default. I have no problems with the definitions, nor do I have problems with what these two options mean.

What I need to know is how to do a mobile-up design. Do I move the slider to the far left and start with smaller content there, then go to the next breakpoint and increase the size of objects as necessary for the new view? How does that differ from my current method of starting with large content with the slider on the far right, and using smaller objects as I move the slider to the left?

Am I completely off-base? Maybe I don't understand the definitions as well as I believe I do. Any help or enlightenment would be greatly appreciated.

Thanks,
Don

Which version of RSD have you got?
The reason for asking is, that in version 1.5 you work with a grid system called 'Coffeegrinder', and you have the option of choosing which approach to take (mobile first or desktop first). You need to make your choice right after having opened the programme.
In RSD version 2 the options are Bootstrap or Foundation grid systems, and they both start with mobile first.

The two approaches (mobile or desktop first) cannot be mixed. It has been explained very well here:
http://www.coffeecup.com/forums/respons … post272518

I just downloaded and installed the latest beta, build 2087.

You had replied while I was editing my post to add something...

Well, with the version you downloaded, you start from small, moving upwards.

The post you linked to was what I had read to initiate the original question.

I just opened a new project in the latest build. I have (Grid) Coffeegrinder DDP in the Layout, with no other options. I can find no option to select either of the options you outline. Where are they to be found?

I think I've found the option. I cannot just start a new project per the default start. I must open a "blank" theme, from which I can choose the Foundation or Bootstrap designs. If this is necessary, why doesn't RSD start with this as the option for a "new" project when RSD is opened?

More confusion for newbies without adequate documentation. It appears to be a great program for this design, but it is nearly impossible for those of us new to the program to easily assimilate what is required. If it weren't for me displaying my ignorance on this forum - something others might not want to do on a public forum - I don't think I'd understand half of what I've already picked up.

Thanks for your response. My above whinging aside, I really appreciate the assistance I'm receiving. I just wish the tutorials or instructions were more clear for us newbies. If you've "grown up" with RSD as it has matured, I'm sure most of what I'm asking is second nature.

As a synopsis: behind the scenes, the CSS code works "smaller first" for Bootstrap and Foundation, but "larger first" for the older RSD files. That makes sense. The mobiles (smaller) start with the small files, while the desktops (larger, cheaper bandwidth on the whole) sort through everything until they find what they want.

Now, a follow-up: The Foundation Blank Theme has its first breakpoint at 639 px. If I want to have a smaller "first mobile" will adding a breakpoint at 450 px be loaded first, or will it go first to the 639, and then to the 450? This would be counter-intuitive, but maybe there is no avoiding it.

Background to my follow-up: I had one of my guys do a table of the most popular present mobiles for screen resolutions from which I will choose my breakpoints. The vertical layout of several mobiles is much smaller than 639 px.

DonM,

Don't think in terms of specific breakpoints but about how your site looks as you scroll up and down through the breakpoints. Think of the breakpoints and a place to re-adjust your settings so your website is fluid all the way up and down. I hope that makes sense.

Just remember when working with mobile up when you change any style etc. it changes everything going up and doesn't change anything below the breakpoint you at at if you are not at the lowest breakpoint.

Don, I agree that it might be confusing having a theme open as default. So what you can do, is go to Files - New from themes, and then open the Blank category. In there you choose the framework you want to use, and click on Set as default in the bottom right corner.

If you want to start with a smaller viewport than what the defaults that Foundation and Bootstrap have, set a breakpoint where you want it, and then make sure the slider is to the left of that breakpoint when you start populating your grid with elements and design. As to loading; When a visitor to your site opens the pages, the view that is the most appropriate for the device the user is having will be opened. There is no sequence of what opens first, second or anything like that.

For now, do not worry about the stats of screen widths. That only thing you really need to know is that thinnest useful width is 320px unless you are going to design for a "smart" watch. Any breakpoint/media query under that is really not going to be useful.

Many people get hung up on mobile-first design. But actually, designing under the first breakpoint/media query in Bootstrap or Foundation is right at a tablet sized view, and one does have alot of pixels to work width. Making a lot of custom breakpoints is a pain in the butt really - so your goal should only to use them when your layout is truly gets broken and text needs fixing, while avoiding general layout or grid changes. The reason to use the built-in breakpoints for the Frameworks is for consistency. Each framework has special classes assigned to the breakpoints. This is more pertinent if you are handcoding, but it can still be used with RSD. For example, in Bootstrap 4, if I apply a Bootstrap class from the dropdown menu ".hidden-md-up" to an element, that element will have a display property of hidden for medium sized screens and larger - or at 768px and higher. So, its a good idea incorporate the built-in breakpoints of your chosen framework for your layout - and that does not mean your layout even needs to change at each breakpoint. Going from a 2 column to 4-column display 100 pixels away from a built-in breakpoint would not be a good practice to follow - it would be better to design for that breakpoint.

At the first breakpoint and smaller, changing text size, touch targets, images sizes would be breaking quite a few guidelines for usability. For example, text should never go under 1em, unless one really needs to. Google guidelines are that touch targets are 3em (or 4em?), nothing smaller. So at that first breakpoint for either framework, your elements should be about as small as they are going to get - because tablets are going to be held at the same distance phones are. So - here is where you just need to apply some savyness in how to you gracefully collapse your content to 320px - if you need to at all. There are many ways of doing that using a variety of CSS methods, and positioning - or just use a single column display for the user who is going to be thumb-scrolling.

Thank you all for your replies. I understand about the different classes, but I'm just doing a simple landing page for a blog/elearning/forum personal site, so they won't really come into play on this first site. I want it to be viewable and usable on all devices. Once I get it working on the landing page, I plan to go into the different sub-sites and make them responsive, as well. That's going to require that the interface is closer to second nature, and therefore my questions are geared to that end.

I will work with the 639 as a minimum. Is there a reason it is not 640? Does that mean that it will "break" above that and I am designing the "original" layout for anything smaller than 640? I guess it's the old "zero based" versus "one based" issue that programmers are always dealing with. As the previous sentence says, that's just my guess for an appropriate analogy for me to wrap my head around.