Such is the importance of Fixed Width, when you apply this setting the Fixed Width Frame lights up in Mustard.
This gives your content team a clearly visible bounding box, no matter if they are working on a large desktop or a small laptop, they will have an indication of the maximum width of the screen.
Fixed Width is rarely used on the Outer Frame, it's most often used on an Inner Frame.
The Outer Frame is often used for background colours, background images, and Padding. By setting a Fixed Width on an Inner Frame, your colours and images in the Outer Frame can span the full width of the screen, while having a nice contained reading pane in the Inner Frame.
Notice that the Outer Frame is in a Bold Mustard colour. As soon as you apply a Fixed Width to an Inner Frame it becomes a light Mustard colour giving clear distinction for simple editing.
Avoid using Padding on the Fixed Width Frame, use the ‘Width %’ instead.
It's always a good idea to apply Padding on the Outer Frame. This is so your Tablet and Mobile screens will have nice padding, and not bleed to the edge of the device. Often designers on Desktops and Laptops forget to design for Mobile and Tablet users, and have to go back and add padding later, don't fall in to this trap, make it the first thing you do, and try to keep the Padding in the Outer Frame consistent across all the Layouts on your website. This is because your pages often have more than one Layout. Therefore, more often than not, you want your Layouts to look consistent on all devices with nice even Padding as you scroll. Therefore, do not be tempted to add Padding to the Fixed Width Frame, if you do your Mobile view will have extra padding.
Also, if you want your Layouts to be thinner that 1280px on Desktop, then use the Width % tool to make the reading pane your preferred width. This is because Width % is only active on Desktop, it’s not active Mobile, and therefore you can have both the width you desire on Desktop, plus nice consistent Padding across all your Layouts on Mobile. Your design will just work, and your content team and enjoy your Layouts, without having to modifying anything, or mess up your beautiful work.
Use Margin in the Fixed Width Frame, when your Layout needs more padding.
Sometimes you want to use extra Top Padding to give nice negative space between the Layouts on your Page. Notice the Padding tool only goes up to 64px. Why? These options ensure your Layouts always stay consistent, and keep your entire content team on track. Imagine if they could just type in any pixel width. It wouldn’t be long before your beautiful design got messed up. Guaranteed! Therefore, sometimes you might want a very specific height, greater than 64px. For this we use Margin.
Now, as a rule of thumb. Don't apply Margin to the Outer Frame. Why? You’ll notice that the Margin applies to the outside of the Frame, therefore, it won’t retain the properties of the inside of the Frame, such as colour, and will present as white space. Therefore, it’s best to apply Top and Bottom Margin to the Fixed Width Frame, this ensures your Layouts can have the exact Pixel Height that you desire, and you can set this bespoke Height for both Mobile and Desktop.
By applying Margin to the Fixed Width Frame your entire team, even future team members, will know exactly where to find it, should they need to make edits to your design, long after you’ve handed it over and moved on to other projects. By editing in consistent ways, your page will naturally have less markup/code and will therefore load faster. This is another reason why we put such importance on the Fixed Width Frame by making it a defined Mustard colour. Designing in a consistent way across all your Layouts and Projects, always makes for an intuitive handover to your client or content team. Plus, you’ll have that all important peace of mind that your Layouts will always remain beautiful and consistent, long after you've moved on to even greater things.