ไม่สามารถเล่นวิดีโอนี้
ขออภัยในความไม่สะดวก
ต่อไป
เล่นอัตโนมัติ
Why use REM Typography in WebflowFlux Academy
มุมมอง 21K
10 Tips To Work 10x FASTER in WebflowMike Pecha
มุมมอง 6K
The Webflow Niche is a Goldmine - Here’s why…Payton Clark Smith
มุมมอง 112K
ฟิลิปเป โลโบ vs นาบิล อานาน ONE Fight Night 24 | 3 ส.ค.67Ch7HD
มุมมอง 218K
How to use BASIL on PIZZALionfield
มุมมอง 2.2M
Top 5 Webflow mistakes beginners makeFlux Academy
มุมมอง 66K
Webflow vs Framer: 2024 Guide for Web DesignersFekry Aiad
มุมมอง 11K
6 Webflow Micro Interactions You Can Clone TodayArnau Ros
มุมมอง 56K
Webflow Breakpoints Explained (Mobile Optimization)Metics Media X
มุมมอง 17K
Master Responsive Layouts Using Figma and WebflowArnau Ros
มุมมอง 10K
We Landed a $25k Webflow Client with This ProposalArnau Ros
มุมมอง 5K
I found more incredible 3D personal portfolios!!!Developer Filip
มุมมอง 169K
Responsive Text Layout in WebflowTimothy Ricks
มุมมอง 6K
Responsive Website In Webflow (Step By Step)Flux Academy
มุมมอง 39K
Tunnel of Doors to Secret Room!! #spd #chucky #Secretrooms #shorts #youtubeshortsSpriteDer SPD
มุมมอง 1.3M
เกิดใหม่ทั้งทีก็เป็นสไลม์ไปซะแล้ว ซีซั่น 3 - ตอนที่ 65 [ซับไทย]Muse Thailand
มุมมอง 226K
เจ๊เอ๋ จัดหนัก เงินดิจิทัล | สำนักข่าววันนิวส์ข่าวช่องวัน
มุมมอง 1.2M
บุษบา - เมนทอล [Official MV]จอจาน ยอยักษ์ โปรดักชั่น
มุมมอง 10M
Box jumping challenge, who stepped on the trap? #FunnyFamily #PartyGamesFamily Games Media
มุมมอง 3.7M
Do you still build using pixels? 👇
Great Video! Could you give us the link for the template so we can try it by ourselvs to convert the pixel website to a responsive one 🙏
Nope, not again. I was Frustrated by different kind of sizes. It won't problem be a problem again. thanx man🤝
As a beginner, one of the biggest problems I’m facing is responsiveness and scaling, this helped a lot thank you very much!❤
This was very helpful!! Thank you so much! I wish i saw this before building my first webflow site completely with pixels haha now I know!
going from wordpress to webflow but made the learning curve for a client project with a deadline. building out the website and desktop is starting to look goog but I finally checked the mobile version and it was a mess. this video is going to save me a huge headache just wished I knew this before building out so I could have implemented on my first try lol thanks for this def subbed and liked
This has been a lifesaver for me, I was really struggling to grasp this morning. Thanks a LOT for this.
was just looking for an explanation about this last week, thanks Arnau!
Thanks for this video, it's been super useful for me ! Please keep up the good work !
I totally agree and wrote a blog about stop using pixels a few years ago. Also useful to set the body text size as 1 REM - respect the user!
Thank you so much for this video!! I finally understand how it works and how it is used
Five stars from this old student to a great teacher. Thank you! x
Wonderful! Glad it was helpful :)
Thank you for this video! It's very helpful for me as a beginner.
Hugely helpful!
Love that! I was already aware of the concept of REM with Body font size for design system purpouse but never thought about how to implement it in webflow for responsiveness! Greate video :)
Thanks for watching Caio!
Just watching this video and it has helped me simplify rem and VW terms and usage
Great!
very helpful, thank you so much!!!
thanks a lot sir... I got soooo cleared about responsiveness and seriously it was sooo helpful.
your voice tone , speaking and teaching style is great.. thx BOSS .
Thanks for watching!
Great content!
OH my goodness! thank you so much for the tutorial. Very helpful!
Glad it was helpful :)
Insanely useful video, thanks!
Glad it was helpful!
super helpful. thank you!
Glad it was helpful!
i wish you have millions subs its worth content 😍
very helpfull thank you so much for explaining 🙏
Thanks Kazim!
Thanks! I converted to percentages a while ago but was still applying pixels to fonts
thank you bro u saved me a lot of stress
here to help!!
Thanks 😊
Tell me why I thought all the other units were dumb and that pixels are the best. Now I realize this is why I'm struggling with site restiveness
happens to all of us!
Wow!! What amazing video, haha Do you use this logic in every responsive building or there are some exceptions?
Great!
Glad you lkied it!
thanks for video Arnau, Can u do one about best chrome extentions please 😸
I have one already! :)
Great Video! Could you give us the link for the template so we can try it by ourselvs to convert the pixel website to a responsive one 🙏
I can see how you could use rem, but this doesn't really make it clear why I would use it. Unless I'm going to change my rem size at some point, this just seems to add an extra step. Even if we said that rem was 16 on desktop and 12 on mobile, this doesn't necessarily help because mobile spacing and scales vary a lot more than that simple division. The other supposed advantage to rem is for accessibility, but once a user is upscaling all the type on your site all the styling is going out the window anyway.
absolutely agreed, using pixels is better and way easier
I am confused !! what is the best for responsive EM or REM?
Muy interesante el vídeo y útil. Una pregunta Arnau, no te referías a EM's en lugar de REM's para que el texto escale responsivamente?
EM solo es relativo al parent element, REM se refiere al root html.
@@ArnauRos Entonces cuando debería usar REMs o EMs? Y porque usarias EMs en algunos casos?
Thanks for the tutorial, Do you use REM for all your projects? or are there specifics?
i always use rem, never pixels anymore. sometimes vw and %
Schlap them keys 😂
I find it easier using em for margin and padding ngl but the conversion from px is a bit of a hassle 😂
it takes time yep! worth it though
Bro what do you think about Bias concepts in ux.designing. Is it just a thing that we need to know as ux designer (or)
Do we need to consider it as part of everything in the whole ux journey ?
Defintely important! Might make a video :)
@@ArnauRos that would be great, and I appreciate that bro.
What is the purpose of REM if it is based on pixels? I understand that you can affect everything equally just by changing the root element value from for instance 16px to 20px, but other than that?
REMs are great for accessibility, when the user decides to change the way the site looks your design will scale with it
Seems to me that a company like WebFlow could just have a universal setting to construct in unit of your Choice with ability to modify individual components if needed.
ie - just click the "Prefered Unit = REM" button
I wouldve preffered that
How do you import Figma Effects or complex SVG elements created in Figma into webflow effectively?
You can export svgs in Figma and upload as an image
What about the pitcure on the right that disappears on smaller phone viewport? Where is it going?
it gets so small that you cant see it anymore, if you use rems or % its better
can u tell us how to get into the x-ray mode?
shift command x!
Why did you place a text div inside of your lef div. Why not directly place your elements into your left div?
I could've done that as well! It would've been easier to click on the div and spawn in the element I wanted, I just took the long approach.
Can we do our designs in pixel then convert it to rem at the end ?
sure!
i cant seem to find an answer as to how to actually take advantage of rem being responsive . by default 2 rem on desktop remains 2 rem on mobile. i've used a clonable site and seen it change, but how do you set this up? im missing that key piece of info. and is it only responsive per different breakpoints or is it responsive per screen size (ie iphone12max vs iphone se)
Bascially, REM allows your site to scale according to the root html element. This is set by default by the user's preference inside the browser. By default most people's will be 16px. Let me know if that helps
thanks for the reply. i've learned a lot this week about rems and have a bit more understanding. i was expecting that if i used rems in webflow, as the designer i would see differences in the webflow side panels - like it would automate my workflow in a way - this is bc i assumed the root size for desktop and mobile were different (creating a scale down that i could see in the styles panel as the designer).
But it seems it doesn't change your workflow at all. its strictly about the end users browser settings. is this correct?
i don't understand how REM is better from you demo. you're still choosing one static size. If i set a font or image to 1 rem, it remains 1rem (16px) as you adjust the screen size. just as it would if you used 16px. I do understand REM is responsive in the case where a user may chose larger/smaller test from their device, but you didn't mention this. Is there more to it?
Hey Arnau, a good video. Thanks for that. But I can‘t really follow your voice, because I only hear the restless background. :-(
Sorry about that Frank, take a look at some of the newer videos they are better sounding
Great advice, however, I could only make it through part of the video due to the music in the background. It gets kinda chaotic and stressful listening to both while trying to learn something new. In any case, I like the subject matter of the videos you've been putting out.
Noted!
you save my day, or my ass
hahah here to help!
But you didn’t really explain why you chose rem instead of percentages and why that even exists. It was also unclear why you changed all of the margins to rem? Explanation felt a little scattered and incohesive for me.
Apologies for that - REMS are great for accessibility standards. It’s size is based off the root html element, which means if the user decides to increase font sizes in their browser settings your site will scale for them. Not only that but it will make your building easier as it will scale the designs accordingly to the root html size.
Hope this helps!