Streaming live at 10am (PST)

Ability have more breakpoints or custom breakpoints


#1

As much as I love Webflow and enjoy the control over it, the lack of breakpoints without hand coding is a bit on the frustrating side. Is there anything in the roadmap for adding in some more native breakpoints?

Googles's Responsive UI layout has a nice breakdown.
https://www.google.com/design/spec/layout/responsive-ui.html#

Thanks.


#2

Agreed @RickK This would be a super awesome feature!


#3

I agree to a point. The default 960 container does feel a bit antiquated. At the same time, I thought this article I've linked to below hit the nail on the head by calling Google out for releasing a "standard" that is seemingly contrary to the thought process you should be using when thinking about how your layout/design works across all resolutions. Your content should dictate where your layout breaks, not just because you arrived at some arbitrary viewport number Google outlined in a spec that more than likely has no relation to the custom thing you've created.

I personally don't have a problem with how things are currently setup in WF, I suppose its because I do my best to think about how things will break down when you start "squeezing these boxes inward", which is essentially what it all comes down to. Also, you've always had the ability to create any size grid/layout you want through the use of plain old divs, css, and "rows" within Webflow so that is super helpful.

Flexbox will be the future of layout, and hopefully some method for implementing true content breakpoints. Times change, things move fast in technology/development. I know Webflow is thinking about this kind of stuff. If you search through the forum you'll find that these kind of things are on their mind. They've already stated that it is a MASSIVE undertaking to make these kind of changes, requiring them to basically re-write their whole system, and whatever they come up with needs to be backward compatible with the gazillion sites already created with Webflow.

Adobe developer Lee Brimelow came up with a pretty ingenious extension for Adobe's Brackets a few years back. If this method, or level of control could somehow be implemented into Webflow for true custom or content dictated breakpoints it would be amazing.

Anyways, here is that article.


#4

While I agree to a point with the article there would be a few arguments I would make. First being, we're talking Google. Google has all the statistics in the world to back up their reasoning for the breakpoints they've suggested. I mean let's be honest, Google pretty much has a monopoly when it comes to search engines. As much as I would love some real competition, Google still sets the standard. With that being said, we're at their mercy.

Secondly, I would go as so far as to say that while standards have gotten way way better, there's some still rather large hurdles to get over. The first being true responsive text that works across ALL browsers via CSS does not revolve around writing JS to resize text. You can attempt using VW, VH, calc() --- (stupid Opera Mini), ect but none of it currently is 100% supported across the board. We were so close with Flex too! :frowning:

Anyway back to the topic at hand. The last argument I would present is the frustration having to cater my content to the smallest breakpoint. Because that's what this article is kind of saying: "Good responsive design uses content breakpoints, not viewport breakpoints; it shouldn’t matter what size Samsung makes its next phone, what matters is at what size your content breaks". This is simply not true. No matter what breakpoint of the 3 you're using with Webflow it's the breakpoints in between you're going to have device viewing issues with. That is nless you design to the smallest viewport in each of the views which can hinder the appearance you're trying to achieve. Adding more breakpoints at least gives you more control over content and type size.


#5

Before I forget - I pretty much add this to every site at this point:

@media screen and (min-width: 1200px) {
.w-container {
max-width: 1170px; }
}

That at least makes the container wider, doesn't really solve the type issues though.


#6

I feel ya. I suppose if were just wishing here then why not go all out for content dictated breakpoints. I guess that is just the way my brain works, if somebody says "man, I wish I had a cheeseburger right now", I'm always thinking "well, if you have a wish, why not go for something a little more top shelf, like - I wish I had a bag of money..." :wink:


#7

I would take that too. :slightly_smiling:


#8

I notice that as far back as 2013 Webflow has been promising to make this happen. But it has not happened. It is now 2016, and more people are buying and using high pixel density / retina monitors. We NEED wide screen width breakpoints.


#9

Agreed! They have even used language that makes it sound like it is "on the way"... but 3 years is an awfully long time on the internet! Being stuck at 940px is starting to feel antiquated, at best.


#10

I think they are focusing on the cms :worried:


#11

Guys, if you have been watching the workshops with Nelson you would know that this is a feature the Webflow team is working on. :wink::slightly_smiling:


#12

And in the meantime you can make your own container. Place a div with margin: auto and max-width of 1240px. Maybe add a padding of 20 to the left and right side and your done. Only problem is that you can't use the guides anymore...

But it would be really nice to have this as a build in feature :slightly_smiling:


#13

The WF container have a little extra code like content: "" display: table


#14

VladimirVitaliyevich,
That's good to hear! I think the mixed messages and lets say, less than truthful comments I've read on here are what worry me though.

For example thesergie said in september 2013 "We're working on adding a media query for 1200px that's inside in the UI soon." Last time i checked, 2 years and 9 months does not count as "soon", especially on the web. And then again in January 2014 he said "It's one of the next features we'll be working on this month." ... ~sigh~

zackete_de,
Yeah of course there is always that! But the downsides are that you of course then cant assign actions to other objects based on the breakpoint and it all starts to get a little hacky.

Of course you can always fall back on just coding stuff from scratch yourself! That is 99% of what i do, but i really rather like the idea of being able to do a lot more using Webflow to make life easier and make going back to an old project super simple. But very rarely can i work on a client's project these days that has a maximum width of 940.


#15

Well, this isn't looking positive!
I guess we can only hope of a BootStrap 4 update. The breakpoints are already a few years out of date, i can only guess any kind of large update is linked to the imminent BootStrap 4.


#16

Hello Vladimir,

You got a link for those?


#17

@Biscutty https://webflow.com/workshop/qa-with-webflow-ceo-vlad-magdalin

:wink:


#18