@@MalewiczHype My fav tip was about showing what problem you are solving instead of the design of the app itself inside an app (at 5:52).
13 วันที่ผ่านมา +17
Great tip about designing the mobile version after the desktop with different type and copy! It’s interesting because it’s the opposite of what I learned in my UX course, where mobile-first was emphasized. However, I’ve noticed that with startups, you’re often working on redesigns or tweaks for existing sites or apps. This advice really helps clarify where to start.
We always do mobile last because you first need to define all the possible things a website can have and then you can start simplifying/removing. So mobile last - but mobile as a unique experience - tailored for the platform, not just displaying the same stuff as on desktop just smaller :)
@@chidorirasenganzThe content is not different and shouldn't be. The point here is that the content and elements should just be simplified to avoid cognitive load.
Yes this is exactly what I like to see. So many people laying emphasis on how nice the website looks, but a website's sole purpose is to convert users. I think you would make tons of cash or generate so many leads if you create an ebook on this topic. If you already have one let me know. Good job 👍
All the tips and tricks you shared in this video....just awesome. Lot's of things I learned today. I will make a key takeaway from this video. Thank you for all the tips. I would love to get more of this type of video. ❤
The subtitles saying MalewiczMetal surely rang a bell 😄 besides that small tips like tap vs click wording and toggle ≠ checkmarks are overlooked all the time 😅 thanks for the efforts you put in every video, every single time.
Love the way you put efforts into the community! I love the idea of having mobile-specific copy which should not be the same as a desktop version. Anyway, have an awesome day 💖
Love this!!! Wish way more people were discussing it. A couple of other things:I want to stress make that body text bigger! Not all of our users are in their 20s, or even their 40s--and you usually can't zoom a mobile page. Not leaving scrolling room around clicky elements. And "hover" elements that turn clicky on mobile and make the user think they've clicked an actual thing.
I'm always impressed with your content, Michal. You're just too good, lol! Every single video of yours had taught me a lot, and they still do. I've being watching you since september 2023. Today I'm being part of a job process, so within a few hours I'll get the answer. I hope that I can get this role, thank you so much for teaching me.
@@MalewiczHype Hello again, Michal! They actually delayed a bit their response, so I only got the news on the friday... BUT IT WAS AN AMAZING NEWS! I'm finally employed as an UI/UX Designer Junior for a brazilian company! I was unemployed since july 2023, and looking for an UI UX job since may 2024! I can't believe I managed to do that this "fast" lol. Thank you so much for teaching me!
Hey Michal, loved the idea of ignoring clutter type social proof for the mobile version. Would have loved to see you mention something about contrast, color, and value as well. People seem to have no real baseline as to proper usage of color, contrast, opacity/ transparency common practices. Or how much saturation or de-saturation should be present. As well as how those parameters interact. It seems difficult to find rules of thumb for color. Maybe a topic to explore in a future video? Thanks again for the great content.
Good stuff. Agreed that mobile is it's own experience. Definitely makes design and development more challenging, but clearly worth it when conversion rates are rocking.
Fantastic video 👏👏 you have put into words and visuals that have been in my head for a while now. Also there are some great comments in here, you have some intelligent viewers.
The issue with creating two versions of text is that it's quite uncommon since the content is typically the same across all screens. Moreover, implementing separate versions for desktop and mobile would require adding more elements to the DOM to show or hide them based on the device. Even if these elements are not visible, they will still be loaded, which could slightly affect the page's performance.
Changing the copy for mobile experience it's something we often don't consider, and I found out sometimes it's difficult to explain to the stakeholders that mobile and desktop experiences should be different, but they reply that they need to keep the consistency between the versions, otherwise users will be confused seeing 2 pages that aren't 100% equal.
@@MalewiczHype Was a bit surprised about trying to avoid having a sticky navbar, but I guess it can come back when a user starts scrolling back to the top again. Also was good to hear about not making some tappable elements very small for the sake of just fitting them in all in a horizontal line (experiencing this issue with one of the designers I am working with =/. Where you have Home, Solutions, Explore tabs, we are trying to put there 7 of those 🤦). Everything regarding the hero section on desktop and mobile, was just in time as I am redoing another project, which is an eccomerce. Also I agree with you (if I understand you correctly), first design for desktop and then for mobile. Makes it much easier in my opinion. Also I know the main focus was the hero page, but I think a lot of it applies to general complex mobile experience. A feature-full platfrom needs to be designed in a way that is the mobile screen is not clattered with all sorts of navigations and action buttons, even though it could be tempting.
Banner blindness! People forget how important research is to discover such things. It perfectly logical how something that looks like a banner is already part of a reflex reaction to skip it. Another factor about overload and animations is bandwidth. Designers sometimes forget not everyone is on a fast connection, users may be traveling and bouncing from cell tower to cell tower, an update to the OS could break the animations, etc. Lightweight static images will always load their fastest. Going to the opposite: I get so annoyed when devs are too lazy to design their site to take advantage of the horizontal screen real estate of desktop feeling as if they designed mobile first and said screw everyone else.
Fantastic video as always, I enjoy your visuals. My question: In a previous video about desktop sites, you pointed out that having the image of the persona looking at the CTA in the hero section is more effective than having them look somewhere random. How does this translate on mobile? In this video you use a woman looking into her smartphone.
Pto tips came in handy, moreover I have a question regarding forms, what if it's a travel app, what's the best amount of info and sizing in order for it not to be overcrowded
Practically speaking, we should move from responsive to adaptive to keep all points in video. Question is: how efficient is adaptive vs responsive for big projects?
This is what I'm searching for now. Thanks, Michal 🎉 When will you include mobile design for landing page in your courses? You are working on that, right? 😃
This video is really useful, but I have a question. In a situation where you have to work with predetermined templates, like when using Squarespace, Wix, or another web creator, if you change something in the mobile version, it automatically changes in the desktop version. What would you recommend? (Other than not using this type of website creator, haha.) Should we go more for the mobile version?
The general rule is not about it being "different" on mobile, but in general about shortening communication and removing clutter. You can do it on desktop too :)
I was thinking the same thing but I think what needs to happen is if you have a way to display something on Desktop and hide it on mobile (and vice versa) then you create the main section twice, hide the mobile one that has much shorter content, and then on mobile, switch and hide the desktop version and display the mobile one. Definitely takes more time and effort though 😅
@@MalewiczHype what's the done right way? I completely agree with what you're saying, but my understanding of consistent content from Google is, if the desktop and mobile content are drastically different, like 50% less text content, that would result in a significant ranking penalty, which would be devasting for a small business that doesn't have the brand power of larger enterprises.
There are a couple options. One is actually including the mobile heading (if it's a calculator for example) further down on the page for desktop and do the switcharoo. The content stays the same, only the order changes and some copy. Best starting point is of course to remove clutter from both first.
More on Mobile UX Design please... Mobile UX design is still too often undervalued by clients. With these tips, I can better convince the client. Hopefully, they will finally see the importance of the two different approaches for Desktop and Mobile.
Hey I am doing a website for my software agency and I am stuck on one decision. I have a particle background looking like stars it's not very distracting (in my opinion) but not sure if I should drop it just for solid one color background on the hero section. Love your videos btw. thank you for what you are doing! I don't want to advertise here so I didn't post link.
I know i've asked you this before but just to confirm can i get away with designing high converting websites and sell it to the client as a "high converting website" with minimal user research and testing due to social limitations like people not interested to do a usability test Thank you
You don't know if it's high converting without research. There are exceptions to most rules and there's likely a specific user group that will prefer a "worse" designed website. You can use heuristics to some extent, and yes, you can "sell it" as that, but I'd always push for any kind of research.
How so? I don't think so at all. It doesn't matter if it's a desktop or a mobile, the button should still follow the safe touch target rules and should never go lower than a certain number, doesn't matter if it's pt or px
5:03 We need more practical guidelines like this one. For Buttons, headings, margins for web view, desktop and mobile. It will be more helpful to get these from seasoned designer. Hope you make a video on that❤
hey Malewicz, would you consider reviewing upworks landing page? I have wonder what a ideal freelancing platform landing page looks like since they have two target audiences, the freelancers and the clients of course. I am developing a freelancer platform and would like to know hear out your ideas!
I'm blown away 🤯
There's so much value in this video it's amazing
Thank you! I always spend a lot of time making these
@@MalewiczHype ❤️❤️❤️
This is one of the best videos I have seen in my career. PURE GOLD. Tha,nks Michael, u are the best.
Glad you liked it! Which tip was your favorite?
@@MalewiczHype My fav tip was about showing what problem you are solving instead of the design of the app itself inside an app (at 5:52).
Great tip about designing the mobile version after the desktop with different type and copy! It’s interesting because it’s the opposite of what I learned in my UX course, where mobile-first was emphasized. However, I’ve noticed that with startups, you’re often working on redesigns or tweaks for existing sites or apps. This advice really helps clarify where to start.
We always do mobile last because you first need to define all the possible things a website can have and then you can start simplifying/removing.
So mobile last - but mobile as a unique experience - tailored for the platform, not just displaying the same stuff as on desktop just smaller :)
Same thought I had. Nowadays, many articles on mobile-first design pop up, and I am confused.
Design mobile last, but best :)
I kinda hate this approach tbh because I hate returning to a site and the content being different because I used a different device at the time
@@chidorirasenganzThe content is not different and shouldn't be. The point here is that the content and elements should just be simplified to avoid cognitive load.
Yes this is exactly what I like to see. So many people laying emphasis on how nice the website looks, but a website's sole purpose is to convert users.
I think you would make tons of cash or generate so many leads if you create an ebook on this topic. If you already have one let me know.
Good job 👍
I am creating something "paid" but it's not an ebook. It's a bit unconventional - coming in April :)
All the tips and tricks you shared in this video....just awesome. Lot's of things I learned today. I will make a key takeaway from this video. Thank you for all the tips. I would love to get more of this type of video. ❤
Thank you for making the video I've been asking asking other TH-camrs for, for over a decade.
That's only a tip of the iceberg as I'm collecting lots of data on mobile conversion at the moment.
The subtitles saying MalewiczMetal surely rang a bell 😄 besides that small tips like tap vs click wording and toggle ≠ checkmarks are overlooked all the time 😅 thanks for the efforts you put in every video, every single time.
Thanks! Yeah it's a method that's quite METAL ;)
I understand even more the important difference between desktop and mobile. Thank you for emphasizing such things.
Your videos is sooooo good !! Thank you for dubbing in french !! ❤ (I probably wouldn't have discovered you without) 😊
Love the way you put efforts into the community! I love the idea of having mobile-specific copy which should not be the same as a desktop version. Anyway, have an awesome day 💖
Awesome tips! Definitely a V2 of the series!
This was widely requested!
Your videos are always insightful and eye-opening. Thank you!
Amazing! Thanks for this concise and extremely informative video. I always look forward to your updates :D
Love this!!! Wish way more people were discussing it. A couple of other things:I want to stress make that body text bigger! Not all of our users are in their 20s, or even their 40s--and you usually can't zoom a mobile page. Not leaving scrolling room around clicky elements. And "hover" elements that turn clicky on mobile and make the user think they've clicked an actual thing.
I'm all for much, much bigger type and elements on mobile. For people of all ages! :)
Another one I'll have to rewatch - lots of good info (as always).
Really gonna help me reevaluate mobile hero sections when designing.
🙏
Thanks! This will all be eventually combined into something bigger and even more detailed ;-)
I'm always impressed with your content, Michal. You're just too good, lol! Every single video of yours had taught me a lot, and they still do. I've being watching you since september 2023. Today I'm being part of a job process, so within a few hours I'll get the answer. I hope that I can get this role, thank you so much for teaching me.
fingers crossed for your success!
@@MalewiczHype Hello again, Michal!
They actually delayed a bit their response, so I only got the news on the friday... BUT IT WAS AN AMAZING NEWS!
I'm finally employed as an UI/UX Designer Junior for a brazilian company! I was unemployed since july 2023, and looking for an UI UX job since may 2024! I can't believe I managed to do that this "fast" lol.
Thank you so much for teaching me!
@Malewicz i have been waiting for this video since community post xD Thank you for good work!
Thanks! That's only the tip of the iceberg, I will be going deeper
@@MalewiczHype Thank you :D
Loved knowing the ideal button heights for mobile 🙏 your videos are always gems for knowledge. Thank you 🤙🤙
Great to hear that! Yeah, bigger is best on mobile!
this video changed my views on the mobile breakpoint, thank you so much for this
the info is just gold
This video is a goldmine, I've learnt a lot
Hey Michal, loved the idea of ignoring clutter type social proof for the mobile version. Would have loved to see you mention something about contrast, color, and value as well. People seem to have no real baseline as to proper usage of color, contrast, opacity/ transparency common practices. Or how much saturation or de-saturation should be present. As well as how those parameters interact. It seems difficult to find rules of thumb for color. Maybe a topic to explore in a future video? Thanks again for the great content.
Thanks! I will be adding it to my list of topics to eventually cover :)
@MalewiczHype Now that's customer service on a next level. Take care x)
Good stuff. Agreed that mobile is it's own experience. Definitely makes design and development more challenging, but clearly worth it when conversion rates are rocking.
Useful videos as always. Thanks for sharing!
Love the micro visuals idea!
There is of course countless ways to do them - the general idea is to remove stuff that doesn't contribute on its own.
Fantastic video 👏👏 you have put into words and visuals that have been in my head for a while now. Also there are some great comments in here, you have some intelligent viewers.
Awesome content man, keep rocking
The issue with creating two versions of text is that it's quite uncommon since the content is typically the same across all screens. Moreover, implementing separate versions for desktop and mobile would require adding more elements to the DOM to show or hide them based on the device. Even if these elements are not visible, they will still be loaded, which could slightly affect the page's performance.
Yeah, you don't want those extra text bytes bloating up your 3D carousel.
@@edhahaz😂
Love this one! Learned some great tips. Cheers!
Thanks man, much appreciated! Which tip was your favorite?
@MalewiczHype I always felt there was something wrong with the toggles on mobile, and I also like the idea of a bigger checkbox in simple forms!
I love the shorter forms one the most!
Yeah, some brands go crazy with super-long forms.
Great job! I appreciate your knowledge.
Thank you! Great to also see some original channel subscribers from back when it started! :)
Very good insight shared! Thanks.
Changing the copy for mobile experience it's something we often don't consider, and I found out sometimes it's difficult to explain to the stakeholders that mobile and desktop experiences should be different, but they reply that they need to keep the consistency between the versions, otherwise users will be confused seeing 2 pages that aren't 100% equal.
There needs to be a level of consistency - for sure. But it can totally still be a platform-specific experience :)
Such good information. Thank you for sharing.
Glad it was helpful!
cheers for the great content as always!
Which tip was the most surprising?
@@MalewiczHype Was a bit surprised about trying to avoid having a sticky navbar, but I guess it can come back when a user starts scrolling back to the top again. Also was good to hear about not making some tappable elements very small for the sake of just fitting them in all in a horizontal line (experiencing this issue with one of the designers I am working with =/. Where you have Home, Solutions, Explore tabs, we are trying to put there 7 of those 🤦). Everything regarding the hero section on desktop and mobile, was just in time as I am redoing another project, which is an eccomerce. Also I agree with you (if I understand you correctly), first design for desktop and then for mobile. Makes it much easier in my opinion. Also I know the main focus was the hero page, but I think a lot of it applies to general complex mobile experience. A feature-full platfrom needs to be designed in a way that is the mobile screen is not clattered with all sorts of navigations and action buttons, even though it could be tempting.
Yes. that's exactly the point - mobile can't be just a shrunken desktop, it needs to be its own mobile experience :)
Very practical, thanks.
Banner blindness! People forget how important research is to discover such things. It perfectly logical how something that looks like a banner is already part of a reflex reaction to skip it. Another factor about overload and animations is bandwidth. Designers sometimes forget not everyone is on a fast connection, users may be traveling and bouncing from cell tower to cell tower, an update to the OS could break the animations, etc. Lightweight static images will always load their fastest. Going to the opposite: I get so annoyed when devs are too lazy to design their site to take advantage of the horizontal screen real estate of desktop feeling as if they designed mobile first and said screw everyone else.
Thank you! Very useful content! :)
These are very advanced concepts. I think it could be good to make it more known. The clients might get some awareness and know what they are buying.
loved the animation part lol, no one on mobile has time for a plane to land somewhere on a website!!!
Yeah, simple works best
Good info to implement :)
Absolutly brilliant. Must watch
Fantastic video as always, I enjoy your visuals. My question: In a previous video about desktop sites, you pointed out that having the image of the persona looking at the CTA in the hero section is more effective than having them look somewhere random. How does this translate on mobile? In this video you use a woman looking into her smartphone.
Here I show that image is completely not important :)
Pto tips came in handy, moreover I have a question regarding forms, what if it's a travel app, what's the best amount of info and sizing in order for it not to be overcrowded
Bunch of value.. 🔥
Which tip was the most surprising?
Amazing tips!
Awesome video, recently i have just design reponsive for mobile! but I wonder, is it fine for developer if we many changes in mobile?
Developers are not almighty. You should focus on the experience of the user, not the developer.
Practically speaking, we should move from responsive to adaptive to keep all points in video. Question is: how efficient is adaptive vs responsive for big projects?
This is what I'm searching for now. Thanks, Michal 🎉 When will you include mobile design for landing page in your courses? You are working on that, right? 😃
Maybe ;)
Thank you for great content ❤ ,
If there exists more high quality content for UX dekstop -> mobile I'm sure not finding it.
Nailed it!
In which part? ;)
@@MalewiczHype All of it.
This video is really useful, but I have a question. In a situation where you have to work with predetermined templates, like when using Squarespace, Wix, or another web creator, if you change something in the mobile version, it automatically changes in the desktop version. What would you recommend? (Other than not using this type of website creator, haha.) Should we go more for the mobile version?
The general rule is not about it being "different" on mobile, but in general about shortening communication and removing clutter. You can do it on desktop too :)
I was thinking the same thing but I think what needs to happen is if you have a way to display something on Desktop and hide it on mobile (and vice versa) then you create the main section twice, hide the mobile one that has much shorter content, and then on mobile, switch and hide the desktop version and display the mobile one. Definitely takes more time and effort though 😅
@@MattKelley I haven't thought of that, but it's actually a good solution. Yes, it needs more time, but the result will be quite nice. Thanks Matt!!
what font did you use??? i love it and want to use it! please someone tell me!
Great tips
Amazing Tipps!!!!
Thanks!
Thank you man!
No problem!
How does it impact SEO rankings from a consistent content perspective if the mobile content is different from the desktop version?
If done right it doesn't.
@@MalewiczHype what's the done right way? I completely agree with what you're saying, but my understanding of consistent content from Google is, if the desktop and mobile content are drastically different, like 50% less text content, that would result in a significant ranking penalty, which would be devasting for a small business that doesn't have the brand power of larger enterprises.
There are a couple options. One is actually including the mobile heading (if it's a calculator for example) further down on the page for desktop and do the switcharoo. The content stays the same, only the order changes and some copy.
Best starting point is of course to remove clutter from both first.
@@MalewiczHype I like the idea of the switcharoo. I will do some designs in Figma and see how I can implement them.
My new fav GD channel.
More on Mobile UX Design please... Mobile UX design is still too often undervalued by clients. With these tips, I can better convince the client. Hopefully, they will finally see the importance of the two different approaches for Desktop and Mobile.
I would do more, but for some reason people wanted to see the desktop video in much bigger numbers than this one ;)
would you take this approach for a clothing brand?
Also wondering if this is good for ecommerce
For any kind of physical products it's good to show the product right away - even at a cost of less text overall.
Hey I am doing a website for my software agency and I am stuck on one decision.
I have a particle background looking like stars it's not very distracting (in my opinion) but not sure if I should drop it just for solid one color background on the hero section.
Love your videos btw. thank you for what you are doing!
I don't want to advertise here so I didn't post link.
On mobile it's best to use simpler, single color backgrounds.
Would this be good for a single product ecommerce site?
In single-products sites you need to show the product in the header - that is essential :)
How does the different copy (desktop vs. mobile) influence SEO?
Click on desktop & tap on mobile, noted! Thanks
I know i've asked you this before but just to confirm can i get away with designing high converting websites and sell it to the client as a "high converting website" with minimal user research and testing due to social limitations like people not interested to do a usability test
Thank you
You don't know if it's high converting without research. There are exceptions to most rules and there's likely a specific user group that will prefer a "worse" designed website.
You can use heuristics to some extent, and yes, you can "sell it" as that, but I'd always push for any kind of research.
So what about hero section background image? We need to avoid it or?
If it makes sense it can stay. If it's purely decorational it adds to cognitive load and decreases conversion.
why am i stuck on the french audio track ? :(
you can switch it to the original
Nice
Giving the button sizes in pixels is pretty useless without knowing the screen size and pixel density.
How so? I don't think so at all. It doesn't matter if it's a desktop or a mobile, the button should still follow the safe touch target rules and should never go lower than a certain number, doesn't matter if it's pt or px
5:03 We need more practical guidelines like this one. For Buttons, headings, margins for web view, desktop and mobile.
It will be more helpful to get these from seasoned designer.
Hope you make a video on that❤
Please disable the automatically generated translated audio tracks and titles. They are incredibly annoying.
I thought it was just me haha
Tell the bonus point to Framer! The templates' review team forces you to make the nav items sticky
Nobody's perfect ;)
Genial que ahora este en español
Well, to be honest it is best, but this also means extra work on the development. Not that big, but still kinda lazy to do it lol
Hey, why dont you try to clone your voice ad use it as the translator voice. This one sounds Just Not good.
You can turn it off.
More mobile hacks plz.
Crack
Deez
You guys want to kill frontend developers. No consideration whatsoever
We only consider the business and the users.
voix horrible
hey Malewicz, would you consider reviewing upworks landing page? I have wonder what a ideal freelancing platform landing page looks like since they have two target audiences, the freelancers and the clients of course. I am developing a freelancer platform and would like to know hear out your ideas!