How To Build A Responsive Website In Webflow

[@ArnauRos]

Do you still build using pixels? 👇

[@Leon-dv5mz]

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 🙏

[@osanda.design]

Nope, not again. I was Frustrated by different kind of sizes. It won't problem be a problem again. thanx man🤝

[@stacheyweb]

As a beginner, one of the biggest problems I’m facing is responsiveness and scaling, this helped a lot thank you very much!❤

[@judithcreates]

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!

[@meowmads]

This has been a lifesaver for me, I was really struggling to grasp this morning. Thanks a LOT for this.

[@ziggerwebdesign1704]

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!

[@ElBeeEss]

Five stars from this old student to a great teacher. Thank you! x

[@ArnauRos]

Wonderful! Glad it was helpful :)

[@sdnetwork4423]

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 .

[@ArnauRos]

Thanks for watching!

[@dee6176]

Just watching this video and it has helped me simplify rem and VW terms and usage

[@ArnauRos]

Great!

[@IlonaJosiane]

I am learning so much with watching your videos . Thank you so much for sharing this amazing source of information.This one is quite helpful.

[@ArnauRos]

Glad it was helpful!

[@lilbitcoin4507]

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

[@TheBClark88]

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.

[@delveticas]

absolutely agreed, using pixels is better and way easier

[@CaioGonzalez]

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 :)

[@ArnauRos]

Thanks for watching Caio!

[@mdalamgirkabir2751]

I am confused !! what is the best for responsive EM or REM?

[@someonetookmynick]

was just looking for an explanation about this last week, thanks Arnau!

[@iamshirleyt]

Thanks! I converted to percentages a while ago but was still applying pixels to fonts

[@BetterToday-y]

Insanely useful video, thanks!

[@ArnauRos]

Glad it was helpful!

[@shiraz3209]

Thank you for this video! It's very helpful for me as a beginner.

[@Xavier.Cubbin]

Thanks for this video, it's been super useful for me ! Please keep up the good work !

[@Alexaaaaxyz]

Thank you so much for this video!! I finally understand how it works and how it is used

[@Leon-dv5mz]

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 🙏

[@rickbossenbroek]

Pro tip: If you use this piece of code, you can make it easier to “convert” it to REM. html { font-size: clamp(62,5%, 1vw, 75%); } 62,5% equals 10 out of 16. So instead of figuring out the right REM value, you just devide the Figma value by 10. 10 Rem = 100 pixels. And due tot the clamp to 75%, the website even scales a bit for larger screens.

[@ArnauRos]

nice ! thanks for this

[@EnderEclipz]

OH my goodness! thank you so much for the tutorial. Very helpful!

[@ArnauRos]

Glad it was helpful :)

[@JanThomassen-x5q]

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?

[@ArnauRos]

REMs are great for accessibility, when the user decides to change the way the site looks your design will scale with it

[@seatslider]

What about the pitcure on the right that disappears on smaller phone viewport? Where is it going?

[@ArnauRos]

it gets so small that you cant see it anymore, if you use rems or % its better

[@johnleighdesigns]

ive been trying to create a hero section with large background image with text on lext side and main image content on right - im going to try the REM approach though noticed in your mobile breakpoints you got rid of the image completely - guessing thats just a style choice

[@jo69123]

How do you import Figma Effects or complex SVG elements created in Figma into webflow effectively?

[@ArnauRos]

You can export svgs in Figma and upload as an image

[@sinanouri5035]

Thanks for the tutorial, Do you use REM for all your projects? or are there specifics?

[@ArnauRos]

i always use rem, never pixels anymore. sometimes vw and %

[@ejugwucletus4268]

thank you bro u saved me a lot of stress

[@ArnauRos]

here to help!!

[@LaraColor-g4p]

super helpful. thank you!

[@ArnauRos]

Glad it was helpful!

[@seb-astian-design]

can u tell us how to get into the x-ray mode?

[@ArnauRos]

shift command x!

[@tristenvukelich5280]

Why did you place a text div inside of your lef div. Why not directly place your elements into your left div?

[@ArnauRos]

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.

[@createwithshanice]

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

[@ArnauRos]

happens to all of us!

[@kazim6957]

very helpfull thank you so much for explaining 🙏

[@ArnauRos]

Thanks Kazim!

[@mateusvidal3187]

Wow!! What amazing video, haha Do you use this logic in every responsive building or there are some exceptions?

[@abdul_wahab0]

i wish you have millions subs its worth content 😍

[@mikerumble47]

Hugely helpful!

[@vicbarreto2866]

very helpful, thank you so much!!!

[@eslamdiaa8532]

Can we do our designs in pixel then convert it to rem at the end ?

[@ArnauRos]

sure!

[@goldenant9450]

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)

[@ArnauRos]

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

[@goldenant9450]

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?

[@danielgriffiths4031]

Great content!

[@jevgenisuija]

Great!

[@ArnauRos]

Glad you lkied it!

[@goldenant9450]

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?

[@momenahmed7676]

thanks for video Arnau, Can u do one about best chrome extentions please 😸

[@ArnauRos]

I have one already! :)

[@artech5539]

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 ?

[@ArnauRos]

Defintely important! Might make a video :)

[@artech5539]

@@ArnauRos that would be great, and I appreciate that bro.

[@j.espinosa]

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?

[@ArnauRos]

EM solo es relativo al parent element, REM se refiere al root html.

[@j.espinosa]

@@ArnauRos Entonces cuando debería usar REMs o EMs? Y porque usarias EMs en algunos casos?

[@vesto6864]

Thanks 😊

[@angelova.nikoleta.design]

I find it easier using em for margin and padding ngl but the conversion from px is a bit of a hassle 😂

[@ArnauRos]

it takes time yep! worth it though

[@bv2999]

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

[@ArnauRos]

I wouldve preffered that

[@jayellwood]

Schlap them keys 😂

[@frankbutler6503]

Hey Arnau, a good video. Thanks for that. But I can‘t really follow your voice, because I only hear the restless background. :-(

[@ArnauRos]

Sorry about that Frank, take a look at some of the newer videos they are better sounding

[@DiegoAlexanderOfficial]

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.

[@ArnauRos]

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!

[@LordJHouse]

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.

[@ArnauRos]

Noted!

[@sbylk99]

you save my day, or my ass

[@ArnauRos]

hahah here to help!