Ī£ Sigma Hosting is mainly a video tutorial website

Ī£ Sigma Hosting is mainly a video tutorial website that make it easier for you to search within the transcript of videos for solutions of problems you might face during your journey in dealing with different webhosting companies. So, we are very sorry if the text is not well organized and we may work on it in the future but for now we hope you get the benefit mainly from the video then you may need to have a look on the transcript. Thanks for your understanding šŸ™‚

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 .

Video Discription

Learn how to use the Wix Mobile Editor to optimize your website.
I will show you how to build a stunning Wix website from concept to automation at www.alpha-writing.com

Brough to you by The Academy of Literature, Publishing, History, and Writing.

 

Leave a Reply