I’m having a hard time conceptualizing how to set margins and padding to create correctly formatted and aesthetic pages/sections. Even with practice, I am still finding this difficult. I am looking for advice or additional practice, something to help me better grasp this as it takes me a long time to get work done. I usually have to look at other site’s code to get it right, but don’t feel like I am learning as I am essentially just copying what was previously done.
One of the hardest things for new learners to grasp is the separation of roles between content markup structure, presentational rulesets, and interactive behavior. They are all completely separate.
In their enthusiasm for creating something that looks cool, namely setting aesthetics as the primary goal, they tend to ignore the fundamental value of document structure and its outline, which has nothing whatever to do with presentation, apart from page order.
We have been advised of the importance of starting with a ‘wireframe’ (aka, a sketch of the page layout) and even shown how to do it in one of the HTML units. Unfortunately it is still not sinking in how important the HTML aspects of the design are to the success of the whole.
Authors know their document. They can outline their document, which probably started off as an outline, to begin with, as most essayists will tell us. With that intimacy we can now envision how our page will be arranged, and what containers will be needed to fill in the layout. This is where we begin, using HTML and maybe temporary borders on every container so we can see where they are when we open the basic file in the browser.
You see where we’re going with this, right? We’re already conceptualizing, albeit only at the fundamental stage, setting the foundations. At this level we don’t care about looks, only inclusion of all our content and where it is structured into the page.
Let’s go right back to the first day of learning HTML, on the assumption that we are already familiar with essay outlines, and other forms of document structure (minutes, journals, academic papers, business letters, etc.) and able to break out content into separate pieces and order them accordingly with their own containers.
We can assign importance both by order, and by hierarchical means with headings and sub-headings, sidebars, foot notes, etc. That is where our wireframe fits in since it shows where each container will eventually be positioned in normal flow. At this point we just want to have all the content marked up and presenting in the browser.
Now we are ready to start setting the width of our containers. Are they meant to be full width, or partial width sharing the same horizontal baseline? What role do they play, as in, is it content, or user interaction such as navigation and call to action buttons, etc.? Role is a serious concept and one which is in the forefront of layout design.
Okay, so you have some content in an exercise. Can you copy that content over to your text editor (just the content, not the markup) and create an outline, on paper? This is a fundamental skill to develop from day one, if it has not already been drilled into us by our language arts and social sciences teachers. Use it, and develop your own document creation protocol to follow from the start of each new project. Become an expert outliner and all the rest will just fall right into place when it comes to how each new document is structured.
The concepts just roll out and mesh with one another in time. If you want to practice anything, right this moment, it is learning how to outline, and organize. Structure is everything, and not something we should skip learning in our effort to get at the sweeter fruit. Everything in good time.
It’s not really the overall schematic conceptualization. I have that and the format I want. My issue is trying to figure out a way to set the width/margin/padding in a feasible manner and in a way that aligns with best practice. For example, I set up most of the “Website Design System” project correctly with few issues. It took me longer than I wanted to get the margins and width correct and I had to reference the example. In addition, I am concerned that the way I set mine up is messier than I’d like and inefficient.
Setting expectations too high does have its drawbacks. We set goals too far ahead. Adding the encumbrance of ‘best practice’ only compounds our expectations, which can be unreasonable and arbitrary. This is stifling and undermines our freedom to be creative, and our freedom to explore and push the envelope. Take a step back from all expectation and only look at what you have in front of you, and how you wish to organize it. The author is in charge, every step of the way.
Margins are very easy to work with, but padding is a nightmare waiting to happen. It has a place in layout design, but it reeks havoc on responsive design so needs to be carefully monitored in all media queries. To be honest, I have a complete hate on for padding and never implement it. Margins and width are my friends, add to which is placement and positioning.
If multiple sections are in a wrapper div (section, article) then we can apply equivalent rulesets to the grouping. The containers give us structure that can be isolated and styled accordingly.
We will wrestle with multiple paragraphs directly in the body, but in a sectioning element they are easy as pie to manage. Same applies to structures like lists, tables, forms, etc. Give them a parent container and they become infinitely easier to maintain.
Once we have structure under control, it is pretty straight forward work to design the CSS rules governing shape, size, presentation, position, etc. We work from the outside in, which the direction of our cascade. There’s the huge word that just begs for explanation in greater detail. Do the reading and drill right into the key concepts of the style sheet API, CSS.
When we are building our structure we seldom think in terms of parentage, but in CSS everything follows from our initial structure which is the framework of the DOM. What is the cascade? What is inheritance? What is importance? What is specificity? These questions are all significant areas to study and understand, before wrestling with CSS rules in your page designs.
Bottom line, one’s understanding of the earlier mentioned fundamentals of structure, and the above core concepts of style sheets will demonstrate itself fully in our outputted works. Expect things to be messy at first. We cannot break anything, and there are very few rules to this game. Creativity is the boss, and we extend that by our fluency in document creation and transmutation using the development APIs of the browser.
If you have some CSS and HTML for us to look at, we might be able to address your question more directly. Take all the above in stride and be your own guide as you learn from others. You get to decide what is best practice.