Layout woes

Question

I keep trying a different template and different layout and never can quite get things exactly right. I was hoping this would be an easy way to get a great custom app for folks, but after several days, slightly regretting jumping in.

Are there any layout experts. Just placing text and buttons so when things fit next to each other, they are placed intuitively and don't overlap each other. I would love to snap to the bottom of the previous object in a card. Not snap to top of card. Fiddling with % and px for exact placement seems problematic for any variations in screen size.

Feel free to point me to a resource that talks about this.

What I want is to have a page with navigation at the top for different topics, say Housing, Crime, Environment. When you click on one of those, the view or list shows the ones you want. I gave up on list because it doesn't fill in and cascade downward on the page, just has little arrows to go to next pages or page number buttons. I think presenting all items in a scrolling format is a far superior interface. The only way I can see to get scrolling set of images/text/buttons since it appears List can't do it, is to manually build out cards. Will take WAY longer, but for a better finished product.

But then I get into cards and it is a great template. Image/several text items/buttons. But how do I arrange things so I can see the whole thumbnail, then 3 text items right below that, then buttons at the bottom. If a text item is large it starts running over the other text items. It doesn't seem like the items are placed in relation to each other, more hard coded into place. I can't get any success.

Let me know if there are any tips out there.

TimLohnes1 · Answer

In addition, going back to lists, why don't these load.

https://maps.hayward-ca.gov/portal/apps/experiencebuilder/experience/?id=7451784d6725422393b946204cc33a0d&page=page_0

If I go to this page, the Housing view loads and maybe 1 other topic of the 6 will load. Click through the tabs. End on a different tab that is not loading, like click through all and end on Environment. It does not load, reload the page and it does load and at most 1 other tab. So all the tabs work if you reload when on that tab, but never more than 2 tabs work.

How can I get all the navigation views to work? Is this a bug?

I'm at the end of my rope trying to get this done. On vacation now working on it, wishing I had built a custom website from scratch....

TimLohnes1 · Answer

Thanks for sharing. I was looking at fake cards - do you put text boxes in a row for each line to keep them from crashing into each other? Or just position by px or % from top.

Like on your site, The Gartness and Weather cards (old site). How do you position those. I guess each device size you can position differently. And if the size of the text doesn't change. But I have some text boxes that are 1 line and some that go to 3, so the 3 line text box overruns the text box below it. That's my main layout issue.

JonathanMcD · Answer

ExpB takes a bit of time to get your head round, it's also still quite a young product so it's always being developed. It's not the simple drag and drop as first might be expected, however, some simple steps can make things easier.

For layouts, I always change screen size to the minimum as it'll mean you've got a layout to work for everyone. Use Block settings to develop your margins and keep consistency - if I am creating an Exp with more text and to give a webpage feel, I have block sizes down to 50%, for example.

Then use your rows or columns effectively, thing of the spacing and padding.

With cards, yes they can be tricky, but make good use of style settings and the distancing from the top of the card for each element and, like blocks, make sure you make good use of sizing and position. Don't make cards overly complicated, it's not worth it from an end user point of view.

Make fake cards, use text boxes - slightly easier to get your eye in.

For menus, use the "hamburger" it works well on smaller screen devices and can give a clearer interface for desktop users too.

Keep your layout simple - it'll work better.

I've shared this before - but this is in ExpB and if you click on the menu you can see the old version....

Gartness Sensor | West Highland Way IoT Project - Footfall Sensor Data (arcgis.com)