Webflow Tutorial: Ten Tips for Creating a Responsive Website

- NEW SKILLSHARE CLASS -
Hey all! I just launched a new course called "Webflow for Beginners". Most of the tutorials I do on KZbin are for intermediate users. But, I wanted to do something for folks starting from scratch. Click the link below to get 2 months of Skillshare Premium for free and be able to watch the course:
skl.sh/2PU9tML
- ABOUT -
Making your website responsive is critical. Not only does it mean your site looks good on tablets and on phones. Search engines prioritize responsive sites in their results (SERPs). Here's 10 tips on how to create a responsive site in Webflow:
1. The Container Class | 00:45
2. Proportional Units | 03:03
3. Flexbox “Wrap Children” | 05:05
4. Flexbox Alignment Reverse | 7:03
5. Keep your classes tidy. | 09:02
6. Text Columns | 11:28
7. Max-Width | 14:16
8. Background-image | 16:44
9. Landscape Declarations | 20:55
10. Ephemeral Units (EM) | 24:00
Microsite: jocando-tutorials.webflow.io/...
*Quick note. I consolidated all of the tutorials into one project and lost some stylings along the way. But the core functionality is still there.
Read-Only Link: preview.webflow.com/preview/j...
- ABOUT ME -
Serve - My Studio’s Site: www.madebyserve.com/
Dribbble: dribbble.com/Jose_Ocando

[@savageandminion]

Absolutely love how you set this video up and explained everything..especially EMS!!

[@dreamingofbutterflies]

thank you thank you thank you thank you!!! You just saved my project! Had a bit of difficulty fixing a section with reversing the position of two flexbox children, but now it's fixed! You're AMAZING!

[@andreac.avellan4640]

Thank you so much! This is so well done and organized.

[@jimmaccormaic6689]

Great stuff, Jose. This is one of the most informative videos I've seen yet about Webflow.

[@lolapple]

Absolutely love how you prepared a website with real-time adjustable content to illustrate each tip! Kudos and many thanks.

[@connorchatting420]

Jose, this was SUPER helpful... Thank you! I'm so glad you explained the proportional units! I've been using PX and I didn't know how simple it was to make text responsive!

[@vingraphstudios]

Thank you Jose! I am so happy to have found you on KZbin! I very much appreciate your style in teaching, top notch organization (i.e. timestamps on the sites and in the video descriptions) and attention to detail. Keep up the great work!

[@SSMMYY1000]

Finally such helpful video about creating responsive website! I was having such trouble with it.. Thank you so much Jose!

[@BrianDesimone]

GREAT VIDEO. Thank you for spending the time to make this. I learned a ton.

[@ohwhatworld5851]

Thank you for explaining EM so clearly. I get it now :)

[@loremipsum720]

Finally I have so clear understanding of the EM use. Not only for fonts but Margins and paddings!!!! Brilliant I'm testing that one

[@hobbiekhn3713]

Thank you so very much. You accent and the way you convey your thought is so easy to understand. I need more of your videos.

[@berbesso]

BEST VIDEO YET, VERYYY HELPFULL!!! Thank you!

[@marko2427]

Awesome stuff man!! Thanks for teaching us!

[@alexhartan]

Great work! I really like the attention to detail you put into all your stuff!

[@mindfulmagician7550]

Your videos are top class! You're so generous with your content and your time! Love your content!

[@jamarmartin884]

Jose, My guy. You saved my current and future projects! The read-only link you provided allowed me to really see all you've done, so I can follow your example. So informative and clear, thank you!

[@codingwithchelsea1181]

This helped me so much with taking an ugly responsive design into a beautiful one :) Thanks!

[@hassan.designx]

Best webflow tutorial on youtube!

[@carrieanntae]

Thank you so much for this tutorial. Very well done and organized. Keep them coming!

[@seanbrenner4127]

The reverse combo class!! My life just got a lot easier! thanks!

[@iamgsilva]

The background image styling is blowing my mind! This was an awesome lesson Jose! Thank you for sharing!!

[@sagedelaney2813]

Would absolutely love to see more videos like these!!!

[@igobyart]

This video is wonderful! So much great information and presented in such a simple way. Thank you for making this, Jose!

[@garethellison01]

Incredible lesson on responsiveness. I've always struggled with it. New to Webflow and that's the thing I would spend so long on without getting it quite right. So many useful tips. Can't wait to put them into effect. It was like a full lesson on responsiveness in half an hour! Awesome! Thanks so much!

[@JoseOcandoVideos]

So glad it was helpful :)

[@ramonalisa4187]

