CMS Development

Ntbrown
Contributor

Plan for new theme breakpoints

What's the plan for these? It's just "mobile" currently which is.... useless. The documentation seems to imply the breakpoints will be openly adjustable as they should be. But, given HubSpot's usual swing and a miss releases I'm not holding my breath here.

 

Local development tools will spit out an error via cli if you try to add more than one since the only reserved and valid name for the breakpoint is "mobile".

 

These should be open-ended very simply because there are no standard "mobile", "tablet", or "desktop" breakpoints and every use case is different. Sure there are widely agreed upon values, but again pick your favorite CSS frameworks and look at how different they are. Same goes for any standard web project. Uniformity would be nice - but it's not a valid methodology everywhere.

 

And, again, per my usual distate with the new theme features and themes as a whole with how they're currently implemented..... Subjectively restricting development with an opinionated linearization of what I can build is fundamentally stupid on any level if these breakpoints are going to be restricted similar to theme fields.

 

Why you'd release a half-baked feature with poor documentation implying the existence of broader functionality within an openly editable JSON configuration is beyond me.

8 Replies 8
Ntbrown
Contributor

Plan for new theme breakpoints

Wow... all the way back in november and nothing? Half-baked was an understatement.

 

"mediaQuery": "@media (max-width: 800px) and (prefers-color-scheme: dark)"

Bad idea. Schema should be wrapped together more fluidly than this as they're broad spectrum thematic applications at the theme level / abstracted. Depending on marketers to edit schema considerations, whilst having no understanding of their implications or technicalities, is an incredibly poor idea that will inevitably lead to lacking cohesion and many bugs.

 

The queries you'd want that marketers could adjust, with some relevance, would be ones that reduce visual complexity rather than color palettes as those have context and the latter is simply thematic.

 

 to provide a rich experience to the markters.

Things like this should be a rich experience to the developers not the marketers.

0 Upvotes
Gonzalo
Top Contributor | Diamond Partner
Top Contributor | Diamond Partner

Plan for new theme breakpoints

I understand your concerns and kinda agree, but the current dnd provides already the marketers ability to edit styles such background on sections, so I just wanted to expand that a bit to provide support to dark/light schemes.

 

I meant that having us more control over the breakpoints, will enrich the experience to the marketers.

If this answer helps you to solve your questions please mark it as a solution.

Thank you,


Gonzalo Torreras

HubSpot freelance developer

hola@gonzalotorreras.com
www.gonzalotorreras.com
Schedule a meeting
Ntbrown
Contributor

Plan for new theme breakpoints

Get what you're saying and see the utility. As hubspot continuously adds these things it's creating more problems on top of the ones that already exist. Editing UI provides inline style editing that could be modified for dark mode and other queries as you suggest. That is a "better" experience to marketers. No arguments there.

My critique was that in terms of standards, longevity, and design systems it's counterproductive. Which I'm guessing is the part you kinda agree with as most devs would. Inevitably what happens is... marketer does the inline editing, everything looks good, theme changes, design system is updated, whatever.... Then you have N pages that are one-offs with no cascading. Then slack channels blow up and people pill their hair out because everything is a mess. Themes could do all the cascading for them at an abstracted level whilst retaining fluidity for updates and avoiding this.

Beyond that inline style editing has its own problems with regards to font sizing and many other things. But that's entirely hubspots fault and they should have never exposed this. It's just a hot sell to marketers, for a "better" experience, that really isn't a good feature when examined. Marketer says "I want X larger" so they edit it inline with an injected "font-size:;" style that inherently breaks the entire design system and whatever thematic applications exist. It breaks accessibility and many other things.

But in hubspot you work with what you've got. Everything is "kind of" good and nothing's "great".

0 Upvotes
Gonzalo
Top Contributor | Diamond Partner
Top Contributor | Diamond Partner

Plan for new theme breakpoints

I completely agree, all valid points.
I would prefer a class selector for marketers than such freedom, but as you said:


@Ntbrown  ha escrito:
But in hubspot you work with what you've got. Everything is "kind of" good and nothing's "great".

 

If this answer helps you to solve your questions please mark it as a solution.

Thank you,


Gonzalo Torreras

