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