Responsive Web Design Tutorial For Beginners With Examples

Check out BrowserStack: www.browserstack.com/
🤑 FREE Ebook "Getting started in Web Design" - Download here 👉 bit.ly/3vA8t2X
-
Learn how to design high-value websites:
bit.ly/Flux-Learn-Web-Design
-
Learn how to build custom websites in hours using Webflow:
bit.ly/Flux-Learn-Webflow
-
Flux is proudly sponsored by Webflow, start a new account with an awesome discount:
bit.ly/FluxWebflowDiscount
-
Instagram: / ransegall
Twitter: / ransegall
-
Gear & Book Recommendations: bit.ly/2ohFOuj
#responsive #webdesign #tutorial
Thanks for watching this Responsive Web Design Tutorial For Beginners

[@abirahmed1292]

It’s very difficult to follow you because you are giving verbal example, if you show us real visual example more while you are talking that would be awesome

[@kimlindale9424]

visual examples would make this easier to follow

[@simoncallelaverde]

As a Developer (with a marketing and advertisement background), I think you explained pretty pretty well everything about media-queries, screens and the dilemmas we have with browsers and stuff; the pixel perfect times vs this.

[@rceleo]

Best advice in the video is that reminder about where the audience is coming from ! Thank you!! I’m gonna get the Webflow class soon!

[@dominicstanway-williams8917]

Thanks for another fantastic tutorial dude, I want you to know how REFRESHING your approach is when compared to other video educators. You just lay out information clearly, with great real-world examples and without the steaming pile of ego that's usually on the menu... keep it up brother

[@mat650]

Context first is the right way to go! I totally agree with you on that. Mobile First or Desktop First is a consequence of the customer needs. Great content!

[@johnleighdesigns]

great to hear your thoughts again around these topics - its good to know you also dont specifically try to design mobile site and prefer to work on that during development in webflow - i agree clients seem to not be concerned about mobile its all about desktop but once you show how it does look on mobile they are happy with this process it works

[@ruhanmoreira]

Love it. The way you explain things is so clear, very consistent.

[@MORDEKAIZ]

Thank you for this free Tutorial!

[@shacyzdoodles5852]

Short and simple, great one!

[@disco.lemonade]

yeah, except that 3 breakpoints back in 2019 was absurd.

[@eminad.1977]

Everything's on point! Thank you very much!

[@sarthakdixit2161]

Crisp and clear. Thanks!

[@EricHillAuthor]

This was really informative. I consider myself an advanced beginner/low intermediate web developer/designer. I have a grand total of one web site that I've created as a school project. I'm trying to learn how to make the site responsive. Thanks to you know I now know the difference in responsive and adaptive. This helps a lot! Thank you.

[@FluxAcademy]

Thanks for letting me know!

[@laravandersluijs3407]

Very useful, thanks!

[@joanacodes7042]

I remember when I used my PSP to go on Facebook and I had to zoom every single time.. Haha good times.

[@absb07dj]

👌☺️ Totally agree with you, it depends on users' and client's needs. But what if users are performing part of the tasks on mobile (e.g. browsing products) and the other part on desktop (e.g. uploading heavy artwork files)?

[@mradulparihar5766]

Can we use different display pictures to reflect on dextop and mobile for the same website?

[@calimovebaby3752]

thank you for your information👍

[@raskarjr]

Amazing video, thank you

[@deemakdaksina4034]

Ran, what font do u use for the thumbnail ?

[@waroakawa]

thank you .. very helpful

[@RameenFallschirmjager]

The elaborate explanation about break points was good. Keep on the good work.👍And one question, you said you don't like relative sizes. So what is your weapon of choice?!

[@vlog.dergam1746]

Thank you soooo much!Amazing explanation!And it would be cool if you could share you knowledge making this cool video on the homepage(interactive)...I wish I new how to make..trying to find out

[@milililie]

Nice video, I like to hear how other designers think. I have a question regarding mobile version of a website - I sometimes struggle with the first screen. How do you make sure everything is where is supposed to be (eg. how far down can you put a call-to-action) since there are so many different screen heights for mobile phones these days? What do you take as a 'safe zone' for the first screen? I don't code, so maybe I need to explain it to a developer better, I don't know :P

[@annapolissolarpunk]

thank you!

First! Great video, as always!

[@FluxAcademy]

Yes! Thanks

[@austamibhuyan5299]

Thank you so much. it was very informative

[@FluxAcademy]

Glad it was helpful!

[@anilmelinmani9928]

Thanks a lot

[@gregtegreg]

Noob question: I can’t afford a 2k or 4k monitor, is it ok designing on a 1920 px wide resolution?

[@azd25]

yes it is

[@mriftiii]

This was a crash course in a video. Ran never disappointe us.

