Hey Ian,

Don't think of it as building a website and setting break points for different screen sizes. I used to think of it that way too.

What you want to do is think of it as building a website that doesn't break. When designing in rlm I start of with my full site. Once I am happy with the layout I start moving the slider to the left until my website "breaks" then I add a break point and adjust the content and layout to look good again. Then when I'm happy again I continue moving the slider to the left and so on and so forth.

When I get down to about the 480ish veiwport I start thinking mobile layout and what I want to see when my website is viewed on a table or smart phone. I try to hide alot of the wow galleries and videos to let my site load faster and have only pertinent information available so my clients won't have too scroll endlessly to find information.

Designing this way will help future proof your website so it will work on any screen size!
Hope this helps

It would be up to you Ian how you work, but the RLM is for prototyping. I've built 3 small sites with this tool now and finding 2/3 sites easier with mobile first approach, but it's personal preference. I never thought my brain would go that way after designing the other way for so long, but it's quite liberating

Ian, I checked your code and must say that the solution for a hand coded calendar is very clever (and I've seen much worse!)
If you want to avoid the dates running out of the months at a small viewport, you could always float more columns.

Thanks very much all of you for for your replies, Inger, thanks for your kind remarks. However I don't think I can have more columns as such, because I didn't use RLM at all in the process. Each table has its own division and I don't see how to have more. What I COULD do is to recreate the framework in RLM and use that. However, unless I'm entirely mistaken the only real problem is with viewports of less than 480px and I could manually use the well documented media query "@media only screen" for viewports less than that to change the font size for the text in each table cell and to "clear: both" each division so that there's no "temptation" to make a div too narrow.

I take G'kar's poiint about prototyping. My rusty old brain is so stuck in the sort of design groove that I got used to, that it's hard to get away from that pattern of thinking, So at least I've finally understood just about WHERE I have to start. Now to try to work out how to do it and perhaps why to choose what option.

Steve, I'm glad that you too had to re-learn how to design, not because I am glad you might have found it tricky at first but because it confirms that I've got to unlearn first. What I'm trying to do is to learn how to predict what I'm going to need long before I've started working with "real" text. So.. in my occupancy chart, one "fact" I can work with is that I need to divide part of my prototype into 12 (each representing one month). I'm not sure whether I need to do this as one, two or more rows. My first working framework in RLM used 4 months max per row, so I divided a row into 4 columns, with a header row, a "prices" row above and a footer row beneath. I now need to play with breakpoints around 480px to see how best to deal with it.

Ian,

Since the calendars start to look a bit 'squashed' for widths far above 480px, you may want to go to three per row already at (e.g.) 700-800px.

How about something simple like this as a first cut:
Change this:



to this:

Modify break points and percentages to your liking!
Also modify the responsiveness of your Légende to make better use of the space available at smaller widths...

Ian,
To make for smoother transitions, you may want to try this instead:

The above adds a break point at 1100px to allow for six months per row for large widths. I skipped the intermediary 'five per row' to avoid the two lonely months on the last row...

The display:none doesn't prevent loading of content. It only prevents the rendering of the content. So you are correct that the site will more then likely load faster but the difference will be unnoticeable. The display:none is not a replacement for sound design practices with keeping file sizes as small as possible.

Ian, I was actually thinking along the same lines as Per.

But if you want to use RLM, I think I would make a grid of 28 spans (4x7), divide them into 4 (4 months in a row), and then in each month column put a subgrid of 7 small spans for the days of the week and the dates.

Then use Per's advice about breakpoints, and adjust the month columns to take up more width (%-wise) until you get down to a viewport around 400px, where you let a month column take up the full width.

You could, for example, simply change this:

to this:

This will prevent the Légende from unnecessarily shrinking and increasing the number of lines.
If you try these quick and simple mods (including the most recent version I suggested for .mnth), I think you'll like the way it comes out!

@Inger: Since RLM is a wireframe Layout Maker, I don't think it is needed for this particular page since the layout is already done...

Ian,

The mods/additions I suggested for dispo.css are incorporated in this test page, if you want to have a look:

http://www.mingas.com/test-souvigne.html

(to test it, drag the edge of the browser window between narrow (abt 300px) and wide (>1200px or more))