Hi everyone,
I'm Anne, Hans' wife. We're working on a new responsive site. I started learning RSD in the new year.
Before RSD, I worked with FrontPage to build a static sample layout of the new website here
http://www.jewelry-tutorials.com/

So far in RSD, I have worked on and published the layout of the homepage
http://www.meevis.com/hair/
I completed the index.html up to the 335px breakpoint - then working on the menu bar to merge columns (as shown in the Kit&Kat tutorial)
That change affected the layout to the right of the 335px breakpoint too.
This is the responsive homepage, before I made changes to the menu bar at 335px breakpoint:
http://www.meevis.com/hair/index_1.html

1) What am I not doing correctly with merging columns at a breakpoint, that would affect the layout to the right of that breakpoint?
2) Do breakpoints apply to all the pages on the websites or can each page be governed by it's own breakpoints?

Question 2 refers to the secondary page duplicated from the index page and then re-designed, which has all the same breakpoints as the index page
http://www.meevis.com/hair/jewelry-maki … -list.html

Thank you in advance,
Anne

Hi Anne, I'm very new at RSD also. It sounds like you did exactly what I did the first time I used RSD. I've learned that it's better to start with the larger screen size before you start adding breakpoints for small screens. That about sums up any wisdom I have to pass along so far! Luckily there are users in the forum that will be able to help us both and I'll be reading their answers to you. I will say save versions as you work so you can always go back to a previous version. My last attempt was up to whateverName13!! Saving versions as you go along gives you confidence to try new elements knowing that when you make mistakes you still have a clean file you can open to start again.

Hello Anne, happy to help!

On 1: Breakpoints are CSS rules that can be used to make changes to the styles. They can not be used to change the content. Merging columns is a change to the HTML structure (content). Not exactly sure what part of the Kit&Kat tutorial you are referring to, but it is likely that you saw a span-width change (a change to the applied CSS).

Karen has a good point when she says to 1st complete a design‚ to start with the message and content, before adjusting the layout for different screen sizes. Maybe follow along here where that approach is used first?

On 2: Yes, you will find the same breakpoints back on other pages and they will apply the associated style rules for all elements of the same type or class.

Hope this helps!

When you have a large display with 4 columns side by side in a row and you want to add a break-point because the image is breaking or some of the columns content is getting chopped off or it is getting moved down below. At the break point you add a break point and set the spans from 3,3,3,3, to possibly 6, 6, 6, 6, then you will have two rows of 2 columns then after sliding the slider further on down later and the page breaks again then set the spans to 12,12,12,12, and you then have 4 rows of one column, so that you can display it all on the narrow device screen. I have not played with the new flex yet so I am not talking about that here. You may have to set margins and padding, and position settings for each break-point to compensate for changes. It is important to know where you are all of the time in regards to what row column or element, I go to inspector and click on a listing and look at the color display to make sure that that is what I want then i double click on it and it brings me to the design setting where I want to make changes. I can use this system to logically methodically work my way up or down through the settings and make changes. Going back and forth between the inspector and the design pains settings.
It is good to be able to set things to auto then they tend to set themselves on the next break-point. I am speaking generally here. Sorry if this is all wrong, it is what I have been doing...

Anne, Hans –
The soon to come RSD version 1.5 has Flexbox positioning built in. This would allow you to have your site-wide breakpoints, and separately control what happens with your class-list items (or any other sections). You can even change the order in which items are displayed.
Here's a good intro: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

RSD + Flexbox = easily "responsify" just about any layout you can come up with.

Hi,

All your responses have been very helpful. Thank you.

From the onset, I started from a large screen working my way down adding several breakpoints, which worked well. Only on the small screen the breakpoint was problematic - following the Kit & Kat Menu Bar principle by merging columns (For adoption, More info, Contact us). Instead of merging columns, GregB came up with the solution to extend column span. The menu bar then displayed as intended on small as well as large screen size.

Bob, thanks for your answer on breakpoints applying to all pages. Perhaps, I should re-think the starting point of building a RSD website. Maybe best is to focus on the layout on all four main pages on the large screen, then add breakpoints and only then work on content. Would that be a better method then completing working on each individual page?

Thanks,
Anne

It's kind of awkward to plan breakpoints without having your content in place. It can be done, but you'll find yourself trying to make the content fit your layout –rather than creating the best layout for your particular content.
If you already have a good idea of what you'll need on each page, you could do a 'generic' layout to fit that content into and just tweak the finished pages as needed.

If you've looked into Flexbox, then you can see how you could have one overall breakpoint plan for all pages, but let Flexbox handle certain content blocks regardless of where the page 'breaks'.

That's pretty spot on Paintbrush

I would get all my content in, prioritize and organize so it reflects the message of the site with very limited design (what comes 1st, what elements should be closer to each other, what text is big, what is small, what is associated by proximity ect — tell the story with limited decoration basically). Then support the story using design layer (colors, background images, colors, etc).

Finally make sure the authentic story and design look good on all devices by changing the viewport size, adjusting the layout (e.g. making columns wider and/or make them stack) and element sizes (e.g. decreasing header sizes) wherever needed.

Tip: doing a mobile first design will really force you to think about your content first!

Bob and paintbrush, thanks for your guidance. Your suggestion makes sense. I downloaded Flexbox. This is very exciting!