About half of the users that come to your website, will be on some sort of mobile device. With that being said, it is very important to make sure that your website is optimized for mobile. You can have an awesome desktop website, but if you forget to complete your mobile design, then you could be losing half of your potential customers.
In this video, we were able to take an amazing desktop site, and replicate the style for mobile. The great thing about Wix mobile is that we can follow the same steps for almost every website. This makes it a lot easier to accomplish. If you create a lot of websites, you'll be able to complete mobile in just a couple hours for 5+ pages.
My Guide to Mobile Web Design
Element Width and Spacing - For almost all elements in the mobile editor, I make sure that the width is set to 280px. You can check this in the toolbar. However, Wix typically does a good job at doing this for you. I would apply this width to text boxes and floating images. The reason it is best to make sure all elements are 280px width is because, when centered, the content is 20px away from both the left and right side of the screen. If you do not leave that 20px, then on some mobile screen sizes, then the content can be cut off. I also typically keep 20-30px of vertical spacing between different elements on the page.
Heading Text - This can be different based on what font you're using for the headings. Typically, with the fonts I use on most projects, I stay between 24px and 30px. But again, this truly depends on what font you're using. This may need to be something that guess and check on. Publish your website and look at it on your phone to see if the text looks to small or large.
Paragraph Text - For paragraph elements, I always make my fonts are 13px in size. And of course, make sure to double check that the text elements are set to 280px in width.
Column Background Images - For column background images, the Wix editor typically makes the images 200px to 400px in height. I would make the height 100-200px. Anything larger is unnecessary.
Floating Images - Sometime you have images that are not column backgrounds. For these, I make sure the width is 280px. For the height, this can differ. But for the most part, I rarely have to change the height. This could be due to the images I choose to use in my projects, but the heights are rarely over 200px. If they are, you can crop the images inside the mobile editor.
It is important to note that just because the mobile version of your site looks good inside the editor, does not mean that it looks good on an actual mobile device. I highly recommend that once you are finished with the design, you publish the site, and look at it on your phone. This will help you minimize any unnoticed mistakes.
In conclusion, mobile is very important. The good thing is that mobile web design does not need to be hard. You can follow the steps above to create a better experience for your website users.
If you would like the Wix Web Design Template used in the video and post, then you can check it out here!