5 tips for designing mobile-friendly websites

– Hello everyone! Today we’re gonna talk
about responsive design and what to consider when you’re
designing for mobile screens. Thinking about what you
design is gonna look like on a mobile is a super super
part of the design process. I mean, it’s 2018. Everyone is using their phones. So in this video, I’m gonna
give you 5 tips for things to look out for to make your
mobile designs work really well. First off, just so that
we’re all on the same page, you might be wondering, “What the heck is
responsive design anyways?” This term you’ve seen around the lot. What does it actually mean? Well if the design is responsive, it means that the
elements in it will resize depending on the browser width or height. Then there’s also adaptive
design which means that instead of resizing at any point, there are pre-defined break
points in which your design will adapt to benefit the screen sizes. When I’m designing a site, I
like to use adaptive design for large screen sizes. It’s just ’cause I feel like I can have more control
over the design that way and how it’s gonna look for the end user. And then I use responsive design approach for smaller screen sizes
where space is at a premium and everything is much more restricted. Got it? Good. Now, let’s talk about the five things you need to keep in mind
to create a great design for mobile screen. The first point is that
you’ve gotta consider how your design will look on small screens from the very start. This can’t be something that
you throw in at the end. You can’t design and build
out your whole desktop site and then think about it. It’s really important to
incorporate planning how it’s gonna work on mobile into
part of your design process. So much of the web is
viewed on mobile these days that it just can’t be
left as an afterthought. And the thing is that your– The way your website looks on
mobile doesn’t just have to be like the smaller shrunken
version of your desktop site. You could optimize for mobile and a lot of people actually
choose to take the approach of designing for mobile first, because they say that it
gets you to the root of like the simplest version of your design. Space is at a premium. You’re really thinking
about what’s on screen at any given time. But even if you don’t take a
full mobile first approach, I often do still start
with desktop, to be honest. I don’t know if that
makes me a bad designer. But what I do is I have
two outboards on Sketch when I’m designing. I have one that’s set large screen size and then right next to it, I
have a skinnier mobile version. So when I’m creating my
components and designing them, I’m also planning how
they’re gonna work on mobile right along side it. I think considering the
two extremes like this, the largest screen size,
the smallest screen size, in tandem as I’m designing, really helps my creative process. And it makes me consider
mobile from the start. So I highly recommend you give it a try. Tip number two for designing with mobile and this could actually be just a tip for designing for the web in
general, is to use a grid. Grids are really important because they give your design structure and often make it much more
balanced and visually appealing. I’m gonna turn on the
layers here in Sketch, and you can see what a grid looks like over top of my design. But not only does using grid help you with the visual design of your website, it also helps with the
structure of how it’s built and how your different elements
can break down depending on, you know, different screen sizes. I would say the best grid
system for the web at the moment is Flexbox. And I would highly
recommend you read up on it and just have an
understanding of how it works so that as your designing, you’re keeping in mind
how it’s gonna be built. And I’ve left a link down
below in the description to where you can read up on
that and learn more about it. I’m gonna be demonstrating
a few of the things I’m talking about today
by showing you a version of the Convertkit features
page that I’ve built out in Webflow. Webflow has Flexbox built in. It’s like baked in as part of the system. So when you’re using Webflow,
you are using Flexbox. So let me give you an example
of why grids are awesome and how they can help you with responding to different screen sizes. So here’s my design in
the desktop version. As you can see I’ve got
these two columns here and then within this one column, there’s two smaller columns,
working with that grid. And if I go down and look
at the preview of the mobile version of my site, as you can see here, these
two columns get far too skinny and I actually I need
them to stack instead. So it’s something to be aware of when you’re designing for
mobile screens is that sometimes you might need
to stack things rather than have them appear next to each other like you can on the larger screen sizes. So to sort this out, I’m just gonna change the width to 100%. I’m gonna change my container to be vertical. So there we go. Now instead of being to skinny, I can have my little feature
blocks next to each other here on the desktop version of the site, and then stacking underneath
each other really nicely on the mobile version. So lesson here is one, work with a grid. It’s gonna make your design better, and it’s gonna make your
site easier to build. And then two, don’t be afraid
to change things around on the mobile version of your site if that’s what’s gonna work better. You need to be creating the
design that works the best for the situation that the user is in. And in Webflow, I don’t
know if you noticed too but see how I made that change
to make these columns stack on mobile, but if I go back up, to the desktop version,
they’re still side-by-side and that’s because any
changes you make here on these different breakpoints,
they only cascade down, if that makes sense. So, yeah, because I changed
it here on the smallest one, it doesn’t affect anything above it. They’re still side-by-side. You might have noticed as
I was scrolling through that mobile example just there, that something’s looked a little bit off. And that is because
another thing that you need to pay attention to when
designing for mobile is sizing. As your screen gets smaller,
you might need to make images or icons smaller as well to
better suit the screen size. A good way to do this
when working with images is to set for example max width. Like, I don’t want this
image to go any bigger than 300 pixels, but when the
screen gets smaller than that, the image can shrink down with it. Or you can use percentages
in your image sizing. This is some I like to do. So this image here for example
is set to be 100% the width of the integrations box that it’s in. When you use percentages versus pixels, it’s getting the size based
on the width of the screen and that integrations box is set to be 50% the width of the screen. So that means that as
the screen gets smaller, this box will get smaller and
the image will get smaller. Makes sense? Now this is where, just
like my last point, you wanna adjust depending
on the breakpoints or the screen sizes, because obviously 50% of the screen width looks far too small. Whereas 50% on the wider
screen, looks pretty great. So instead what I’m gonna do
when we get to the screen size is make this box 100% width and that’s going to space every out more. And like I was talking about before that change will cascade down,
so that on my small screens, it’s still a good width. Let’s just add some more
space in here, shall we? There we go. Something else you might
want to take a look at is the size of your headings. As you can see for this one here, I’m fitting not many words per line and it’s looking a little bit weird with our easy integrations
but I like that. So instead what I can do
is just shrink the size of my heading to a little bit on mobile, just so things, you know,
don’t seem so broken up. As you can see my logo is
pushing my menu down below. That doesn’t look great
compared to up here where they’re on the same line. So let’s make this shrink a
little bit smaller in mobile as well. So the lesson here is that
as your screen gets smaller, some of your elements and
your assets might need to get smaller as well. Using percentages is a great way to get things to respond
to different screen sizes because that that percent will
be judged based on the width. But don’t be afraid to change
what value that percentage is depending on the screen size. The fourth thing you really
have to watch out for when you’re designing for
mobile is the navigation. Obviously, on a desktop feel, you can have a row of links like this at the top that’s really useful. Your visitors can find their way easily to different pages on your site. But as your screen gets smaller, it’s gonna be impossible to
have a row of links like that unless the font is really really small. And then that’s not very usable. So that’s why things like the hamburger menu are really popular. How that works is basically
on smaller screen sizes, it compresses your menu items
into a dropdown of sorts. So if I click this icon here, all my menu items are
still there accessible behind this menu icon. Something else to consider
because I see this a lot in menus is dropdowns
working with a hover state. Hover states aren’t really a
thing on touchscreen devices. So make sure you keep
that in mind when you’re designing and thinking about
how your menu is gonna work. Make sure that it also works
by clicking or tapping, not just on hover. And my last tip for you,
for this video anyway, is that you always need to
be thinking about the user and their experience. When someone is using a mobile screen, it’s not just that the screen is smaller; that’s not the only change
from your desktop site. Often the user’s gonna be
in a different situation when they’re using it as well. They might be out and about. They might be on public transport,
walking down the street. So you’ve gotta optimize
beginning the most relevant content to them quickly. Sometimes this might mean
slightly changing your content depending on the screen size. I’ve got an example here
of a page I’ve designed for Tradecraft which is our monthly
publication at Convertkit. On the desktop version,
you can see it says “Download the guide”. And there’s like a little
download arrow icon, But then if I show you
the smaller screen size, the icon changes to a little email. And it says, “Get the full free guide”. Both of these forms are the exact same. The same thing happens, but
when you’re on your phone, you don’t really wanna download something. That’s not something
that you’d do on a phone. So that makes that call
to action less enticing if I’d left it saying download. So I changed it, so that people
on the phone will realize that it’s gonna be useful
for them to click it too. So for a quick recap to end things off, the five things that I want you
to take away from this video are that you need to consider
what your design will look like on mobile right from the start of your design process. Involve it. Don’t just leave it to be an afterthought. Make sure you’re designing using a grid and don’t be afraid to like
change the width of columns, the stacked things on mobile, whatever you need to make it work best for that small screen size. If you use percentages for
the widths on the elements, that will respond to the
the different screen sizes really well. And again, don’t be afraid to
change those percentages up to work better on smaller screens. You probably gonna need to
collapse your navigation for mobile screens. And make sure that all of the
links that you’re using in it have enough space around
that they’re tappable. And lastly, remember that if
your user is viewing your site on a smaller screen size, that might mean they’re in a different
situation to viewing on a desktop as well. So design for that.
Adapt content to fit it. Hopefully those five
tips are gonna help you with your web design process and help you make better
designs for mobile screens. I’ve left some links in the
description for resources that I might have
mentioned during this video that I think you should check out. They’re gonna be very useful. If you’ve got any questions
though in anything that I covered, if anything was unclear or you just want me to go
into further detail on it, please feel free to ask them
down below in the comments. I’d love to try and help you out on that. Wanna say a big thank
you to Webflow as well for sponsoring this video
and just for in general making a really great
website building tool that is super easy to adapt
your design for mobile on. Thank you to you as well for watching. I hope you enjoyed this video. Please make sure you give
a thumbs up if you didn’t. And if you hit subscribe,
if you’re not already, I make new design videos
every single week. So hopefully, I’ll see
you on the next one. Bye!

, , , , , , , , , , , , ,

Post navigation

44 thoughts on “5 tips for designing mobile-friendly websites

  1. This video is so good so far(about half way through)! I'll be taking my first digital media design class in high school in a couple of months. Thanks for the tips😊

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

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

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

  5. hi, charli!! i've been watching your videos for a while now and i really love them 😀 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!

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

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

  8. Great video! Just one little piece of info, which you may or may not be aware of – there are rumours out there, that say that Apple is looking to bring hover functionality to touchscreens… I'm personally very excited to see how it will be implemented on mobile – more so in gaming – than web, however.

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

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

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

  12. 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 (https://www.youtube.com/watch?v=lZ2JX_6SGNI). 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?

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

  14. 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 😀 and I am now on to learn so many other things from you in future..

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

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

  17. Ohh God! , I have to re-watch this video,,, I was distracted by your eyes, smile and hoody 🤦‍♂️🤦‍♂️

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

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *