Wix.com Tutorial: How to make a mobile friendly website | Sarah Doody, UX Designer

hey there I am Sara duty and I’m user experience designer and entrepreneur and I recently used Wix calm to redesign my website the UX notebook now as a user experience designer it is very important to me that my website work on mobile because we are tethered to our mobile devices today and so I know that a lot of people are looking at my website on mobile and I also know that because I look at the analytics that are installed on my website and
I can see that a large percentage of people are visiting from things other than their desktop computer so one of the things that I really love about Wix is how easy it is to make sure that your website is mobile friendly so when people look at it on their phone they can still read it and that they’re not squinting to see the text or frustrated because the forms don’t work or the layouts look really weird so I wanted to show you exactly how you
can preview your website as it will look on mobile and then make little tweaks if you decide you want to make changes on mobile so we’re on my about page right now and we’re looking at it inside the Wix editor and what we are going to do is we’re going to go up here to mobile and we just need to click on the little mobile button and then we are now going to be seeing my website as it may look in a mobile device and it’s very important on mobile
to think about fonts font sizes this spacing between the lines that’s called line height and another important thing to remember is that maybe on mobile you don’t need to present all the information that you gave someone on desktop because you have to consider not that the screen is smaller but that people are probably on the go right they’re not sitting at their computer like kind of focused maybe they’re in lean in mode I kind of always talk
about lean and versus lean back mode lean in mode is maybe like you’re paying attention more you’re more focused lean back mode is kind of just like your browsing you’re standing in line you’re waiting for the subway you’re you know having lunch or something and you’re just kind of perusing websites on your mobile devices so all that to say sometimes on mobile it’s not just about making sure it’s still readable but sometimes it’s about changing
the purpose of the page on mobile and removing things or hiding things if someone’s viewing your website on a mobile device so as you can see we can preview what our website looks on mobile and I have gone ahead and done a few things this this text I had changed the font size but let’s say we wanted to change the font size even a little more one other thing I might do I might make this text left justified because sometimes on mobile and really on
any device reading a lot of text that is centered is difficult whereas if you left align it it’s easier to read and on mobile that’s even more important so I think I will leave it left justified like that and as we keep going we see the other sections it looks good to me still looks good and then these kind of five bullet points about what it means to think like a designer I had to do some rearranging because it didn’t look like this when I first
made this page and just so you’re you’re aware when I’m in mobile mode I can drag things around just like this and so it will appear like this on mobile and it will appear a different way on desktop or even if I didn’t want to have the numbers let’s say I could actually hide those numbers but only on mobile and I would do that by selecting it and then saying hide element and it looks like it only hid this circle so if I wanted to hide the number
as well I need to hide that as well and then move that over there now I wouldn’t really do it this way because I want the numbers there but it’s important to think about when someone is viewing your website on mobile do they really need to see everything that was on desktop and should it be laid out a little different so that it’s easier to read on a mobile device so I’m just going to undo those changes because I actually do want it to be like
that and as you can see the rest of the page looks pretty good to me one thing you will also notice is let’s go back to desktop desktop the navigation so here’s what the navigation looks like on desktop we’ve got my logo and my navigation and this pop-up box which we won’t get into today when I switch over to mobile edit mobile view um look it’s different the header is different again another example of where you have to think about even though
it’s one way on desktop should it be different on mobile and in my case the answer was yes so putting the logo and the navigation and that pink button at the far right was way too much so we rolled everything into a menu and then when people click on that menu it pops up and we can actually edit that right here we say manage menu and we are able to like hide the pages that we don’t want to show so some of these are hidden right now and we would
just toggle that if we wanted them to show up on mobile so that’s another example let’s go into settings I wonder if there’s anything there that’s important no um but let’s also check out where did it go let’s check out the workshops page because that one is pretty complicated and I want to show you on desktop first complicated and that there’s just a lot going on on the design so we have some text at the top and we have more text about our
workshops and then we get into these giant kind of collage of me doing workshops and things and how many of images are there 1 2 3 4 5 6 7 8 images and then we get into workshops around the world what the workshops are about I have 4 boxes to buy to to tell that to people but let’s jump into mobile because I made some decisions once I saw this on mobile and realized hmm I need to hide things or change how things are laid out so first of all we
have the text at the top I adjusted the font sizes for sure and then I kind of redid how this looks on mobile so if you compared side-by-side the way this looks is not the way it looks on desktop because I have a few less images just because it was too much on mobile then as we get down to kind of the four types of workshops I do remember on desktop it was two columns and two rows and here on mobile two columns and two rows would be terrible it
wouldn’t be very readable at all so I’m mobile we’ve made each of the cells just stacked onto top each other so we have one row and for note one column and four rows one two three four and that is going back to making sure that things are readable on mobile because it is not always a direct translation of this how it is on desktop this is how it looks on your mobile device because that would just not look good at all so as you are working on your
website I really encourage you to not forget to go up and make sure you’re viewing it on the right device and making sure that when you are looking at what it will look like on mobile that you’re making sure that you’re maybe adjusting the font sizes or giving the lines a little bit more spaces giving it more line height so that it’s more readable and it’s not all scrunched together and thinking about what you might want to hide on mobile as well
so if you found this video helpful I would love to hear about it so leave me a comment and don’t forget to subscribe so you don’t miss more tips about user experience design and if you want to check out my website the UX notebook calm or get started with your own website using Wix you can check out the links below and that will take you to a page where you can start getting started making your site today hope you found this helpful and I will
talk to you soon and see you later