Wix.com has its own mobile editor and by default, your website should be pretty
much optimized for mobile devices. However, you do need to go in there and
make some changes and that's what we are going to do in this lesson. Now when I
say "mobile optimized" what am I really talking about? That means getting your
website to fit the different screen sizes that are out there. As you know,
when it comes to mobile devices, you have really big giant ones and you have
really tiny small ones and each of them have different screen sizes. Now, if you
don't optimize for mobile, then your desktop site will show up on their tiny
screen, and a lot of times, they need to pinch and zoom, and it's really hard to
navigate a website that's not optimized. But more than that.. as of 2018, Google
will actually lower your ranking in search results if your site is not
optimized for mobile. And believe it or not, the algorithms are good enough that
Google can tell that you have not optimized, so optimizing means getting
your website to automatically adjust itself to whatever smaller screen that
it should appear. Now there is something called responsive design. And that's when
you design the website one time. And then the screen size will change accordingly.
However, the responsive design still requires you to manually put in all the
different screen sizes. Now there may be, you know, five or six of the major ones,
and the responsive site will adjust to each of those major screen sizes. But
what Wix has done instead is literally copy your site into a..it's sort of a
whole different site just for mobile devices. So there's a desktop site
separate mobile site. Now when I mean "separate", it is still part of the same
HTML5 code of your desktop site, so you don't really have to create
two completely different sites. Think of them is more like mirror sites of each
other. They share the same exact domain name, they share all the same exact
graphics, media, and everything. But they're mirrors. Maybe the mobile device is
more of a fun-house mirror, in that it's not an exact replica, but rather a mobile
optimized copy. You're going to understand more about what I'm saying when I go
into the mobile editor. So here I am, on a desktop site. We're at alpha-writing.com
This is my home page. Let's go ahead and take a quick preview. So right here, you
have the logo. There's a moving video going on behind the logo. When I scroll down
you have this parallax scrolling. You have some signs... there's some other
information. You see, there's the background. The wood background right
there behind the panels. There's a lot of three-dimensional effects that are
happening. You have various links...you have a countdown timer. You also have a
blog feed down at the bottom and a footer down here at the bottom. Now this
site is, as of this recording, still under construction so the site you see today
may look slightly different...but I still wanted to demonstrate how to optimize
the site for mobile devices using Wix. So I'm going to optimize alpha-writing.com
in a think-aloud sort of method so you can understand what's happening behind
the scenes. So, to go ahead and optimize, I'm going to click on "back to editor" and
various functions for mobile devices appear in Wix from time to time, so as of
this recording, I'm showing you what's current as of 2018. Let's go ahead and
click on mobile. see right here up in the top corner you have the mobile
icon and you can see I can select which view we want and I can also check or
uncheck this box that says make your site mobile-friendly most of the time
you're going to want to check that so it should be blue with the blue checkmark
that means you are mobile ready but we need to go in and actually make some
adjustments so let's go ahead and click on edit mobile view and the editor now
switches to a mobile site there's a little tutorial over here on the left or
go ahead and we're going to go ahead and skip that for now so you have a really
long cellphone now nobody's cell phone is this long at least at the time of
this recording but it's there to show you sort of the real estate that your
website is taking now if I were to just to show a quick preview here you're
gonna notice some major differences now the graphics are all their title
everything's there I did not have to retype the title or add the photos again
it works like a mirror sight so whatever you change on the desktop will affect
what you see on the mobile site however things look a little jumbled up for
example this logo may not be exactly centered I'm in mo um the preview so I
can't move anything around right now but as I scroll down you can see that the
site has been formatted for this screen you notice all the text has been pinched
in and centered all of those columns fill up the screen from edge to edge we
don't have to zoom in everything is basically centered and this is what we
mean by mobile optimized if I looked at the desktop site on the same phone we
would have to pinch and zoom and pan around with our finger which is not as
intuitive as having the ability to use your finger to scroll up and down the
device which is what most people do when their user phones it's almost
become second nature it's how we move through Facebook and Instagram and all
those other apps is just a simple scroll so this is basically optimized for
mobile now is it pretty not exactly there's a lot that needs to
be adjusted but I wanted you to understand the relationship between the
desktop site and the mobile site and that the graphics and text everything
the colors are all the same except they've been centered and resized for
the mobile device you're also going to notice that there is no video background
like we had on the desktop site and so that's on purpose you don't have video
backgrounds on mobile devices most of that has to do with bandwidth issues and
otherwise slowing down your site and on a mobile device people want to be able
to get to information very quickly and they don't want the you don't want your
website to load you know really slowly because of videos and other things like
that so they've already removed the ability for the video background to be
happening instead what you have is a still shot now let's go back to the
editor though that was the preview mode so here we're in the editor and there's
some tools over here on the Left there's menus and pages so what we can do we can
actually hide pages on the mobile device on the mobile site but they can still
appear on the desktop site now why would you want to hide a page when someone
looks at it on their phone well a lot of times you might have a page that has
maybe a very large spreadsheet or something that's just not going to
translate very well when size down for mobile devices so or maybe a huge month
long calendar with lots of different layers of calendars stacked up that's
not going to translate onto a mobile device or
well so you can hide those pages and if anybody really wants to look at those
things they'll just have to go to the desktop site your mobile site should
have the ability for people to contact you and that would be your number one
priority a mobile site although should look nice
being pretty and all is not a priority although there are ways we can of course
make it look attractive and I certainly would never want to leave the site
looking as jumbled as this one is right now but I just wanted you to understand
that the priority for mobile devices is speed finding ways for customers to
contact you or to perform certain actions maybe buying something or
subscribing to something or even watching a video that you might have
displayed maybe you have a collection of videos and so it's those quick actions
that will take priority now what I could do in the editor I can of course click
on any element here and I could easily move you know anything from text to
graphics now when it comes to graphics I can easily resize these and I can get
them nice and centered you can see the pink guidelines appearing to show you
how well you're centering your objects for the text I don't have those same
four corners to adjust the size for text you can basically make boxes skinnier or
fatter here and the other thing we could do is make the text smaller or we can
enlarge the text you notice I can't change the font I can't change the
colors or add shadows and other effects if you wanted to change the font you
would have to do that on the desktop site and then the mobile site will just
simply copy it so there's only certain limited amounts of at
you can do on a mobile site you mostly are concerned about getting everything
centered and everything in the right place now I could sit here and go
through all of this and try to make everything centered and that is a quite
a tedious task but Wix has a shortcut button that I want you to notice and
it's over here on the left and right here at the bottom it says page layout
optimizer so we can click this button and the AI will actually attempt to fix
a lot of things up before you have to touch anything so let's go ahead and
optimize now you may not see the changes immediately but as I scroll through
you're gonna see that things are not as jumbled up in fact things look much more
centered than they were but of course there is still some manual things we
need to do it as you see it made the logo bigger and centered and it's paste
the text properly they'll also close up any gaps that might be there so this
graphic is built on a strip and if I were to push it down they see the page
background right there that's the woodgrain well I instead of manually
moving things around the editor detects that this is a open space here so I
could just say delete the space and that pushes my strips right back up this is
why you should really build your desktop using strips and columns because when it
comes to optimizing for mobile it's um so much easier to move things
around right here you see a tiny sliver of the background of the of the page and
so I could just simply delete the space that's a shortcut now because the
background of my web page which is this woodgrain is not as important on a
mobile site remember I talked about speed and getting access to
to contact tools is most important so I don't really need the woodgrain it might
be a bit too much so to do that to change it I could just change this page
background and I could change a background and this is one of those
situations where the page background will actually be different than the
desktop site so if I change it to these this cool palm-tree background and you
could see the blue right there if I move if I move this strip down you could see
the blue clouds right there now when I go to the desktop site I'm going to
switch to desktop I'm going to edit desktop view I want you to notice when I
move this strip down it's still the woodgrain so once again you can change
the background of your mobile site now what I suggest you do as really don't
have any page background because that's a photo that needs to load before
everything else gets loaded so I suggest you go ahead and pick a solid color it
could even just be white or black just a simple color in the background and now
you notice when I made the background white it's much harder to see where the
background is versus the strip because this strip has white in it that's where
the delete space button really comes into play because it already detects
that there's background being exposed so I made it white that makes the the site
much faster to load on a mobile device and then I'm going to move this button
and just Center it right there now you notice the button looks like it kind of
disappeared didn't it so what I'm going to do is right click and I'm going to
say arrange and I want to go ahead and move that
circle backwards and this is where you control those layers and now I can go
ahead and move the button and it didn't disappear somewhere behind the object so
right there now you also notice there are certain
sections we can hide we can hide the entire section so there goes that entire
strip it's gone if you want it back to simply click on the eyeball that says
show element and it comes back there could be things that just don't make
sense on the mobile site so you could just hide it if you want to all right so
I went ahead and undid it because I do want to show it let's delete the space
that's here and we need to move our button back to where it was right click
arrange move backward and there's our buttons right there again okay there's a
space right down here let's go ahead and delete that space there it is
okay space is deleted this is a text block I can kind of make it maybe a
little bit smaller and you notice this strip is overlapping this strip so I'm
going to go ahead and push this down using this anchor button here and that
pushes everything else down and I'm going to delete the space that pulls it
right up right there
let's delete this space now it goes into the courses here you notice the timer
works oh that's really good we have our Facebook live and YouTube buttons those
are fine and then we have the blog posts that occur and then our latest news and
if I do a preview this is actually set to someone to basically swipe through
all the different blog posts now accidentally changed pages so I just
need to go click on the page management here and go back to the main page so
you'll want to take the time to go through here and fix all of the
different details okay now let me show you some other tricks when it comes to
mobile optimizing for mobile devices so what you're going to do is go through
each page and make sure they're optimized so let's go to the about page
click on page layout optimize now always just do that as a habit and then you'll
have to go ahead and rearrange these different areas this is a photo gallery
it's a simple swipe there that's already done for you so you want to go through
here and just get everything centered get everything nice and clean in the
next video I'm going to show you some optimized for mobile tips and tricks and
some little gadgets you can add using the Wix editor so we'll see you in the
next lesson