You are a wonderful teacher. Thank you!

[@christopherholt3782]

OMG, this tutorial was so well put together. Thank you so much!!!!

[@alexb1254]

I can't say how grateful I am for this vid. We are still waiting for the making-of video though. Thank you and keep the awesome tutorials rolling!

[@JoseOcandoVideos]

Thanks Alex. Appreciate the encouragement :)

[@aleexious2466]

Really like the flex wrap and EMs unit. Thanks for the tips Man 👌☺️👍🏻

[@neomirozow1586]

Explained beautifully, so helpful. Thanks, Jose!

[@citrinewilde824]

Excellent tips. I'm just learning Webflow, so thanks so much for sharing, Jose!

[@jevgenisuija]

Thank you Jose, very nice approach to present information!

[@TekJonesdesigns]

Great Tutorial. So much value in this one.

[@ahmarraza3625]

Thanks, Jose, all these are very productive tips.

[@MyDistortedWorld]

Great tutorial and understanding of responsive principles and concepts... As a seasoned and experienced designer, I still need to recap on front-end development and design from time to time. Technology moves soooo fast.

[@nga88nguyen]

Thank you! I learned a lot in a short time. Subscribed

[@TekJonesdesigns]

amazing value in this one Jose .... thank you

[@conchabelo]

This is great!!! Thanks Jose!

[@Jkim2509]

Thank you so much for this video!

[@derartas]

had to redo my whole project, but your vid helped me to understand!

[@geraldsmith8352]

Thank you! So helpful!

[@kalen04]

Jose, seriously, thank you!

[@aussiegod7996]

Wow this is absolutely incredible. It has taught me so much!! Thank you Jose!

[@emotran]

Love the video, super Helpful!

[@literallyshane4306]

You’re a really good teacher. Thank you ☺️

[@CyanCooper]

Wow, all of these were great, but #10 was 🔥 Thank you for sharing!

[@arrangoitze]

Jose, you are the best ! your tips are brilliant and extraordinary well exposed in a superb presentation, thank you so much for your great work, it will be really helpfull for me. Bless

[@jimmaccormaic6689]

Really excellent stuff, full of must-remember tips. Many thanks.

[@killianboiron5636]

Awesome video! Thank you so much for the upload :)

[@poncardas]

Wow! I learned a lot from this video! Thanks very much Jose!

[@donviktorg]

Very great video and clarified many of my troubles even so I consider myself an advanced webflow user. I hope you will make more this kind of basic yet advanced concept teaching videos.

[@JoseOcandoVideos]

Thanks Gazsi! That's very kind :)

[@mikezou9929]

super helpful video, still very informative even after 3 yrs, thank you, Jose!

[@helsontaveras7961]

Super beautiful and helpful video! Thanks

[@BringOutTheBeat]

This was really helpful, thanks!

[@TheKetoSurvivor]

DUDE! This stuff is awesome! THANK YOU! 😁👍

[@JoseOcandoVideos]

Thanks Joseph!

[@storyfirstfilms5983]

Thank you very very much Jose!

[@sorianosoul]

Hi, Jose. Love your video’s. Keep update this channel. 👍 Muchos gracias

[@bailey6759]

Thank you! You saved my sanity! AND my website! ❤

[@annakidesign-productdesign8010]

Thank you very much for this one, the pace was enjoyable to watch, and the video was full of useful information making it a great Webflow summary.

[@shanxi1]

super helpful!!!! thanks!

[@misssunshine5932]

Very nice tutorial. Thank you

[@dickyjiang]

Great Tuts Sir, well done !

[@MrSpertuzm]

sr loving your tuts!!

[@xMUSiCLiF3x]

This opened my eyes

[@ecila89]

Great video! So helpful!!

[@jacobnorman5420]

Thank you

[@Hell321100]

Awesome tips. thanks)

[@alishaheedmuhamad]

Thanks Sir !

[@SquishyBoat]

thanks so much for this.

[@itspraveensharma]

you are awesome man.....

[@markogveric9701]

Great! Thank you!

[@fiftyseventh]

Thanks so much!!!

[@ckbraman]

Really excellent.

[@mr.g3765]

Merci beaucoup, thank you very much Mr. Ocando

[@karimlonguar5826]

Love it :-) Are you releasing a video of the process of building this microsite ?

[@justinluethke]

That helped me! Hint: 22:22 - just delete the columns.. webflow will automatically create the second row.. I don't know if it's a new feature.. great video though:)

[@doity]

Please keep making webflow videos!

[@HafizIbrahimgraphicalark]

