Been using anvil for a long time. Still there has not been much development to make things look correct on mobile devices.
What I’m trying to do:
Should not have to manipulate css for years in order to have even a static page look correct. Loading images is very slow. Top fixed headers are always sized wrong. Scrolling is a disaster, page sizing as well.
In my opinion it has gotten significantly worse over the years.
What I’ve tried and what’s not working:
All css variations, webkit and media nonsense. We dont even have splashscreens as options. There needs to be native support within all component parameters for use on mobile. Like auto text size, and padding changes.
We are in a mobile first age. To have these applications not natively look acceptable on mobile after all this time is very disappointing.
There isnt even a preview feature so check and verify, you have to publish, reload on mobile or simulator then repeat. I mean its just not a good tool for this case specifically.
I can understand the frustration. I think the issue is that Anvil itself is a web app first platform. To that end, I have found that the Anvil apps of mine that I have installed as PWAs have appeared as expected on my Android phone (not that they were all that complicated visually), so at least as that kind of mobile app I have seen my projects be equal.
Also, imho, I think most devs would see us in a browser first era tbh. Honestly most people will use a web app if they can get equivalent usability as a mobile app (I do that often). Write once, run anywhere as everyone claims.
In a few cases I may make a simplified version for mobile, but most of my apps are too complex for a mobile device.
I would not be able to work on a mobile-first environment. I need a powerful-and-flexible-first environment that also allows to create simplified versions for mobile.
Said that, I would love having better support for mobile development!
I remember a fancy webpage design IDE that allowed several distinct screen sizes (and orientations) to be preset, each with its own physical layout of the boxes. After putting your widgets on-screen, in the largest preset, you’d then cycle through each remaining preset, in a real-sized preview pane, and arrange your widgets accordingly. This pane was both a preview and a working design window.
The expectation was that a real-world device or browser would most closely approximate one of your presets, so that preset’s layout would be picked.
For my apps, I have far too much on-screen for it ever to work on a tiny phone screen.
For other apps, I can see breaking up the larger layouts into a sequence of smaller phone-sized layouts, with navigation between them. But this means that there’s no longer a single list of “pages” that works well on all sizes.
When things get that complicated, it can really help to have a visual UI/UX designer on the team, with tools aimed at them. For simplicity’s sake, Anvil is not currently that tool, and it may well stay that way.
There is a real separation-of-concerns facet here. One needs to separate UI from code in such a way that several UIs can all use the same underlying code. With Anvil, one might build these as separate Apps, with the core functionality defined as a Dependency.
You are beyond the scope of what im referring to. If you make an application that is suppose to span a 75 inch screen then of course you will have issues on any other media display. That is NOT what I am referencing here.
Im talking about even creating a basic app, anvil has substantial drawbacks when it comes to looking correct on mobile.
There should be no issues if you plan to design an application for universal use. Meaning if you are arranging components to fit well on any screen size. Think even in the default templates. and run them with minimal content. They will look strange on mobile.
So really they just need to have more standard universal functionality.
Imagine some base templates that just work on everything. Im NOT talking about horizontally arranging and stacking 7 plotly charts and tables with 30 columns.
I’ve never really seen such a thing. Given how vast the range of screen sizes really is, I doubt I ever will.
That said, I do get your idea. There ought to be a readily-available Theme that, by default, provides components that look good and work well in tightly-constrained areas. Now that it’s possible to build Themes, that may yet come to pass!
I also understand the frustration… but also don’t(?)
I mean, I’ve been making my apps all those year in anvil always thinking they NEED to fit both a desktop browser AND a mobile browser/installed pwa, and even most of the time thinking first in the mobile view.
They all fit (almost) perfectly. I almost never need to code css and I think I only coded a media-size-specific css once. I use 97% of the time drag-and-drop components from anvil (or custom components I made also using anvil components). All my apps look fine both on desktop and mobile. I would say they look even better on mobile.
But it all depends on how you BUILD your apps. If you build apps only thinking of how they look in the designer while building, of course they will not look ok on mobile. I’ve gotten used now to look to components and “see” how they will wrap on mobile, but with the new designer is a lot easier to see.
You can run your app in Split mode, which makes it run in the size of a mobile screen. You can even resize that mode just by dragging the edge.
If you want to see before running, you can make the sidesheet in the designer to be always open, which makes the designer smaller and probably the size of a mobile device. You can also always drag the edge to resize this to your needs.
Now that the designer shows you the live changes in custom components as well as native ones, I don’t think I had the issue of not knowing how my app would look on mobile screens for years.
Also, if there’s any specific app you are struggling to make work on mobile, it’s probably worth its own thread to see if anyone in the community can help you fix the UI problem with existing Anvil tools.
I mean this is all trivial stuff. Tbh if you find yourself not needing css, then your apps are incredibly simple or you aren’t following sound design principals.
Try fitting a datatable with more than 5 columns for mobile use and lmk how you fair.
For what its worth I personally solved this in the past. But I shouldnt have to. This is just one example of issues with components on mobile.
Ive spent far too much time reconstructing anvil components so that they work properly on mobile devices.
They should be universal by default is all im saying. So to argue that they are is just flat out incorrect.
I think this conversation would benefit with a few more actual examples from you. Otherwise it just feels like a general discussion.
Most components in Anvil are designed to be universal already. As for the one example that you mentioned about fitting a data table, the Data Grid already does that. The columns in there squeeze based on screen width. If you want a more custom look, try with a Flow Panel. Add 4-5 linear panels inside it and limit their width (or maybe set expand to True)
Well… I disagree. My main app has a lot of tables and most of them are linked to others and have an average of 10+ columns. I don’t know how that changes anything, since the problem is design, not quantity of variables.
The only thing I’m struggling rn is that the new M3 Beta design seems to be too costly in memmory to run good in a few cases in mobile.
Other than that, I think my apps look beautifully using mostly the default css (and of course, specific changes to match my design). When I said that I don’t use CSS I thought it was obvious I was saying that don’t use css to make it work differently in mobile/large screens. I don’t have to write media queries most of the time. I they have good UX design in mind, yes.
OK, this thread is getting unnecessarily heated. Let’s all take a step back, cool it down, and try to focus on a more constructive conversation that actually helps people build mobile apps more easily.
@bdr997 – I am hearing your frustration here! Unfortunately, I think the frustration is getting in the way of helping us understand what use cases you’re finding difficult. We want to make it easy to build apps that work well on mobile devices, and that means we want to understand where people are struggling with what we’ve built so far. But to do that we need to understand what you’re trying to do, not just that you’re unhappy with how it’s going!
I would like to suggest the following approach:
We discuss specific examples of things you’re finding difficult on mobile, or feature requests (eg: “I’m having trouble doing [X specific thing]”, or “here is an example of a UI I want to build but I’ve had these problems achieving it”, or “I think [proposed feature Y] would make it much easier to build mobile-friendly apps”).
I’m aware there may be quite a few of these – your post feels like it’s venting a lot of pent-up frustration. Feel free to group or separate them out across multiple topics as appropriate.
We lose the heated or dismissive language - we’re here to be constructive (either to swap techniques on making mobile apps with Anvil, or to help the Anvil crew understand pain points, or both), not to vent.
We take these topics to new threads. I’m going to close this one, because there’s too much temptation to continue arguments, but this is an important topic and I look forward to learning from these discussions!