â–Ľ
Streaming live at 10am (PST)

Webflow breakpoints: And designing art with pixel dept

Design help General
#1

Question:
Is it true that a browser is going to see a Webflow design and then present the results based on width?

(Restated: Is it true that in spite of the helpful breakpoint labeling by device that Webflow presents within the UI (Desktop, Tablet, Phone Landscape and, PhonePortrait and the suggested devices that would correspond to each category) one should know a browser would determine what is shown based on width based on the media call embedded in the code, right?

Example: An iPHone7+ has a portrait width of 1080 px…thus, it would be too wide for Webflow’s predefined Phone Portrait category. Therefore, it (the iPhone7+) would be seen and read as a 1080 pixel width by the browser AND it would be accessing artwork prepared within the Desktop layout within the Webflow Desktop category…right?

The reason I’m asking:
If this is true, then if one is designing artwork in Illustrator in PIXELS, then you have to design based on width within the 4 categories Webflow presents BUT THEN determine height based on the deepest possible device that would potentially be viewed given the width…and as just referenced, that may NOT correspond to the predefined categories by device Webflow has presented.

Is this thinking correct?

I ran into this problem when designing a slider and the depth was not covered given the width.

Thank you.
Greg Gruenwald
Designed Communication Processes
Chicago, IL
GregG@DCP-USA.COM

#2

Yes.

Media queries, the “breakpoints” defined in CSS that allow a site to be responsive, is based on pixels values solely. Webflow makes it easy to understand which bp correspond to which device, but that’s just true for the majority of visitors. Large phones can register as tablet (potentially), landscape tablets register as desktop and so on.

If you want to target devices, or Operating Systems, you can do it with Javascript.

As for devices screen resolution, a resolution in pixels doesn’t apply to media queries. Because HDPI exists, what counts is the rendered pixels definition, expressed in point (“pt”). For example even if the screen definition of an iPhone 7 is 1334 (I don’t know where you get 1080), its actual definition is 667pt, because it’s rendered at 2x (for a resolution of 326 ppi).

Here’s a more visual explanation with iPhone X:

So with a width of 667pt, iPhone 7 registers under WF mobile portrait breakpoint.

As for the rest, web design for responsive websites often uses %ages instead of fixed pixels values. And assets from illustrator being vector, they’re easy to scale up and down. You can also learn about VW, VH, VMIN and VMAX units, they’re supported by webflow.

https://www.w3schools.com/cssref/css_units.asp

(VMIN and VMAX are especially neat)

Anyway, you should provide Webflow with HDPI graphics, basically @2x versions of everything you produce.

Designers, and especialy app designers, have different workflows regarding the design of assets. My (very strong) opinion if that you should always design in pt, so at @1x, and scale your assets from that.

2 Likes
#3

Morning, Vincent!

That was a stunningly good answer. I cannot believe the speed with which I received it you must be a Green Bay Packer Fan and your state of euphoria didn’t permit you to sleep after the cosmic injustice done our Chicago Bears last night! Thank you so very much. You Webflow people and your product are awesome.

Greg Gruenwald

Designed Communication Processes

Schaumburg, IL

#4

I may or may not have spit some of my cofee through my nose reading this. I can feel the pain, I’m sorry for your loss. I’m on the french west coast so I’m fully awake and at work. (also I only care about NY Giants or NE Patriots, when they reach Superbowl, sorry, don’t hate me).

I’m not working for Webflow by the way. I do this for you :wink:

#5

Wow! Even more stunning answer. Thank you so much! Greg

#6

Yea there was a rumour surrouding this, and a lot of developers even tweeting on this fact.

Regards,
Smith https://plex.software/
https://tutuappx.com/
https://vidmate.onl/