Super powerful video

[@ahmedwalid7309]

Thanks 😄

[@brandinglab100]

Really great, would like more info on type sizes and ems etc.

[@prateekkeshari]

AWESOME

[@djpauljerezz]

Amazing

[@ernestscribner9184]

Excellent video! That may be the best tips video I've ever watched. As a Webflow beginner and just come off a day of Webflow frustration, this video gives me the inspiration to keep going. In the video, you mention a longer video in which you re/create the sample website. I'm not finding it. Did you not end up making it? I see that you have a beginner's Webflow class. Is there a way of seeing a list of topics covered in that class? My interest gratitude.

[@JoseOcandoVideos]

Hey Ernest! That's awesome. Glad it was an inspiration to keep learning. I don't think I ever did that video... Life got in the way :) But it sounds like my skillshare video could be helpful? skl.sh/2PU9tML

[@lucasrochas2008]

Great stuff! You blew my mind with that font size tip. I have a question, what do you think about using Flexbox instead of grid in the "Landscape Declarations? Cause It seems that is easier to setup the flexbox and then change the horizontal flow for the vertical flow (mobile version). Thank you for this amazing video.

[@JoseOcandoVideos]

Hey Lucas! Great thought. Both work well, so it depends a little bit on what you prefer. I like using grid for this type of situation because it's really easy to specify the distance or gutter between the columns. Also, with grid 2.0, the elements get automatically repositioned as you delete columns, so it's gotten a lot easier. Hope that helps!

[@lucasrochas2008]

@@JoseOcandoVideos thank you so much. Hope we can talk more sometime.

[@riccardoinnocenti6539]

Hi Jose, thank you so much for the super clear explainations of all these stuff. I would like to ask a question about the text columns tips for masonry galleries. I just created for a client website a masonry product grid from an ecommerce collection list, but for example he wants the most recent products right on the top of the grid, so here is my question: How can I change the sequence of those items? I mean, now the items are following the columns direction starting from the first column to the last one. But the items are set from the most recent to the oldest but still they are vertically following the direction of the columns and in the second and the third columns I just see some of the older items at the top. Thanks in advance for your kind response, greetings from Italy!!

[@DANNFIGDESIGNS]

Thank you for the work you put into this. "Wrap" was a gem. 🙏🏼Out of curiosity, was this created before Webflow created their grid layout? If not, why would I use typography columns over grid? Didn't quite catch what the difference is. Still learning. :)

[@bySterling]

I played around w WebFlow but there was more of a learning curve than I’d hoped. 90% of my client builds are WordPress based. Curious if you have any design experience in WP and would you see WebFlow can have as much mobile friendly on scroll parallax and animations once you get very familiar w the platform? Can clients update any basic content w WebFlow if they don’t have much or any experience with or do they have to rely on the site designers for all edits?

[@iamtommyok]

26:30 Complete Webflow Pro-hack! Awesome work, hands down! Quick question about the side circles that function as a section marker; I saw you click it to bring you to a different section, are those styled link blocks within a div set to absolute positioning? How did you program the interaction to make each circle change color when the section is in view? Thanks!

[@JoseOcandoVideos]

Hey Tommy! It's been a while since I built that micro-site. But, I probably used fixed positioning as opposed to absolute. That way, it would stay in frame no matter if you scroll up or down. And yes! They are styled link blocks that are linked to an "anchor tag" or a section on the page. The link knows when it's in the section you linked it to. So, you can give it a style for its "current" state. Hope that helps!

[@7ldp491]

@5:45 are the team member icons arranged within a grid ?

[@parkhouse1983]

Love your video :-) really insightful. I am completely new to Webflow as I am building my Portfolio, your tip are very helpful. I have build many website but it is does not look very slick as the Pro :-( (as a side note, the video recorded is a bit Blurry) Thanks

[@JoseOcandoVideos]

Thanks Park! Just keep working at it and you'll continue to improve. In terms of video quality, were you watching at 1080p? If you weren't, that would definitely help to sharpen things up:)

[@parkhouse1983]

@@JoseOcandoVideos Thanks Jose for your reply. is it possible to have your honnest feed back about a website that I am developing in Webflow (split-project.webflow.io/)

[@parkhouse1983]

@@JoseOcandoVideos Thanks for your reply, I did not have the option to select 1080p on youtube when watching it last time. I have checked now the option 1080p is there.

[@anujmanerikar6491]

Hi , I am not able to set a fix width to the container, all I can do is give it a max width, how do I then build it for responsiveness?

[@arnoclaude317]

