Forum Academy Marketplace Showcase Pricing Features

Things I've learned while building complex apps

Seconding @petter again here. Thinking through the why is an incredibly important part of building an app.

When I’m at the outset of building an app, I try to spend a few hours outside of Bubble trying to figure out what the app aims to do. Then I’ll design a close to ideal database structure. Only after that, do I start porting my structure into Bubble. (Otherwise, I’ll fall down a rabbit hole of experimentation…)

When you start developing apps (in Bubble or in general) thinking through a database may be difficult. But there’s great value to at least sketching out your data types (and their associated fields and relationships) to avoid a duct-tape database.

Regardless, one of the biggest mistakes I see beginners make is to go full force in building without a solid understanding of field types. (Ex. an address split into 5 different text fields versus using geographic address, using “text” for something that should be a number, using multiple fields when a “list” would work better - ex. Listing Image1, Listing Image 2, etc).

7 Likes

That’s some good stuff.

1 Like

Thanks for sharing your views with us. It really helpful for me.

1 Like

Thanks for sharing it with us.

1 Like

Great post! Thanks for it. It very helpful and informative not only for beginners like me but for those who have some experience. It contains great tips.

1 Like

Wow, am I glad I stumbled upon this. Thanks for the great tips @petter and others! :raised_hands: One question regarding mobile:

If I understand correctly, you’re using only the responsive engine. Why don’t you tick the “Mobile Version” and do a completely separate mobile design for each page? I’m new to Bubble and figured that would make sense so that I’ll have e.g. different font sizes for mobile.

1 Like

Hi @codeless,

Keep things easy to debug and maintains. Fonts can be adjusted with width if needed.
Then, you can send your app to Apple Store and Google Play store with this free tool

10 min. to create a FREE native app with Bubble > iOS :large_blue_diamond: Android

1 Like

Thanks so much for the reply! I’m not sure what you mean by:

Good to know that fonts can be adjusted with width, I guess in a similar way as CSS media queries. For now, I only need a responsive web app but will check that out later :slight_smile:

To add to my original post, I’ve designed everything for desktop and mobile in Figma (I was working with a developer before discovering Bubble). Do you think it’ll be a nightmare to do separate mobile designs in this case, too – and why? It’s a bit hard to see this now as I’ve already planned out the designs.

I understand correctly, you’re using only the responsive engine. Why don’t you tick the “Mobile Version” and do a completely separate mobile design for each page? I’m new to Bubble and figured that would make sense so that I’ll have e.g. different font sizes for mobile.

Hi Codeless. You can of course do that instead, but there are a few reasons why I choose not to:

  • I consider responsiveness in general to be a best practice. Your app should respond to a changing screen size.
  • Search engines reward pages that a are mobile friendly. I assume that a light, responsive page is considered the most “friendly” in seo terms, and don’t know for sure if Google would punish you for separating it into two pages, none of which are responsive (there’s no way to say for sure how Google ranks this in the end though)
  • Only one page to update

There are absolutely cases where your solution would make sense though. If the mobile design and desktop design are radically different for example, placing both designs on one page would probably slow down your page load. So I’m not saying don’t use that, but as with everything else it does deserve some planning to see why you should choose one over the other.

For your last question, using the word nightmare may have been too strong from my part, scaring people away from solutions that may work for them. The point I was trying to make is that setting up a complete desktop design, and then change it to make it mobile-friendly afterwards can be very cumbersome. If you have planned it out on beforehand and have the designs more or less ready (which is how I understand your situation), then there’s no reason to expect it to be nightmarish. Though personally, in most cases I would still go for a responsive design rather than two separate ones.

5 Likes

Those are some good points, thanks so much.

I’m now playing around with mobile-first and one question I have is how do folks here handle for example navbars? I want mobile screens to have a hamburger which opens a navigation modal. On desktop screens, however, I want a row of links (some of which open more links below on hover).

I’m thinking I could have two reusable elements, a navbar and a navbar-mobile which I could display using some conditional logic. Any thoughts on what’s the best practice here?

I’ve solved it in the past like you describe here. I basically have two rows, one for desktop and one for mobile. When the screen width reaches a certain point, one is hidden and the other shows up.

2 Likes

Good stuff, really appreciate it. I’ll try not to bombard with follow-up questions :grin:

Haha, no worries. Feel free to send me a message if it becomes irrelevant to the thread.

1 Like

I realise this post is a year old, bit there are some great points. I’ve been using bubble for a short while and have redesigned my app around 3 times to make it more efficient.

I’m now redesigning a fourth and final time (including database and UI changes) and will then push live.

I do have one question about responsiveness and the mobile first approach. Does that work well when using on desktop? I have a fairly large amount of info I need to display, and a particular layout in mind. So far I’ve only done desktop to mobile responsiveness, so am eager to hear more about any tips you have here.

Mobile-first does require more planning, as you’ll have to think about placing elements below each other that should go up one row as the page becomes wider. In principle it’s exactly the same (desktop-first pages push things down a row while mobile-first pages push them up), but there’s a difference in the way that a mobile-first designed page will often look a lot different in your editor than the final result, whereas a desktop page will look more or less look like you’d expect, with elements nicely organized in their correct rows. In non-technical terms, mobile design can be a bit of a mindfuck., and require that you really know your way around the responive engine.

There’s really no way to say if it should “work well on desktop” or not, as the point of a well-designed responsive page should work well on any screen size.

I want to emphasize one more time though: don’t make it mobile-first just because I said so. There are many reasons as to why it’s a good idea, but in the end it comes down to circumstances, and your personal preference. If you’re a lot more comfortable with desktop design, then by all means, go desktop first. What I would suggest is to keep testing your page constantly in the responsive editor to make sure that it will fit on a mobile screen as you go along, because changing it afterwards is what steals a lot of time.

A final general tip is to really get to know the responsive engine before settling on how you want to design your page. The easiest way I’ve found to do this, which I’ve mentioned in other threads, is to simply set up a bunch of groups with bright, visible background colors like red, blue and green, and then try to predict how they will behave in different scenarios in the responsive engine. You’ll find that it’s actually very cleverly designed, but takes some getting used to.

2 Likes

Thanks for the tip. I do appreciate the advice and after research my target audience is split around 50% desktop and 50% mobile and tablet. So in any circumstance, I need both elements working correctly.

Honestly, I’ve heard and also read about mobile-first design. I always thought it would be trickier to implement so had always opted for desktop-first and then worked around that. I’ve just now (right now) taken a few of my desktop designed pages and created a few test pages to make the mobile-first designs. I know how to work with groups in bubble and it appears to be working pretty well for the moment. In fact, my first few tests indicate that designing at 320px and scaling is far easier than working from 1200px down!

4 Likes

you’re a legend. thanks for the pro-tips! just read your book cover to cover in one sitting. super helpful.

What book? I’m interested in reading this.

The ultimate guide to Bubble performance

Fantastic!!

2 Likes