- [Presenter] Now when you're designing a website
you want to make sure the content fits it appropriately
for the platform that it's on.
So if you're talkin' desktop, sort of a desktop browser,
I can take a look at this content
I could say this looks pretty good.
I can maybe resize these social media icons just a touch
like that, moving them up like that,
and even over on this side
I can make them a touch larger as well.
Now when it comes to mobile,
maybe I want the same content, maybe I don't,
but I need to start making those decisions.
So what I can do is I can bring all that content over
and then figure out what's going to fit, okay?
And the easiest way to do that
is by selecting the home screen
and I want to point out that over here
in the layers panels, this little button right here,
make sure that it's not the assets panel,
but the layers panel,
notice how I don't see any of my layers for my homepage.
Well they're actually inside of there,
inside of the homepage,
if you double-click on the icon itself
you can go inside of the homepage.
So here are all your graphics.
These are all the graphics that I need to bring over, okay?
So I can click and drag and select those all
but I'm actually missing one
'cause there's this rectangle right here
it's locked down, so let's unlock it.
Now I can make sure everything is selected, right?
Everything is selected and I can bring that content over.
Easiest way to do that
is hold down the Shift key and the Alt key
and it's going to duplicate it.
I could drag it right up here
the Shift key will constrain it and there we have it.
As I release,
it puts it inside of the iPhone Six, Seven, and Eight Plus
art board just like that
and I can resize this content.
And just by holding down the Shift key
we'll still constrain it
and I can start to position everything accordingly.
So this is going to take some time
as I start to adjust this right here
I'm noticing this bar definitely could be a different size
but this is what I need to do now from a design standpoint
start to bring everything over
and get something that works for, say, a mobile browser
as I'm doing right now, okay.
So the great thing is as I select these social media icons
I could put them right up here
and we will have this magnifying glass up here as well.
The great thing is is that as I'm designing for the iPhone
I'm going to be able to move that over
to the Android device as well pretty easily
so selecting that, selecting root,
selecting this text right here.
Notice how I've resized it, it's all...
Well, let's take a look.
It's all pretty small
but what I can do is I can select each one of these
and resize it accordingly like that.
This text is definitely really rough.
Going from point text to area text, clicking right there,
now it puts it in a box essentially.
Now I can resize it to something like that
and maybe move this content down
but I'm just formatting everything
the way I think it should look for mobile.
I'd say that looks pretty good.
The logo stands out, I can read the text,
these buttons are really important
and then from there I can duplicate this for Android.
So, with them all selected, just click and drag them over,
as I drag them over it's going to recognize it
as being part of Android mobile
and it puts it in place, and then I can resize accordingly.
So that's what you typically need to do
when you're going from different devices.
They're going to be different sizes definitely
and you make to sure your content fits accordingly.
Let's keep in mind
that I am actually using some assets over here
I can always change those assets
across these different art boards, but ultimately,
I want to get something that works for each device
that's going to be a little different like that.
Last thing is just moving these social media icons over
and making sure that they're large enough
to be able to be clicked on.
So you can see creating for different platforms
means, of course, resizing content to make sure it fits
within that space
as well as making sure they're large enough
to, say, be clicked on, in the case of mobile.