5 tips for designing mobile-friendly websites

And please remember to click subscribe for new design videos every week!

What web design advice videos do you want to see next? :)

-----------------------------------------------

// ENJOY MY VIDEOS?

My videos no longer have pre-roll ads because I think ads are annoying. That means you don't have to sit through ads, and it also means I don't earn anything from the content I put on YouTube. If you want to support me and my channel the best thing you can do is join my Patreon!

You'll get tons of extra content and ways to learn, like behind-the-scenes process info, downloadable assets or even a monthly group Google Hangout! Choose your tier and sign up here:

-----------------------------------------------

// ABOUT ME

Hello there! I'm Charli and I'm a web and graphic designer from New Zealand currently living in London and posting design videos every Saturday about tools, projects, and concepts and vlogs every Tuesday about my life as a designer. Please subscribe and say hi in the comments so we can be friends :)

-----------------------------------------------

// MORE

// SOCIAL

Snapchat: charlimarietv

-----------------------------------------------

// MUSIC & TECH

Music: YouTube Audio Library

[gazitaufiq]

The last one was great. I had never thought it that way. Thank you so much. Also, love that hoody/jacket!

[areebali]

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

[garethellison]

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!

[Dogger]

Newly started web development student here, Charli. Thank you for the videos. They’re highly informative and presented greatly!!!

[almanaquedeoutono]

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!

[cerebralvision]

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.

[teen-at-heart]

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

[pspsora]

designing for mobile first is solid advice

[brittanytekira]

As soon as I heard you speak I was like She's definitely a Kiwi! Great Video - thanks!

[HeyLauryn]

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.

[liamhooper]

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.

[natkoori]

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!

[codingconnections]

Hey Charli! Just wanted to tell you that I love your content :) Keep rockin' girl!

[dragonhunterutub]

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.

[labschi]

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

[fashionluvr]

Great straight to the point video, was able to absorb all the information easily!

[dewynoodle]

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!

[joeseabert]

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.

[bruxaco]

Thank you for this channel, you're amazing!

[fritz-creates]

Thank you so much! You are giving so much value for free! Damn, i just watched 2 videos of your channel in one day! ;)