I’ve always struggled to make my apps simple in design/appearance. I aim for simple but the complexity of the info I deal with always seems to make it a bit more complex than I would like.
Is there any design guides,styling rules or current trends for app development on the web anywhere?
This is such a great question. I’m not a designer, I’m a coder and my design skills are, at best, on a kindergarten level which means I always struggle with new app layouts and designs.
The leading guideline seems to be Material which was developed by google. Personally, I’ve never seen a google interface that didn’t suck beyond all hope and reason so I don’t place a lot of stock in it (although it is quite popular).
Apple also has their Flat design (technically it has no name but that’s what a lot of people call it) and while it’s not a layout per se, it does have some ideas for colors etc. Apple also has their Human Interface Guidelines which is quite helpful.
In the end though, I generally go to JustInMind for design ideas. I use their free tools for initial layout and get feedback from users before I write the first line of code.
I agree with @PPetree’s answer.
For commercial grade projects, I use a professional designer. One of the guys on the team here (Tomo) does great designs: colors, icons, building the UI for the app. He’s a professional architect, as well as a graphic designer and software developer.
For the rest of us, without his abilities and qualifications, it’s not as easy. Certainly @PPetree’s suggestion of looking a good designs and following them helps.
Bootstrap and jqWidgets help by having nicely designed and consistent controls.
You’ll want to get used to Responsive Web Design. There are also several articles in our Wiki which may help.
AppStudio has two special controls which really help with organizing a responsive layout:
The CSSGrid control provides a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.
The Flexbox control makes it much easier to design a flexible responsive layout structure without using float or positioning.
You’ll find your apps will make much more use of nested controls - sometimes going 4 or more levels deep. Don’t let that stress you - HTML is made for that.
I have had a hard time working with the CSSGrid controls. I feel like I can’t control how nested controls behave in layouts.
Even though this can tend to be a subjective topic, is this noted in the Wiki anywhere? Seems like it would be a pretty useful topic to me 
@Eric_Pankoke, here are some Wiki articles:
Responsive Design Made Simple
https://wiki.appstudio.dev/CSSGrid[https://wiki.appstudio.dev/CSSGrid](https://wiki.appstudio.dev/CSSGrid)
CSSGridItem
Flexbox
Sure, it seems like it is hard to control the grid column or row size once you put a child control in there. More so with bootstrap controls. It seems like the child control will automatically have some padding inside of the grid parent. Then spacing between controls inside of grid rows or columns is bigger than desired.
I will take a look at the articles you linked for @Eric_Pankoke
Thanks. I guess since there was a lot of speculation about it on this thread that I figured maybe it wasn’t already noted. My mistake!
Here’s an interesting comment from Google on number of elements in a project:
Browser engineers recommend pages contain fewer than ~1,500 DOM elements. The sweet spot is a tree depth < 32 elements and fewer than 60 children/parent element. A large DOM can increase memory usage, cause longer style calculations, and produce costly layout reflows. Learn more.
This is interesting BECAUSE of you read this “latest” from the cordova.apache.org team, they recommend the single page model.
Siding with Google, I read a long time ago that apps running in the webview (i.e. phonegap/cordova) that you run into issues overloading the DOM.
From personal experience, I know this is true. When you load a massive javascript file and combine dozens of pages into a single page model all manner of bizarre things happen. I break mine up into individual pages and individual javascript files and load everything other than the home page as needed.
For instance, why would you keep pages like About (and the javascript that drives it) loaded in memory when that page may never get loaded?
Definitely side with Google and multiple pages - the DOM is a big speed issue if the count of elements gets large on a page. (Especially in IE - thank God this is Chrome)
What is a good number to keep below? At what point do you create a new form?
George quoted google above (8/12 3:16pm) to keep it below 1500. It depends on what device you’re targeting and what browser it will run under. I think under a couple hundred is safe for most devices.