So, I’d like to start up a discussion on tips and tricks. Mainly to figure out what everyone is doing to keep spacing consistent throughout their websites. I am a Graphic Designer first and foremost, so layouts and keeping consistent spacing is key for me. I just started building websites and I’m getting very frustrated when things aren’t working correctly. For example: I’m trying to make all of my sections with a title that stays in the same spot every time. Underneath that title, I have a paragraph and an image side by side. When I go to tablet, getting those to go from side by side to one above or below the other seems like a chore. I feel like I am just building this incorrectly and making it harder for myself because the basics aren’t there. Can anyone give me any tips and tricks to help me get my websites built?
I would suggest practicing more with grids. Using a grid you can have (for example) 4 across on desktop, adjust that grid to 2x2 on tablet, and adjust it to 4 down on mobile. Or whatever variations you want, but if it is setup properly from the beginning it makes it easy to adjust for each breakpoint. You also will want to pay attention to how the elements inside the grid are positioned, docked, and sized as that will all make a big difference as well.
Thanks. Yeah, it seems like when I use a grid, it looks great on desktop and then when I try to shift it for tablet, it is already a mess and it is hard to get it to look how I want it.
I agree with @wcavataio about grids, and I also like his choice of words: ‘practice’. I think grids become easier as you gain experience.
Since you’re a ‘designer first’, I suspect you’ve got your design planned out before you start laying it out in Editor X. If that’s the case, here’s something that works for me:
I plan my grid layout for each breakpoint in advance, and, when I apply a grid at the desktop level – and before I add content – I go immediately to the other breakpoints and adjust the grid as needed. It’s really easy to do them all at once, because you can change breakpoints without leaving the ‘Adjust Grid’ editor view.
Sometimes, when I lay out my grid, I also lay in some different-colored containers to represent elements that I’ll add later. Those containers make it easier to spot problems, and, because I haven’t invested much effort in them, I don’t feel bad about deleting them and starting over if I’ve misjudged something.
Also, remember that containers can have their own grids. So you can build a grid that gives you a big picture structure, add containers within that grid, and apply individual grids to those containers so that you can separately structure their contents.
And one more thing that may be important to you as a designer: Don’t feel restricted to the default breakpoints. Drag the resizing handles through the full range within each breakpoint and see how it looks. You may find that adding and editing breakpoints allows you to better adjust your design.
If you want to change the position of the elements but not just vertically, use a Grid instead of a Stack . Because with Stack you can not align 2 elements to be side by side. Grid, on the other hand, allows you to arrange the elements inside the grid however you want and you have complete freedom to make changes in different breakpoints.
Regarding equal spacings:
At first when I set margins and padding I only use pixels - only after everything sits the way I want do I convert the pixels to percentages. In addition, I make sure to do the conversion from pixels to percentages when the width of the canvas in the editor is as wide as the width of my computer screen, to see the design on Live-site as I see it in the editor.
For example: If the screen width of my computer is 1680px I make sure the width of the canvas is also 1680px.
What I am finding out (and please let me know if this is totally wrong) is that adding a grid to a section is incorrect. For example: I have a basic section. Title on top, image on left, paragraph on the right. I have a large container, then I have three separate containers for each of those parts.
So, for the desktop I want it to be set up like that, but for tablet I want title, image, paragraph in that order. Same for the mobile. I guess what I’m looking for is how to make the responsiveness adaptive. So, if I adjust the breakpoints with the sliders, it will all scale smoothly and switch to how I need it to switch with the orders of things. If that all makes sense.