Hey Jose, thanks for the video! I stumbled upon a spelling error while looking at your website, make sure to correct it: You misspelled "critical" here: Start your project. Every project starts the same way. I ask questions, get to know you, and delve into the challenges you face. My crticial thinking roars to life and I envision what we will accomplish together.

[@JoseOcandoVideos]

Thanks Arno! If you've watched enough of the videos, you'll notice I'm an awful speller. Ha!

[@Londya]

Hi Jose, wondering if you can help me. If I'm correct, I believe you had a video on your channel talking about responsive design and on this video you redesigned a website in adobe xd/figma and then you uploaded that design into webflow to use as a base, and you started designing on top of it. I cant find the video now. If you made it private or took it off, could you reupload/make it public? That was really helpful to me and is one of the reasons why i subscribed to your channel. Really wanted to come back and revisit that video so I can start implementing that into my web design process. Hopefully you can help me with this...thanks

[@coopersamp6002]

Hey, great video Jose! Would you mind explaining what is happening at 18:10? I am having a hard time understanding how this is happening with a height of 0 and adjusting padding.

[@coopersamp6002]

also a side note, how are your images and text div blocks separated without margin? Thanks again!

[@JoseOcandoVideos]

Hey Cooper! Hoping to do a video on this at some point. But, padding (as a percentage) is relative to the width of the element. So, if I make the padding 75%, that's a 4:3 ratio. Then, I can nest something inside that absolutely, set it to width and height of 100%, and set the image-fill property to cover, and you should be golden :)

[@ZorroBlancoMX]

Hi Jose! I'm following your class at Skillshare (very good, by the way). And I'm jumping between here and there. I have a question for you, or anyone with the answer. When you create "sections" and add their corresponding tag, such as "Header"; you use divs instead of the section element. Why this? Can't I throw a section item and assign header tag to it? Or does it necessarily have to be a div?

[@JoseOcandoVideos]

Hey Carlos! Good question. If you use use your browser's developer tools, you can see how webflow exports the code. If I add a div block but give it a tag of header, you'll see it gets exported not as but as . I haven't tested it with the section component, but I double-checked with the div blocks to make sure. Thanks!

[@ZorroBlancoMX]

Jose Ocando thank you very much!

[@jonathanhutchinson5649]

One question, when you’re doing the flower wrappers in landscape. You changed the design for mobile landscape, to a single tile across in a square aspect ratio. You said it looked good, but isn’t that a mistake? I find it odd that webflow overlooks completely the ability to view mobile landscape as it would be in reality… with a small device height! It just seems like you fell into a trap which you could be forgiven for. Because in the case of that flower image, a single one of those grid squares would be multiple swipes? And that would be so unwieldy, when what you really needed to do was maybe a 2 or 4 across?

[@leah7147]

I learned so much from your video! I was referencing the Webflow read-only link, and it was super helpful. The link was working perfectly earlier, but now it leads to a 404 error on Webflow's website?

[@JoseOcandoVideos]

Hey Leah! So glad the video was helpful. I'm not sure what what happened to the read-only link. But, I tried copying it again and here it is! preview.webflow.com/preview/ten-tips-for-creating-a-responsive-site?preview=7521e2c2667bec1d535a4890ddc10bb8

[@leah7147]

​@@JoseOcandoVideos Awesome, thank for reposting. I'll be watching your other tutorials as well to improve my workflow. Great work!

[@JesseShauffer]

Hey man...I love what you are doing. Any chance you can make at least this project cloneable? Your popularity ok webflow would 10x.

[@JoseOcandoVideos]

Sure thing! Just made it clone-able :)

[@andreac.avellan4640]

@@JoseOcandoVideos It's gorgeoussss!

[@aleksejsaleksejevs7818]

What is the software you use in this video? Thanks! Like

[@JoseOcandoVideos]

Hey Aleksejs. I think you mean the software I used to design the website? If so it's sketch app. www.sketchapp.com

[@aleksejsaleksejevs7818]

Jose Ocando Thanks 🙏 for reply. So is that sketch app can be opened through browser?

[@JoseOcandoVideos]

Scetch is a desktop app and it's for Macs only. If you prefer something that opens in a browser try figma. www.figma.com and last, Adobe has a free web design product called Adobe XD. www.adobe.com/products/xd.html they all work great.

[@JoseOcandoVideos]

Hey aleksejs. I just realized that you might have been asking what I used to develop the website (not design it). Sorry if I misunderstood. Anyways, if that's the case, the development was done in Webflow (webflow.com)

[@Shindoable]

It's webflow :)