How To Build A Responsive Website In Webflow

Подписаться 61 тыс.

Просмотров 31 тыс.

50% 1

If you're still building in pixels you need to reconsider. Using pixels was great when the internet first started, but nowadays its much faster to build in REMs and VW's. Using responsive and adaptive measurements such as REM and viewport width and height allows your designs to scale better as they are seen in different viewports.
0:00 Intro
0:30 What is the difference between REM, VW, %?
2:52 When do we use what?
3:16 Building in VW
4:16 Converting PX to REM
5:47 Using % and VW
6:20 When do we use Pixels?
7:29 What we would need to do to scale up
🛠 Try Webflow 👇
webflow.grsm.io/arnau
🚀 Subscribe for more weekly design content
bit.ly/2FQLrO5
🎥 What I use in my videos!
kit.co/arnauros/filming-setup
📄 Bonsai Referral (try for free)
www.hellobonsai.com/invite?fp...
👨‍💻 Connect with me
arnau.design
🌎 Socials
/ arnau_design
/ arnau_design
DISCLAIMER: Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to you!

Опубликовано:

15 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 85

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

@meowmads 7 месяцев назад

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

@judithcreates 9 месяцев назад

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!

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

@someonetookmynick Год назад

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

@xav8273 Год назад

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

@ElBeeEss Год назад

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

@ArnauRos Год назад

Wonderful! Glad it was helpful :)

@Alexaaaaxyz Год назад

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

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

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

@shiraz3209 Год назад

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

@dee6176 Год назад

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

@ArnauRos Год назад

Great!

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

@mikerumble47 Год назад

Hugely helpful!

@vicbarreto2866 Год назад

very helpful, thank you so much!!!

@EnderEclipz Год назад

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

@ArnauRos Год назад

Glad it was helpful :)

@iamshirleyt Год назад

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

@johnyplayz2278 6 месяцев назад

Insanely useful video, thanks!

@ArnauRos 6 месяцев назад

Glad it was helpful!

@user-ie2bi6ro5r 4 месяца назад

super helpful. thank you!

@ArnauRos 4 месяца назад

Glad it was helpful!

@danielgriffiths4031 Год назад

Great content!

@kazim6957 Год назад

very helpfull thank you so much for explaining 🙏

@ArnauRos Год назад

Thanks Kazim!

@abdul_wahab0 Год назад

i wish you have millions subs its worth content 😍

@ejugwucletus4268 3 месяца назад

thank you bro u saved me a lot of stress

@ArnauRos 3 месяца назад

here to help!!

@vesto6864 Год назад

Thanks 😊

@mateusvidal3187 Год назад

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

@jevgenisuija 3 месяца назад

Great!

@ArnauRos 3 месяца назад

Glad you lkied it!

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

@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 11 месяцев назад

absolutely agreed, using pixels is better and way easier

@momenahmed7676 Год назад

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

@ArnauRos Год назад

I have one already! :)

@mdalamgirkabir2751 Год назад

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

@sinanouri5035 5 месяцев назад

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

@ArnauRos 5 месяцев назад

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

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

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

@jo69123 7 месяцев назад

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

@ArnauRos 6 месяцев назад

You can export svgs in Figma and upload as an image

@user-qy2lr5pw1x Год назад

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

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

@seatslider 19 дней назад

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

@ArnauRos 17 дней назад

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

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

@eslamdiaa8532 Год назад

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

@ArnauRos Год назад

sure!

@seb-astian-design 9 месяцев назад

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

@ArnauRos 9 месяцев назад

shift command x!

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

@jayellwood Год назад

Schlap them keys 😂

@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 4 месяца назад

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 4 месяца назад

I wouldve preffered that

@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

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

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

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