🫧 SEO Tips, App Plan Page Upgrade, Deezign Review, & CSS Mastery

SEO Tips for Your Bubble Sites

Bubble's SEO limitations are decreasing with each update, making it crucial to follow best practices for your public Bubble sites. Lorène shared her approach in a blog post, highlighting key tips:

1. Page Titles & Descriptions: Fill in the Page title, Title (SEO / FB), & Description (SEO / FB) fields for each page in Appearance settings to inform and entice visitors.

2. Internal Linking: Use Link elements and avoid Go to page … actions in workflows to connect public pages, enhancing credibility and relevance for search engines.

3. URLs: Keep URLs short and use proper Slug values for database entries.

4. Images: Optimize image size for performance and accessibility, and always include ALT tags.

5. Sitemap: Tick Expose a sitemap file in the SEO Settings tab for effective site indexing with multiple public pages.

I highly recommend that you use this checklist for all your future Bubble projects to keep them search engine-friendly!

Bubble Improvement: Revamped App Plan Page

On Tuesday, the Bubble team rolled-out a redesign of the app plan page. With this feature enhancement, it is now finally possible to understand app usage and costs at a glance. The new overview includes:

• The perks included in your current subscription plan.

• A breakdown of your total bill, considering your plan, workload units, file storage, and paid plugins.

• Easy ways to streamline your workload unit usage.

It is finally time to say goodbye to the old plan page and enjoy a simpler way to track costs and performance while building your apps!

Tool Review: Deezign for Figma to Bubble

Deezign, a new Chrome extension, caught my eye in January as a tool promising to seamlessly convert Figma designs into Bubble pages and elements. After a few days of testing, here's a quick rundown and my recommendation.

Setup

Accessing Deezign takes around 10 minutes with these four steps:

1. Create a Deezign account.

2. Install the Chrome extension.

3. Install the Figma plugin.

4. Generate and input your access token in the Figma plug

How it works

Once set up, using Deezign is straightforward:

1. Prepare Figma designs with cleanly named elements and Auto Layout. Also, use emojis in Figma to signify corresponding Bubble elements (e.g., 🔘 = Button).

2. Select your desired Figma element and run the Deezing plugin.

3. Go to the Bubble editor, open the Deezign extension and copy & paste your component.

Costs

Deezign offers a free trial, but it limits conversions to a maximum of 20 Figma elements and 10 per month. This allows you to try the functionality but any serious projects requires the premium version at $25/month.

Conclusion

While Deezign handled my conversions well, it currently supports a limited set of element types. Cleaning up links, icons, images, etc. will require significant manual effort. The tool's output quality depends on a well-organized Figma file. If you frequently transfer designs to Bubble and have a polished Figma file, give it a shot. Personally, I find the functionality and pricing not fully aligned yet, so I'll keep an eye out for future updates before revisiting it.

Build Tip: Enforcing Custom CSS Styling

While crafting a custom table last week, I faced a challenge with Bubble's rendering. My solution? I used a HTML component with style attributes linked to the header row via its ID Attribute. Yet, Bubble kept overwriting the z-index property, hiding the header row behind table rows during scrolling.

A quick fix: I discovered the !important CSS property. Add it to your style setting, and voila! Your custom styling stays intact, unscathed by Bubble’s rendering quirks.