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🤝

[@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!

[@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!

[@stacheyweb]

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

[@mdalamgirkabir2751]

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

[@johnyplayz2278]

Insanely useful video, thanks!

[@ArnauRos]

Glad it was helpful!

[@abdul_wahab0]

i wish you have millions subs its worth content 😍

[@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

[@seb-astian-design]

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

[@ArnauRos]

shift command x!

[@vesto6864]

Thanks 😊

[@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?

[@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

[@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!

[@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

[@DiegoAllune]

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!

[@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 🙏

[@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

[@iamshirleyt]

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

[@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

[@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

[@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!

[@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?

[@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

[@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 %

[@dee6176]

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

[@ArnauRos]

Great!

[@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

[@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!

[@ejugwucletus4268]

thank you bro u saved me a lot of stress

[@ArnauRos]

here to help!!

[@mateusvidal3187]

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

[@ElBeeEss]

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

[@ArnauRos]

Wonderful! Glad it was helpful :)

[@shiraz3209]

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

[@sbylk99]

you save my day, or my ass

[@ArnauRos]

hahah here to help!

[@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

[@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!

[@vicbarreto2866]

very helpful, thank you so much!!!

[@jevgenisuija]

Great!

[@ArnauRos]

Glad you lkied it!

[@Alexaaaaxyz]

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

[@someonetookmynick]

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

[@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.

[@EnderEclipz]

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

[@ArnauRos]

Glad it was helpful :)

[@Xavier.Cubbin]

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

[@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?

[@momenahmed7676]

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

[@ArnauRos]

I have one already! :)

[@kazim6957]

very helpfull thank you so much for explaining 🙏

[@ArnauRos]

Thanks Kazim!

[@eslamdiaa8532]

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

[@ArnauRos]

sure!

[@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.

[@LaraColor-g4p]

super helpful. thank you!

[@ArnauRos]

Glad it was helpful!

[@mikerumble47]

Hugely helpful!

[@danielgriffiths4031]

Great content!

[@jayellwood]

Schlap them keys 😂