Best Design Width for a Webflow Build
Vložit
- čas přidán 27. 08. 2024
- Get the Figma to Webflow Plugin (affiliate link)
webflow.grsm.i...
Check out the Wizardry Technique for fluid typography
• Introducing Wizardry 2.0
Join my Webflow Wizards Community
/ timothyricks
Try Webflow using my affiliate link below.
webflow.grsm.i...
1440 it is!
i've been developing on 1920 and was very very frustrated on how to address the 991 ~ 1100px viewports and this is it!
Thanks again Tim!
I'm so glad this helps! Definitely wish I would have learned this sooner
@@timothyricks Tim, i'm the guy that was repeating Eureka until I got comfortable with the best practices introduced there. I asked in office hours what the next step for me is and you mentioned client first and lumos. I will jump straight into lumos as I'd like to shorten learning time. thank you Tim. I'll keep you posted.
thanks as always man! finally I can send this one to a client of mine who designs in 1920
So glad this helps!
Note that's not a html attention span. That would look like this ATTENTION
Mr T.Ricks, your tutorials rock brotha!
Thank you Timothy!!! This is very useful. 🎉
Really glad to hear that!!
Hey Tim, I really love to see the way you work with Webflow. Is your Pateron wizard course covers the entire Webflow process like from start to finish?
Thank you man for the tips! but how about if I want my design to stretch over on larger breakpoints that could be added in Webflow? should I use REM?
Sure thing! I think you’d just remove the max width from the main container so the design can go edge to edge. Maybe wrap the text in smaller containers to limit the max number of characters on each line.
I’d avoid adding larger breakpoints as much as possible. If your sizes are set with EM or REM, you can use an adaptive approach with media queries to increase everything at certain screen sizes.
Hi Tim, The width itself It doesn't matter if we design with VW and EM, right? because the size will always be proportional.
Yes but for accessibility reasons you don't want your body text and other informational text to be in VW or VH as they could become too small
Exactly! Design width doesn’t matter when using proportional scaling, but proportional scaling doesn’t allow the user to zoom to adjust their font size. Disproportional scaling is better for accessibility like shown in the video. 🙂
@@timothyricks thanks Tim for the tricks!
Tim, how can I import SVG background elements into webflow, without them losing all properties like gradients, shadows, and other effects?
what do u think of the figma to webflow? i dont have a lot of experience with figma, so for me it has felt like a lot of work just to get the auto layouts setup. then, when i typically paste to webflow, it feels like i have to do quite a few edits to make it look right. sometimes the div boxes dont add up and then you have to make all the mobile versions in webflow.
i'm debating if it's better just to design in figma without all the autolayouts then just using something like relume to build it would be faster or not? or i need to get better at figma.
Relume is likely still faster TODAY. But when the Figma plugin is fully matured it'll be much more powerful. Maybe for now just use the plugin for small sections to continue to learn it, and then your normal process for the rest of the site.
That’s true how it’s still in the early stages! Haven’t decided yet if I want to try it on a client site. On one hand, it could at least be helpful for getting all the content in. And then we could remove the classes and add our own instead of spending time finding any unneeded styles it applies.
Thank you so much Tim pointing out the most critical issues and solution! :) One thing I was wondering, are you still using 16:9 proportion in Figma with 1440px when designing in Figma? I see that your frame height is 939.75px for 1440px width. I know different devices has different proportions but what would be the best case to work on with the height to define the screen height in Figma do you think? I mostly use 1440x1024 px.
Hi Barry, good question! 939px just happened to be the height of my content in this case. When mocking up a 100vh section, I use a 16/9 ratio, 1440x810. The height doesn’t matter that much though and will change depending on device and browser condition like you mentioned
Would love to see a tutorial from you on how to add drawing signatures to forms. Seems borderline impossible.
I use Lottie for this
Hmm is 1920 size more commen these days ?
Also, like the short snippets of 2to4 mins..Unfortunately, we ALL have dev'd a short attention span :(]
can you please share us the figma file?
Hey man, thanks for the tutorial. What recording software are you using for increase the size of cursor and make it move smoothly?
It's amazing!
Thank you! I'm using an app called Screen Studio for recording. Here's my affiliate link if you're interested.
screenstudio.lemonsqueezy.com/?aff=XgJRV
Hey Tim, what Font is it in the headline?
Thank you Tim as always, would this be tied into why text and photos look blurry when there are interactions applied? i've been having a lot of trouble with my very first webflow project with the blurry and fonts seem to be "jumpy" or not rendering properly when there a type of animation applied to them i'm using svgs when i can if its not a live font and photos are jpg Thank you for all your magic lol in webflow truly amazing and i've learned so much
Hmm, are you using scale by any chance? Elements usually look blurry when scaled above 1.
@@timothyricks thank you for the reply I don't believe I am ill double check my elements thank you
Thanks Timonthl, quick qestion 1440 px or 1280 px artboard for design? and the container size 1140px? I have learned using 1280px artboard ...what is you to option ?
Oh, good question! Either one should work fine. Personally, I prefer the 1440px design width so everything doesn’t look too small on larger screens. I find it’s a good balance between most desktops and the tablet breakpoint.
@@timothyricks thanks . That make sense. what container size you use with 1440px?
@@kashdesign Usually my main container is full width with 48px padding on both sides.
@@timothyricks Thank you! that was very useful to hear you process.
@@timothyricks why is it 48px? why not using for instance 40 or 50px
Hey mate, what's the container width when you design on 1440
Hi, it would be a 1440px container with padding inside on the left and right.
what is padding width?@@timothyricks
@@nubreakz1 depends on the design