I am getting started in RSD and read in an article that it would be good to define the smallest screen settings first because that will improve load times to mobile devices, a worthy goal. At least that's what I thought it meant. So, I did that and set up my first page defined at a small screen size and it really came out pretty well. Then I realized a flaw in the process that several threads have discussed. Configurations at larger breakpoints cascade down to smaller sizes but smaller breakpoint configurations do not travel up. Result, the rough data is there at the larger breakpoints but only in the original unformatted state. Ohhhh, not pretty and lots of work to reconfigure everything. OK, I get that it makes some sense. I am still in the "playing with things" stage so I have no problem reworking from top down. As others have commented, that seems more natural to my thinking anyway. However, does that compromise the original premise that starting small gives better loading in mobile devices? If so, how do I get the best of both worlds? Or is that for the future? Or have I misunderstood the original concept?

Hey Jeff,

Seems you're actually grasping the concept pretty well! There's just a little of getting used to things, let me try to summarize.

1. Developing Mobile-first has several advantages, and it used to be that when for example background images were loaded only the small mobile images were loaded on mobile screens. In contrast, when developing desktop down both the large images and small images were fetched. We happened to have done some research on this topic recently and this does not seem the case anymore, if you specify a different image at a lower breakpoint, only that image is fetched by the browser. Mobile-first development does make sense still because with little room available, it forces you to focus on the most important aspects of your message / design. However, as you said we noticed this does not come natural to many people, they like to design by reduction or as we call it 'Content-first'. That means all relevant content, prioritized so the most important is easily available at the top (of a mobile screen) with links to more details.

2. When you start your design you can choose both from mobile-first and desktop-down frameworks. Your remark that "Configurations at larger breakpoints cascade down to smaller sizes but smaller breakpoint configurations do not travel up" holds true when working with a Desktop-down framework (most of our themes use this approach btw). However, when using a Mobile-first framework the style 'trickle up' and changes apply only to the right of an active breakpoint (versus on the left when designing Desktop-down).

Hope this helps

Thanks. This was VERY helpful.

Since the image management is now better on mobiles, the "penalty" of extra image downloads no longer exists if I start big. Thus the only consideration is forcing myself to start small to maximize design of priority content for precious screen space and let the design flow bigger from there. However there are other ways to approach this, by prototyping small, for example.

When you talk about using mobile first frameworks, you are talking about RLM only (which I do have), correct?, since RSD can only use CoffeeGrinder. I recognize that a RLM layout can flow into RSD but I can't start with a mobile first framework in RSD?

Thanks again.

Yes, just make sure to swap out big images for smaller ones at breakpoints though. Suzanne wrote a great article about this: http://www.coffeecup.com/help/articles/ … e-element/


You can start a mobile-first design in RSD — Coffeegrinder comes in 4 variations. There are 2 Desktop-down frameworks, one using pixels and one using ems as measurement. There are also 2 Mobile-first frameworks, with the same measurements. You can access them from the file menu and choosing 'new from'

Perfect. Thanks!