[@phgharpure1994]

You gave many great tips, easy to understand. It would have helped greatly if you had some visual aid as well since these things need to be imagined by the viewers as you talk about it. That being said, I still had a good learning time.

[@FluxAcademy]

Thanks for the suggestion! 🙏

[@paveltoufar1082]

Amazing

[@joshthalheimer]

Browser Stack. Good info.

[@fatimatari6958]

You are awesome

[@salomeerard9512]

Hey! How can you remove an item from the tablet and iphone without removing it from the desktop? In your video you say that you have deleted an item, but you don't show how. ;)

[@DevAnand-jb7id]

Nice explanations sir.

[@FluxAcademy]

Glad they were useful!

[@thenoobpianist9527]

Why dont you add an SSL to your sites...(https)? Cause according to me even that plays an important role in developing visitors trust.

[@rockydagalea2422]

great content. but your background light tower burned my eyes 😵‍💫

[@jansoukup3719]

I would prefer shorter videos, but great video as always

[@rayrivera706]

Great video. I do want to point out one thing though, please don't take offense. You have videos explaining how to demand 10k price tags for websites..but said web stack is expensive for a freelancer like yourself? If I had a freelance biz pulling in 10k (or high-value sites), that 12.50 a month would be pennies if it's a valuable tool for your business.

[@stevecahill9106]

I need to see how. How do you add the hamburger menu? Good verbal overview, show us how.

[@illiacyzow8110]

i don't get a thing. as for a mobile phones, resolution of 320p was i think on nokias in 2010. today's cheapest china smartphones have minimum resolution of 720p i guess. so why do all tutorials still say the resolution for a mobile phones of 240-480p?

[@brownfor]

i dont like the light in the background, is that necessary for the quality of your videos?

[@okishan]

The purple hair light is weird

[@julianalimacunha]

Your Webflow masterclass website is getting cut off on tablets landscape mode.

[@FluxAcademy]

Thanks will review!

[@Yoshomay]

Hi

[@BlueWhaleDevelopers]

you talk more than you teach or show... always have a practical approach with the prospective viewers

[@maz6421]

beaut

[@nimrodwander224]

היי רן פידבק קצר אני עוקב אחרי הערוץ שלך כבר כמה חודשים מאוד אהבתי את "העונה" הקודמת ואני חושב שאם בחרתה לעשות סירטונים ארוכים יותר אז צריך להכניס יותר דוגמאות/ יותר עריכה חיה כי ב-23 דקות של סירטון סטטי מאבדים את הקשב די מהר

[@winylz]

Good one. But you should consider the « mobile first » approach bro. Peace.

[@cre8vedesign]

would you ever do an honest review of webflow and discuss some of its limitations. I am going to be honest the sites I see that are done with it are poor and ameteur even done by big firms. So is it a webflow weakness in some areas or is it the fault of the person using webflow. Thanks

[@sunguru981]

His lips wont even tell a word about webflow .. coz they sponsored his entire channel ... so yeah

[@johnnybecrafting9286]

I think webflow is only as good as the person building on top of it. It’s a tool with CSS and JS capabilities so if you know about advanced CSS features like animation, keyframes, different layouts, then you could do some pretty amazing stuff on webflow. I’m sure Webflow’s Showcase page will demonstrate that you can in fact product great sites on Webflow. However, I’m still not completely sold on it and I’ve used webflow on numerous freelance projects. First off, it’s a great freelancer’s tool. It has payment features, shareable urls to show your client, among other things. I’m not a fan of their responsive design features- I end up doing so much custom coding that I might as well code the site on my own. Webflow does not have portrait/landscape mode options for responsive design and the breakpoints are just too few to take into account the many devices that are out there. In short, their responsive-design capability is limited- which leads me to believe that nothing beats coding the site yourself. Would I recommend Webflow to a designer, yes- absolutely yes, give it a shot, make some websites on it. Would I be limited and solely use Webflow for every project? No. It’s great to be flexible and expand your learning horizons.

[@FluxAcademy]

I have discussed webflows limitations many times, and i don’t think it’s a solution for everyone or that it’s perfect, however it works really well for me and that’s my honest opinion. As someone else mentioned here - it really depends on the person operating the software, as it’s basically just UI for code. If you don’t know what you’ll doing - you night do it poorly

[@lozzygee4262]

This is a crash course not for beginners!

[@chiragtrivedi7025]

your videos will seem more interesting if you are being seen less and exampless or content seen more @flux

[@rabolpich]

please show more of the practical side on your screen not yourself. your topics are great but you are just talking about them and we can't see!

[@theblackkaiser5748]

LEARNED NOTHING.

[@inaxos9]

too much verbalistic and nothing to learn. Please teach something.