Golden nuggets throughout! Thank you! I have always been leaving mobile until the end. Currently learning Figma so the tip about designing both at the same time is an absolute gem!
Hello Charli! You're probably the very first designer to whom I am going to follow now. You're smart, fast and too the point. So, HighFive for that and you're doing a really great job. So, Keep it up. You have recently become my Sketch teacher :D and I am now on to learn so many other things from you in future..
hi, charli!! i've been watching your videos for a while now and i really love them :D your videos are pleasant to watch and i like your design work. i'm a beginner web developer and a hobbyist artist.. i really like web design too, i just don't quite know how to do it yet, but i'd really like to work with it along with web dev. your work really inspires me and i always look forward to see more from you. it's also great that you can represent us women in this kind of career. thanks a lot for your videos and work!! keep it up!
A great way to consider if you should start with a "mobile-first" design is to check the client's metrics. If the client says, "hey the data tells us that 80% of the users that come to our site is on mobile", then obviously consider mobile as a priority. On the other hand, I've had clients that tell me "80% of the users come from desktop". You might be asking, "Why is that? Everyone is on mobile nowadays!" It all depends on the use-case or the purpose of the site. There is a majority of B to B sites where users are generally on desktop. Personally, I don't like using the term "mobile-first" since clients tend to throw use it as a catchphrase for everything. Unfortunately, the design industry instilled this habit early on when we were making the transition from flash sites (remember those?). Sites should look great on any device and a lot of the time the choice of whether you use an adaptive or responsive layout depends on the research done in the earlier phase of the project.
You mentioned Flexbox and a link in the description, but I only see links to Webflow. Do you have a specific article you recommend to read? It sounded like you had something in mind in your video. Thanks!
Good summary at the end! So many tutorials, advice videos and education content leave that out. I always find it helpful to have a summary at the end to keep the just learned stuff better in my brain. :)
CharliMarieTV Good decision. :) Especially with longer-format videos - 10+ mins - I think it doesn’t matter whether those are 1 or 2 mins longer due to a summary at the end.
One, great video as usual. Two, I'm glad someone talks about this and I appreciate at the end where you talk about adjusting copy for mobile as well. Something I didn't think about in terms of websites even though it paramount when crossposting on social media.
I just found your channel and all your videos are great tools because im currently redesigning my website. My only comment is the sound mixing, im watching this on my phone with headphones and your voice is low compared to the outro music. Just a little thing. Otherwise love the content thanks for sharing!
Less animations, transitions and events. Compressed images to no images helps too, loading the layout stylesheets first then lazy load the rest of the stylesheets. Hmm, that maybe not the work of a designer, but it is good to have the "survival styles" for lower end and old devices or for 3g connections.
Thanks for the video, Charli! Quick question. Have you used Adobe XD (Experience Design)? If so, what are your thoughts on it as a software product vs Sketch?
I’ve still not used adobe XD as I like Sketch so much! But I promise one day soon I will try it for a project and make a video about it. To be honest I’m more interested in learning Figma these days tho!
This would be amazing, and exactly what I’m doing now..but I’m using an existing web-builder site and I don’t have that much control over the templates, and I can’t code. When the business takes off, I will get a web-designer on board to remaster the whole thing. Hard to go with these limits for now, but that’s life:) Love the advice here. Thx!
For text, a good way to ensure great fitting is to use vw. So set the font size to 2vw and you will see your text adjust to the viewport. It saves a lot of time adjusting via media queries.
After watching a few of your videos (and getting a lot of inspiration out of them) I just want to say: not using Mobile First doesn't make you a bad designer - just a bad developer ;) Just kidding, but the advantage will be that by concentrating on the minimal mobile version you will also optimize resources and thus increasing the speed your page can be loaded. Hope that helps! :D
When I started there wasn’t “smart phones” but still screen widths varied and browser compatibility was not a given. Flash animation which was big in 2003-04 is just a resource hog now. What a waste of time learning that system ugh. As for images, used to be if you didn’t specify a ratio the image would distort or layers would overlap. While these drag and drop programs are decent now, they all are not the same. Best design is simple and with minimal elements. Point is to communicate, not to wow people who couldn’t care less about the best Java script interface. Good video and on point. Well done.
Lol, I used to do ALL this in code (graphics in PS) at latest company. Those breaking points you mention, and all code, that's a ton of complex/tedious work that used to take way more time... I guess am gonna start giving Webflow its value....
Have to disagree about the best grid system being flex box. The best system surely has to be CSS Grid? If you have to support internet explorer then either have an alternative flex box layout, or just use flex box for all.
I think this is still up for debate If anyone else reading the comments wants to dive deeper into this then I'll leave this handy Medium post here: hackernoon.com/the-ultimate-css-battle-grid-vs-flexbox-d40da0449faf Both have their pros and cons for sure.
It's a good article to link. I think the debate really only comes down to browser support to be honest now. It's up to over 85% since the article was written, and from my own experience, I have moved to stop trying to make things look the same in all browsers - have it be functional in all, but the newer ones get the best stuff - tennents of progressive enhancement. That's not to say Flex doesn't have it's place - I use it all the time for what it's good at - single dimensional items, such as navigation, and for positioning within structures, I just use Grid for laying out those structures. There are layouts though that can only be done with CSS Grid. I know for many of the layouts I do, it has been the key to jumping from adaptive design to more responsive for many layouts. I'm coming at this from a slightly different side, as I'm primarily a front-end developer who can design also (I'm not a great designer, and try to be better, hence why I subscribe to your channel! Thanks for the great work you do.
I’m sure you can create a mobile website in Dreamweaver! But it doesn’t have the features I talk about here. The principles and tips still apply though no matter what you’re using to build your site :)
hello charli , i have seen your vlogs. these are awesome and very helpful. Are you using adobe xd as well?? or if u have any idea about adobe xd then please make a vlog on this too.. thank you.
I'm glad you like my videos! I don't use Adobe XD, so won't be making a video about it anytime soon. My digital design tools of choice are Sketch and Figma.
Hahahah, well , could you tell me how does that work, because I'm about to finish the academy I'm going to (Java, Javascript, HTML, CSS, MySQL, JQuery, Java Web, FXML, Software Engineering). So I'm kinda scared that I won't get a job, so I'm wondering how did you get to this point and is it profitable :)
It sounds like you're more of a web developer than a designer if your learning was focussed on code? but even still, open up any job website and type in 'front end developer' or 'web designer' and you'll find sooooooo many jobs! that should ease your worry that there are no jobs. Tech is huge. the web is huge. as with any job you have to prove your skills through a portfolio and interviews, but if you're good, you'll be absolutely fine (and if you don't think you're good yet, keep working until you are!)
Thanks for such a detailed look at mobile web design! It was cool seeing how you use Webflow as well. I’ve used Flexbox a ton but recently been playing around with CSS Grid. I’ve been really inspired by Jenn Simmons and her thinking around flexible layouts (ua-cam.com/video/lZ2JX_6SGNI/v-deo.html). It seems like you have a go-to layout that you use but I’m curious, have you played around with non-traditional layouts before?
I wouldn't say I have a go-to layout as such! For the web design I do at work I do always use a 12 column grid because our site uses Bootstrap, but that doesn't mean you have to have things in each of those 12 column, you can still create interesting layouts by offsetting content etc! Thanks for the link to this video, looks interesting!
Web design is different to web development. I think you’re confused about what skills and responsibilities go into each. But anyway, I do know HTML and CSS, not that I have to prove myself to you.
@@charlimarieTV you can design using code, actually that's what you are doing except you're not writing the code yourself (which is ok offcourse), for example just type "responsive web design" and you will see all the videos are about coding the design
Design and development are two different skill sets. Of course some people design in the browser, but even then the term “design” is generally referring to the UI/UX of the page - and code is simply the method with which you’re creating that design. If you’re looking for videos about code specifically I suggest you use “responsive web development” as your search term. Hope that helps!
@@charlimarieTVi understand your point but that's the term most UA-camrs use, you are literally one of a handful of UA-camrs (i have seen) that use the term "design" to just talk about designing but i guess this is a problem in the community (Designing, Developing, Coding, Programme) no one can settle on a term
The last one was great. I had never thought it that way. Thank you so much. Also, love that hoody/jacket!
Glad I could help! And thank you, I’d just bought it the day I filmed this and the bright yellow made me happy :D
Golden nuggets throughout! Thank you! I have always been leaving mobile until the end. Currently learning Figma so the tip about designing both at the same time is an absolute gem!
Hello Charli! You're probably the very first designer to whom I am going to follow now. You're smart, fast and too the point. So, HighFive for that and you're doing a really great job. So, Keep it up. You have recently become my Sketch teacher :D and I am now on to learn so many other things from you in future..
Newly started web development student here, Charli. Thank you for the videos. They’re highly informative and presented greatly!!!
hi, charli!! i've been watching your videos for a while now and i really love them :D your videos are pleasant to watch and i like your design work. i'm a beginner web developer and a hobbyist artist.. i really like web design too, i just don't quite know how to do it yet, but i'd really like to work with it along with web dev. your work really inspires me and i always look forward to see more from you. it's also great that you can represent us women in this kind of career. thanks a lot for your videos and work!! keep it up!
Thank you Marisa!! Keep being curious and trying things and you will form a good knowledge of design to complement your dev skills I’m sure! :)
A great way to consider if you should start with a "mobile-first" design is to check the client's metrics. If the client says, "hey the data tells us that 80% of the users that come to our site is on mobile", then obviously consider mobile as a priority. On the other hand, I've had clients that tell me "80% of the users come from desktop". You might be asking, "Why is that? Everyone is on mobile nowadays!" It all depends on the use-case or the purpose of the site. There is a majority of B to B sites where users are generally on desktop. Personally, I don't like using the term "mobile-first" since clients tend to throw use it as a catchphrase for everything. Unfortunately, the design industry instilled this habit early on when we were making the transition from flash sites (remember those?). Sites should look great on any device and a lot of the time the choice of whether you use an adaptive or responsive layout depends on the research done in the earlier phase of the project.
You mentioned Flexbox and a link in the description, but I only see links to Webflow. Do you have a specific article you recommend to read? It sounded like you had something in mind in your video. Thanks!
I think I have a link to help, internetingishard.com/html-and-css/flexbox/
Great straight to the point video, was able to absorb all the information easily!
Hey Charli! Just wanted to tell you that I love your content :) Keep rockin' girl!
Just wanted to let you know that I just signed up for WebFlow through your link. First I've heard of it... looks EPIC! :)
thanks so much! Hope you enjoy checking out Webflow! :D
Good summary at the end! So many tutorials, advice videos and education content leave that out. I always find it helpful to have a summary at the end to keep the just learned stuff better in my brain. :)
I'm so glad you mentioned that! I was debating including it cos it makes the video longer, but I thought it would be useful.
CharliMarieTV Good decision. :) Especially with longer-format videos - 10+ mins - I think it doesn’t matter whether those are 1 or 2 mins longer due to a summary at the end.
One, great video as usual. Two, I'm glad someone talks about this and I appreciate at the end where you talk about adjusting copy for mobile as well. Something I didn't think about in terms of websites even though it paramount when crossposting on social media.
glad you enjoyed it Lauryn!
Great video! Thanks!
I just found your channel and all your videos are great tools because im currently redesigning my website. My only comment is the sound mixing, im watching this on my phone with headphones and your voice is low compared to the outro music. Just a little thing. Otherwise love the content thanks for sharing!
Thank you so much! You are giving so much value for free! Damn, i just watched 2 videos of your channel in one day! ;)
Thank you for this channel, you're amazing!
designing for mobile first is solid advice
Less animations, transitions and events. Compressed images to no images helps too, loading the layout stylesheets first then lazy load the rest of the stylesheets. Hmm, that maybe not the work of a designer, but it is good to have the "survival styles" for lower end and old devices or for 3g connections.
As soon as I heard you speak I was like Whhhhhaaatt!!! She's definitely a Kiwi! Great Video - thanks!
haha yep! kiwi as 😅
hahaha...what do you mean?
Loving this instructional format!
Thanks for the video, Charli! Quick question. Have you used Adobe XD (Experience Design)? If so, what are your thoughts on it as a software product vs Sketch?
I’ve still not used adobe XD as I like Sketch so much! But I promise one day soon I will try it for a project and make a video about it. To be honest I’m more interested in learning Figma these days tho!
This would be amazing, and exactly what I’m doing now..but I’m using an existing web-builder site and I don’t have that much control over the templates, and I can’t code. When the business takes off, I will get a web-designer on board to remaster the whole thing. Hard to go with these limits for now, but that’s life:) Love the advice here. Thx!
This was 3 years ago, just wanna ask, are you using XD now though?
For text, a good way to ensure great fitting is to use vw. So set the font size to 2vw and you will see your text adjust to the viewport. It saves a lot of time adjusting via media queries.
great tip! that works really well in responsive designs.
Cool thnx for the design talk
After watching a few of your videos (and getting a lot of inspiration out of them) I just want to say: not using Mobile First doesn't make you a bad designer - just a bad developer ;) Just kidding, but the advantage will be that by concentrating on the minimal mobile version you will also optimize resources and thus increasing the speed your page can be loaded. Hope that helps! :D
haha lucky I don't develop websites for a living then!
Thank you for this video, what software do you use? I draw in photoshop but a lot of people start to use figma. What will you recommend? Thaaanks)
Figma is great for web design! that's what I use :)
charli i love your video
Thanks Charlie, this was great!
thanks Tiffany!
Hi Charli, thanks for the video. Would like to know how much time does it takes for you to plan, design and create a page using mobile first approach
I don't really use a mobile first approach, i prefer to work on the desktop design first.
When I started there wasn’t “smart phones” but still screen widths varied and browser compatibility was not a given. Flash animation which was big in 2003-04 is just a resource hog now. What a waste of time learning that system ugh. As for images, used to be if you didn’t specify a ratio the image would distort or layers would overlap. While these drag and drop programs are decent now, they all are not the same. Best design is simple and with minimal elements. Point is to communicate, not to wow people who couldn’t care less about the best Java script interface. Good video and on point. Well done.
I focussed on learning Flash and ActionScript in my university interactive design classes and I feel the same way “wow what a waste” 😅
@@charlimarieTV did you have to spend $700 for the program too?
People don't download things on their telephones?
Great video and tips!
Hi Charli, Thanks for the tips, I want to ask you which software you are using to show these tips.
I’m using Webflow which is a website building tool. Check out the link in the description to try it out!
Thankyou
Thank You very much Charlie
Im going to give this program a try! Thanks,
Tip 6: Watch out for Hover/Click stuff, its hard to hover on mobile, and its not that intuitive as in desktop, so reformulate your design
Thanks for the useful Kiwi tips :).
Lol, I used to do ALL this in code (graphics in PS) at latest company. Those breaking points you mention, and all code, that's a ton of complex/tedious work that used to take way more time... I guess am gonna start giving Webflow its value....
Yeah exactly! Webflow makes a lot of things faster and easier :)
Have to disagree about the best grid system being flex box. The best system surely has to be CSS Grid? If you have to support internet explorer then either have an alternative flex box layout, or just use flex box for all.
I think this is still up for debate If anyone else reading the comments wants to dive deeper into this then I'll leave this handy Medium post here: hackernoon.com/the-ultimate-css-battle-grid-vs-flexbox-d40da0449faf Both have their pros and cons for sure.
It's a good article to link. I think the debate really only comes down to browser support to be honest now. It's up to over 85% since the article was written, and from my own experience, I have moved to stop trying to make things look the same in all browsers - have it be functional in all, but the newer ones get the best stuff - tennents of progressive enhancement.
That's not to say Flex doesn't have it's place - I use it all the time for what it's good at - single dimensional items, such as navigation, and for positioning within structures, I just use Grid for laying out those structures.
There are layouts though that can only be done with CSS Grid. I know for many of the layouts I do, it has been the key to jumping from adaptive design to more responsive for many layouts.
I'm coming at this from a slightly different side, as I'm primarily a front-end developer who can design also (I'm not a great designer, and try to be better, hence why I subscribe to your channel! Thanks for the great work you do.
Thanks for sharing your thoughts! Really great points.
Do you have any job for me. I have good knowledge of javascript html css
Can I do this in adobe dreamweaver ? I just honestly still love it.
I laugh every time I message you. Just because my photo looks so mean.
I’m sure you can create a mobile website in Dreamweaver! But it doesn’t have the features I talk about here. The principles and tips still apply though no matter what you’re using to build your site :)
What IED or web tools are being used?
IED?
I'm sorry ide. integrated development environment software, and webtools?
I love you and your eyebrows
Haha gotta love a strong brow look!
Good video!
hello charli , i have seen your vlogs. these are awesome and very helpful. Are you using adobe xd as well?? or if u have any idea about adobe xd then please make a vlog on this too.. thank you.
I'm glad you like my videos! I don't use Adobe XD, so won't be making a video about it anytime soon. My digital design tools of choice are Sketch and Figma.
Are you working as website designer and do you get paid?
Yes and yes haha
Hahahah, well , could you tell me how does that work, because I'm about to finish the academy I'm going to (Java, Javascript, HTML, CSS, MySQL, JQuery, Java Web, FXML, Software Engineering).
So I'm kinda scared that I won't get a job, so I'm wondering how did you get to this point and is it profitable :)
It sounds like you're more of a web developer than a designer if your learning was focussed on code? but even still, open up any job website and type in 'front end developer' or 'web designer' and you'll find sooooooo many jobs! that should ease your worry that there are no jobs. Tech is huge. the web is huge. as with any job you have to prove your skills through a portfolio and interviews, but if you're good, you'll be absolutely fine (and if you don't think you're good yet, keep working until you are!)
Awesome ..
nice video
Actually, the best framework for grids is CSS Grid (built-in CSS). But thanks for the video!
Thanks for such a detailed look at mobile web design! It was cool seeing how you use Webflow as well. I’ve used Flexbox a ton but recently been playing around with CSS Grid. I’ve been really inspired by Jenn Simmons and her thinking around flexible layouts (ua-cam.com/video/lZ2JX_6SGNI/v-deo.html). It seems like you have a go-to layout that you use but I’m curious, have you played around with non-traditional layouts before?
I wouldn't say I have a go-to layout as such! For the web design I do at work I do always use a 12 column grid because our site uses Bootstrap, but that doesn't mean you have to have things in each of those 12 column, you can still create interesting layouts by offsetting content etc! Thanks for the link to this video, looks interesting!
Ah gotcha! Well, I’m excited to see what kind of layouts you create for the Blogger book! I hope that is going well btw. :D
Thanks Kev! It’s honestly been fun designing for print knowing I don’t have to go and build my design in code after 😂
guapa
Ohh God! , I have to re-watch this video,,, I was distracted by your eyes, smile and hoody 🤦♂️🤦♂️
You are a web designer and you dont know HTML and CSS !!!!!!!!!!!!!!!!!
Web design is different to web development. I think you’re confused about what skills and responsibilities go into each. But anyway, I do know HTML and CSS, not that I have to prove myself to you.
you don't even code
I actually do, but that’s not even the point of this video?
i guess this is purely designing and not actually coding 🙃 I'm out
Well yeah the title says “designing” so what were you expecting 😅
@@charlimarieTV you can design using code, actually that's what you are doing except you're not writing the code yourself (which is ok offcourse), for example just type "responsive web design" and you will see all the videos are about coding the design
Design and development are two different skill sets. Of course some people design in the browser, but even then the term “design” is generally referring to the UI/UX of the page - and code is simply the method with which you’re creating that design. If you’re looking for videos about code specifically I suggest you use “responsive web development” as your search term. Hope that helps!
@@charlimarieTVi understand your point but that's the term most UA-camrs use, you are literally one of a handful of UA-camrs (i have seen) that use the term "design" to just talk about designing but i guess this is a problem in the community (Designing, Developing, Coding, Programme) no one can settle on a term
she is out of mind