How to make robust layouts that can endure change

I've updated the FAQ to provide tips on creating layouts. I've excerpted the relevant section below:

Q: What is the stylesheet used for RPR?

A: Stylesheet

Q: How can I build robust layouts that can endure a stylesheet change?

A: The primary way to ensure that your layouts survive any site style changes is to specify styles within your markup yourself and not depend on the site defaults. For example, say that you like the font "Helvetica Neue" which happens to be the site default so you decide not to have to specify it in your layout. A few days later, "Helvetica Neue" changes to "Arial" and now your layout uses Arial. To ensure that your layout is protected from changes like this add the "Helvetica Neue" style to your tags. If only certain paragraphs use "Helvetica Neue" then do <p style="font-family:Helvetica Neue"></p>. If your entire layout uses "Helvetica Neue" then wrap your entire layout with a div and do <div style="font-family:Helvetica Neue">[your layout]</div>.

The usual culprits in layout breakage tend to be line-height, width, margin, and padding. For example, the default line-height for RPR v1 was 1.5em (which was actually an incorrect way of doing it). The new default for RPR v2 is simply 1.5. This will most likely not change in the future since it's a standard but if you want to safeguard against it anyway, wrap your layout in a div and add the "line-height:1.5" style to it. The main takeaway is that the more the layout details are specified to be less reliant on the site defaults, the more that layout will be protected from future changes. Note that multiple elements can have different values where "ul" elements can have different margins from "p" elements so ensure you specify styles for separate elements.

In regards to widths, I do suggest that layout coders learn to use percentages (e.g. width:100%) and to learn to design layouts that will look good on both desktops and mobile screens (usually around 320px width). Most site visitors these days are on mobiles and it is bad form to make your visitors scroll horizontally to see your content. When it comes to specifying sizes, I also recommend em rather than px so that your text and content can adjust itself based on the visitor's viewing preferences. We are not a layout site so it's not our primary focus and are unable to provide further advice on code markup but if you want to learn more about how to layout modern responsive sites, check out this tutorial at w3schools or learn more about css layouts.

Lastly, don't use the toolbar editor if you actually want a layout that is fully in your control and within your understanding. Toolbar editors were meant for publishing text articles and aren't great for making complex layouts since they tend to generate sloppy and verbose code. You're better off going into source mode and specifying your styles yourself. If you want to experiment on your markup and understand the underlying styles of your elements quickly, use Chrome's inspect element feature or get Firefox's Firebug extension.