How to build a beautiful responsive mobile page in minutes using Bubble's new responsive engine
Building for mobile with Bubble’s new responsive engine - Part 1
In today's issue:
How to build a beautiful responsive mobile page in minutes
bubbleHacker of the week: Alex Dow
Building for mobile with Bubble's new responsive engine
This one has been long overdue. I'm beyond excited to finally share my first tutorials on Bubble's new responsive engine for building mobile sites. The new engine is really a quantum leap. No more workarounds or CSS code needed. Here are my first two videos on the topic. More to follow soon.
1) A short general introduction to the new responsive engine
2) How to build a beautiful responsive mobile landing page in minutes
bubbleHacker of the week: Alex Dow
Who are you?
Hey, I'm Alex! I've been a technical project manager for fast-moving software development companies for over ten years. While focusing on improving and optimizing software development, I realized how slow and expensive every little move is. That's what ultimately drove me to discover Bubble for my projects. After taking an awesome Bubble boot camp, I was able to put together my first MVP and have been finding ways to deliver ultimate value to my customers much faster than any competitor can with typical coding.
What are you building?
Right now, I'm building a Vegan Meal Planner white-label solution for recipe creators, nutritionists, and everyone in between. The application lets users plan out their week's worth of meals, get a custom grocery list and automatically send those ingredients to Amazon Fresh for delivery. Additionally, the app does portion control, nutritional gathering, and many other features that give our users ultimate control over their health.
What is your most significant learning from this project?
It's mind-blowing to me how much I learn during every project. If I had to pick one, the most significant thing I learned was the balance game with front and backend workflows. While backend workflows can be more robust, I found they are often slower, and for a user-facing application, speed is sooooo important.
What is your favorite Bubble hack?
For Advanced Users: On a single page application speed is king. Bubble databases (and all databases in general) have a special trick where you can set up pointers to retrieve data faster. I specifically use the User table to point to any data that the user will need to see. For instance, all users have a meal plan that contains "User Recipes" (Regular recipes that pertain directly to this user). Suppose I were to search ALL User Recipes and find the ones that belong to this user that would take forever when my User Recipe table gets over 10k rows. Instead, I have a field in the User table called "List of Current User Recipes" that stores a link to this user's specific User Recipes, and I display them to the user I can quickly find them and show them. So much faster!
For Beginners: This might be obvious to some, but not everyone understands the proper layout of single-page apps. I originally had groups for each "page" in my single-page application that were all directly on top of each other. I didn't realize that Bubble really likes it better when all of the "pages" are vertically laid out with the "Collapse when hidden" checkbox turned on for each group. This might change with the new Bubble responsive engine, but this way of working works amazing for me.
Join the discussion
Do you want me to write about a specific topic, or do you have an awesome Bubble hack you would like to share? I'd love to hear from you, and I'm looking forward to engaging on Twitter (@DamianJanzi), in the post comments, or the Bubble forum.
Also, if you like this newsletter, why not forward it to a friend :)
That’s it. Keep it simple!
Thanks for reading bubbleHacks! Subscribe for free to receive new posts and support my work.