Responsive Web Design Tutorial For Beginners With Examples

Поділитися
Вставка
  • Опубліковано 30 лис 2024

КОМЕНТАРІ • 71

  • @abirahmed1292
    @abirahmed1292 5 років тому +71

    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
    @kimlindale9424 4 роки тому +40

    visual examples would make this easier to follow

  • @rceleo
    @rceleo 5 років тому +8

    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!

  • @simoncallelaverde
    @simoncallelaverde 4 роки тому +3

    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.

  • @mat650
    @mat650 5 років тому +2

    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!

  • @dominicstanway-williams8917
    @dominicstanway-williams8917 3 роки тому +5

    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

  • @EricHillAuthor
    @EricHillAuthor 4 роки тому +8

    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.

  • @joanacodes7042
    @joanacodes7042 3 роки тому +5

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

  • @waroakawa
    @waroakawa 2 роки тому +1

    thank you .. very helpful

  • @DevAnand7750
    @DevAnand7750 4 роки тому +3

    Nice explanations sir.

  • @johnleighdesigns
    @johnleighdesigns 5 років тому +1

    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

  • @BlueWhaleDevelopers
    @BlueWhaleDevelopers 8 місяців тому +1

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

  • @sarthakdixit2161
    @sarthakdixit2161 3 роки тому +1

    Crisp and clear. Thanks!

  • @annapolissolarpunk
    @annapolissolarpunk 3 роки тому +1

    thank you!

  • @shacyzdoodles5852
    @shacyzdoodles5852 5 років тому +9

    Short and simple, great one!

    • @disco.lemonade
      @disco.lemonade 3 роки тому

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

  • @phgharpure1994
    @phgharpure1994 3 роки тому +1

    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
      @FluxAcademy  3 роки тому +1

      Thanks for the suggestion! 🙏

  • @austamibhuyan5299
    @austamibhuyan5299 4 роки тому +2

    Thank you so much. it was very informative

  • @ruhanmoreira
    @ruhanmoreira 4 роки тому

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

  • @mradulparihar5766
    @mradulparihar5766 4 роки тому +1

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

  • @mriftiii
    @mriftiii 3 роки тому

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

  • @laravandersluijs3407
    @laravandersluijs3407 4 роки тому +1

    Very useful, thanks!

  •  5 років тому +1

    First! Great video, as always!

  • @eminad.1977
    @eminad.1977 4 роки тому +1

    Everything's on point! Thank you very much!

  • @vlog.dergam1746
    @vlog.dergam1746 2 роки тому

    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

  • @stevecahill9106
    @stevecahill9106 3 роки тому

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

  • @jansoukup3719
    @jansoukup3719 5 років тому +2

    I would prefer shorter videos, but great video as always

  • @joshthalheimer
    @joshthalheimer 4 роки тому

    Browser Stack. Good info.

  • @MORDEKAIZ
    @MORDEKAIZ 5 років тому +1

    Thank you for this free Tutorial!

  • @gregtegreg
    @gregtegreg 4 роки тому +4

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

    • @azd25
      @azd25 4 роки тому +3

      yes it is

  • @raskarjr
    @raskarjr 4 роки тому

    Amazing video, thank you

  • @RameenFallschirmjager
    @RameenFallschirmjager 4 роки тому

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

  • @absb07dj
    @absb07dj 4 роки тому

    👌☺️ 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)?

  • @salomeerard9512
    @salomeerard9512 2 роки тому

    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. ;)

  • @fatimatari6958
    @fatimatari6958 2 роки тому

    You are awesome

  • @rayrivera706
    @rayrivera706 4 роки тому

    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.

  • @paveltoufar1082
    @paveltoufar1082 Рік тому

    Amazing

  • @calimovebaby3752
    @calimovebaby3752 5 років тому

    thank you for your information👍

  • @thenoobpianist9527
    @thenoobpianist9527 3 роки тому

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

  • @milililie
    @milililie 5 років тому

    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

  • @brownfor
    @brownfor 5 років тому +2

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

  • @anilmelinmani9928
    @anilmelinmani9928 4 роки тому

    Thanks a lot

  • @illiacyzow8110
    @illiacyzow8110 2 роки тому

    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?

  • @deemakdaksina4034
    @deemakdaksina4034 5 років тому

    Ran, what font do u use for the thumbnail ?

  • @okishan
    @okishan 5 років тому +1

    The purple hair light is weird

  • @julianalimacunha
    @julianalimacunha 5 років тому +1

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

  • @winylz
    @winylz 4 роки тому

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

  • @Yoshomay
    @Yoshomay 3 роки тому

    Hi

  • @rockydagalea2422
    @rockydagalea2422 2 роки тому

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

  • @nimrodwander224
    @nimrodwander224 5 років тому

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

  • @cre8vedesign
    @cre8vedesign 5 років тому +1

    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
      @sunguru981 5 років тому

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

    • @johnnybecrafting9286
      @johnnybecrafting9286 5 років тому +3

      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
      @FluxAcademy  5 років тому +2

      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
    @lozzygee4262 Рік тому

    This is a crash course not for beginners!

  • @rabolpich
    @rabolpich 3 роки тому

    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!

  • @maz6421
    @maz6421 5 років тому

    beaut

  • @chiragtrivedi7025
    @chiragtrivedi7025 5 років тому +2

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

  • @theblackkaiser5748
    @theblackkaiser5748 3 роки тому

    LEARNED NOTHING.

  • @inaxos9
    @inaxos9 4 роки тому

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