Strategy Question

Coffee Lounge
#1

I need a bit of expert advice. In Wappler you have a number of viewports in which to program. Wappler is quite handy in seeing how the development appears in those viewports. The issue that I have is, if you are designing in the full-screen view, and say you change the column size in your phone view to say 5, it will appear too large in the desktop viewport. The same holds true when styling a number of other elements.

Here is a question that I have.

  1. Is there another more efficient and practical method to apply to my design for containers, rows, columns, tables. etc…?

I look forward to all of your thought on this matter.

#2

Hi Bruce, general rule of thumb for responsive sites is develop mobile first and work up. It was a strategy that took me awhile to get used to as well.

2 Likes
#3

It depends a bit on the framework. With bootstrap it is mobile first, so you first edit for the smallest screen and then for the bigger ones.

1 Like
#4

Yeah, what Brad said. Start with mobile then only make changes as you move up through the larger sizes.

The most efficient workflow for me is get the basic layout down across all devices, first. Just the bare minimum. It’s even more important to do this if the larger version are more complicated than usual. You may need to put in temp heights, borders or background-colors to see how the layout blocks fold and unfold in various viewports but once you got the layout working, you can then spend your time fussing around with the details.

1 Like