My learnings on responsive design

[rico.trevisan]

edit 2021-01-30: added a few more things about design, but not exactly responsive design.

---

It’s been years that I build with Bubble but totally ignore responsiveness. This year I’ve been diving into it and I’ve compiled some of my learnings and sources.

---

Designing is hard. Designing in Bubble.io is even harder. Building responsive pages in Bubble.io is even harder.

Or so I thought.

I’ve completed a sort of “masterclass” recently and I needed to record a few learnings.

How To Do Responsive Design in Bubble with Gregory John

Makerpad YouTube

• Bubble.io doesn’t give you structure so you have to create structure yourself.
• Create a design system before you start dragging boxes inside the page. (Good advice that is hard to follow.)
• Build a styleguide.
• It’s all about margins and paddings.
• Page width 320px is 25% of 1280. Which just so happens to be the screen size one of the most iconic iPhones.
• For mobile input text size 16 means that the phone won’t zoom in.
• Instead of dragging and dropping, move the items inside the page with the absolute location.
• Sometimes it is worthwhile to design a whole new page for mobile.
• Your brain recognizes color before anything else.
• gridcalculator.dk to calculate grid sizes.
• Flex box is coming in 2021-Q1.
• New editor alpha is going on.

Dashboard Layout

Buildcamp YouTube

• Floating group on the left extending the full height of the page. That works as a static navigation bar.

Bubble Webinar 3 - Responsive Design

Bubble YouTube

• Collapse margins can do wonders.

Bumper group

Collapse margin + fixed margin left not working? forum post

• add a group under the floating group (normally used in dashboard type of designs)
• left align the bumper group
• left align the content group
• in the responsive engine, apply a hiding rule so that it hides when at - for instance - tablet resolution.

Font awesome “hacks”

Font Awesome examples

• it’s easier to create buttons with text fields.
• with text fields, you can use font awesome in-line
• simply add a font in between FA bbcode [fa] [/fa]
• cheatsheet for icons (v4.7) link
• You can add a loading icon to any button, add a state to the text-button that, when activated, it displays [fa] fa-circle-o-notch fa-spin [/fa]
• tweak the size of the icon with fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x

Fake gradient text

Text Colorizer by David

Example:

[font="Comic Sans MS"][size="6"][color=#FF0000]H[/color][color=#E90015]e[/color][color=#D4002A]l[/color][color=#BF003F]l[/color][color=#AA0055]o[/color] [color=#7F007F]w[/color][color=#6A0094]o[/color][color=#5500AA]r[/color][color=#3F00BF]l[/color][color=#2A00D4]d[/color][color=#1500E9]![/color][/size][/font]

[philledille]

Sweet with a simmare of gathered knowledge.

Added a little from my own struggles:

• you can set the page to not zoom at all protecting the user from auto zoom on input fields.

• when it’s tough to get things to be placed how you want - use groups.

Cheers, ~ Peter

[rico.trevisan]

Where is the setting for the page zoom on input field?

[philledille]

[rico.trevisan]

I’ve been putting my learning in practice and (slowly) redesigning an app to be responsive.

Responsive design before & after (no sound) - Loom

[charles4]

Thank you so much @rico.trevisan for this quick summary ! It is extremely useful for everybody here.

[rico.trevisan]

My favorite new little “hack”. I’ll update the original post with it.

Fake gradient text

Text Colorizer by David

Example:

[rico.trevisan]

Another one already known by the community probably, but news to me:

Font awesome “hacks”

Font Awesome examples

• it’s easier to create buttons with text fields.
• with text fields, you can use font awesome in-line
• simply add a font in between FA bbcode [fa] [/fa]
• cheatsheet for icons (v4.7) link
• You can add a loading icon to any button, add a state to the text-button that, when activated, it displays [fa] fa-circle-o-notch fa-spin [/fa]
• tweak the size of the icon with fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x

[hacker]

@rico.trevisan

You can add a loading icon to any button, add a state to the text-button that, when activated, it displays [fa] fa-circle-o-notch fa-spin [/fa]

Hey, @rico.trevisan,

How did you achieve this?

I have a state in a button called “Loading”, when the button is clicked I set the state to yes. And the button has a condition when the state is yes, change the text of the button to [fa] fa-circle-o-notch fa-spin [/fa], but it appears this text, not the icon

[rico.trevisan]

My fault! I should have said button as a text. Using text elements allows you to use [fa] links.

I don’t use the button elements but I make text elements buttons. I’m so used to it that I forgot to be more clear about that. I’ll update the original post.

[hacker]

Ohh, no worries, I hope @Bubble implements this in the future

[falecom1]

Wow!! This is the golden bookmark on this forum! Thank’s for sharing.

[nickkcarvajal]

I’m about to stop using Bubble just because designing in it is such a pain in the a**

[rico.trevisan]

What will you use instead?

[nickcarvajal]

I’m just going to go back to using Microsoft’s MVC C# stack with SQL and import designs from Webflow.

I’ll come back to bubble once the new flex box integration gets released.

[cmarchan]

I can understand @nickcarvajal

Bubble is a blank canvas and this is both its strength and also its weakness.

You have to build a structure for your app in every page as it does not come with it.

Over the years, I left and came back. Once I thought of it as a visual programming language and not as a block-app-builder like most other tools out there … I came to make peace with it

Also, there are frameworks such as Airdev’s Canvas and Openbuild that mitigate this aspect of building.

Best of luck with your project in whatever platform you choose

[waqar7624]

Hi, I want to design a project management app with the concept of upward project management. I want to display list of tasks in upward direction with each tasks move toward right from the previous task.

Here is the basic concept for the tasks to be viewed on the screen.
How can I implement it using repeating group or any other element.

[rico.trevisan]

Are you trying to make a Gantt chart of sorts? I’m curious, describe a bit what you’re trying to accomplish.