[ad_1]
When I built my website, I started on the desktop view. Later I then built out the mobile view. Some aspects from desktop looked fine on mobile but a lot didn’t and I ended up simply duplicating blocks, hiding the desktop version from mobile and tweaking the mobile only block.
My guess is that this creates a lot of jank and unnecessary duplication. But as a newbie I really don’t know a better way.
If I were to start over I’d start with mobile, since that’s how most people now access the web but I wondering what experienced devs do when building out responsive sites?
I am noob too. Never had problems with it. I just use a theme that is responsive. I even can change the view if I am not satisfied and change the blocks and Layouts manually for each view.
For wordpress Gutenberg blocks, there’s little icon for desktop, tablet, and mobile. You switch between views and set different values for them. There’s one for the whole page next to the save button. Then there’s tiny icons in all the blocks
What I usually do is make a page called styles and put in dummy text H1 to H6 and P text. Go into customize and set the different font sizes for the different views while looking at the styles sheet. Font sizes for mobile is like the biggest factor for mobile legibility.
I use Oxygen and bricks that have built in breakpoints you can build at.
I start with desktop and make my way down to mobile. Anything that breaks outside of those breakpoints, I use media queries for.
I use clamp for font sizes so fonts are responsive and don’t require any tweaking.
Started to use automaticcss in bricks which make responsiveness pretty easy.
Personally, I think mobile first is old school way of thinking and don’t use it.
Oh dear. Use CSS breakpoints.