HubSpot freelance developer

hola@gonzalotorreras.com
www.gonzalotorreras.com
Schedule a meeting
0 Upvotes
katie
HubSpot Product Team
HubSpot Product Team

Plan for new theme breakpoints

Hi there,

 

As you noted in your post, the documentation does imply that breakpoints will be adjustable because it is something we're planning on releasing for a v2 of breakpoint support. As with any feature, we released a v1 that provided a marked improvement over the previous experience, but also gave us the opportunity to watch usage and learn how exactly we want to approach a v2 before releasing more potential complexity to the system. The first version of this release gave developers the ability to set breakpoints at predefined mobile and desktop sizes. However, the main source of pain we were trying to solve for in this release was for marketers, particularly those using free and starter landing pages, or who don't have access to a developer. We've found that the first release has so far been useful for most developers, but has been particularly helpful for marketers.

We are planning on releasing custom breakpoints as a follow up to this first release. Custom breakpoints will give significantly more power to developers, but also comes with a lot of UX implications in the page editor in order for the feature to be intuitive for marketers. We are working through those implications now.

 

Keep an eye out for custom breakpoints soon. Thanks for your patience.

 

Katie

Ntbrown
Contributor

Plan for new theme breakpoints

@katieSounds good thanks for clarifying. Any plan to extend the theme fields? That also seriously needs to be fixed.

I and multiple other devs have some nifty themes on standby that are extremely powerful that we haven't been able to publish in their final form for months because we don't even have access to the fields to complete them.

We can code it and have.... it just won't publish or show up as editable due to the restrictions both in rendering and via the cli.

Why were these fields ever restricted in themes. It's fundamentally chopping off creativity and restricting developmemt flexibility and makes no sense given their availability in modules.

 

Not going to reveal what I have built on a public forum but if there are use cases needed I'm happy to illustrate.

katie
HubSpot Product Team
HubSpot Product Team

Plan for new theme breakpoints

There are some plans to allow more theme fields. I'd love to know more about which fields you'd find helpful. The theme field restriction is a case where we have a few large-ish features that we want to release to complete the themes platform and didn't want to overextend themes before releasing the full platform. But again, I'd love to know more about the specifics of your theme building and see if there's anything we can do in the short term. 

Gonzalo
Top Contributor | Diamond Partner
Top Contributor | Diamond Partner

Plan for new theme breakpoints

Hello Katie,

Is there any news here about the responsive break points?
I would love to have some freedom there. Regarding your customizations on the UI you maybe can gave us the ability to choose a custom icon to display that can be meaninful for the marketers.

I think we should have the control over there to provide a rich experience to the markters.
In my case I was just trying to setup a couple of breakpoints related to dark theme:

 

 

"responsive_breakpoints": [
    {
      "name": "desktop dark mode",
      "mediaQuery": "@media (prefers-color-scheme: dark)",
      "previewWidth": {
          "value": 1200
      }
    },
    {
      "name": "mobile",
      "mediaQuery": "@media (max-width: 800px)",
      "previewWidth": {
        "value": 400
      }
    },
    {
      "name": "mobile dark mode",
      "mediaQuery": "@media (max-width: 800px) and (prefers-color-scheme: dark)",
      "previewWidth": {
        "value": 400
      }
    }
  ]

 

 

As said, we may have an extra attribute related add an icon or something like that to provide the marketers a meaninful UI.

 

And also, I would love to see a mobile-first approach instead, so as far I can see to provide the right experience to the user we should have also the ability to select the "default" opt to be displayed on the content editor.
That way we could potentially swap the current media queries to be mobile first, but actually display by default the desktop to match the current experience.

 "responsive_breakpoints": [
    {
      "name": "desktop",
      "mediaQuery": "@media (min-width: 800px)",
      "default": true,
      "icon": "../../assets/icons/responsive-breakpoints/desktop.svg",
      "previewWidth": {
        "value": 1200
      }
    }
]

 

If this answer helps you to solve your questions please mark it as a solution.

Thank you,


Gonzalo Torreras

HubSpot freelance developer

hola@gonzalotorreras.com
www.gonzalotorreras.com
Schedule a meeting
0 Upvotes