My learnings on responsive design

rico.trevisan · 2021-01-24T08:45:12.626Z

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 · 2021-01-24T12:23:46.669Z

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 · 2021-01-24T13:14:55.313Z

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

philledille · 2021-01-24T18:36:01.907Z

Screenshot 2021-01-24 at 19.35.302612×350 30.8 KB

rico.trevisan · 2021-01-30T08:50:11.076Z

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

Responsive design before & after (no sound) - Loom

charles4 · 2021-01-30T09:46:27.294Z

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

rico.trevisan · 2021-01-30T13:18:25.345Z

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

Fake gradient text

Text Colorizer by David

Example:

CleanShot 2021-01-30 at 14.16.50@2x2002×470 73.1 KB

CleanShot 2021-01-30 at 14.17.46@2x1932×350 56.4 KB

rico.trevisan · 2021-01-30T13:19:24.555Z

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 · 2021-03-13T19:08:55.334Z

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 · 2021-03-14T03:24:54.511Z

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 · 2021-03-14T05:27:06.410Z

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

falecom1 · 2021-03-18T17:21:43.457Z

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

nickkcarvajal · 2021-04-02T16:10:54.082Z

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

rico.trevisan · 2021-04-03T06:32:30.845Z

What will you use instead?

nickcarvajal · 2021-04-03T13:39:31.797Z

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 · 2021-04-03T13:59:28.067Z

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 · 2021-10-02T09:35:28.555Z

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.

UpwardProject1350×629 9.35 KB

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 · 2021-10-02T12:06:05.828Z

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