Wix website designers and users often ask us how to design mobile-friendly Wix websites. This article will help you to understand how to create a mobile-friendly website in Wix with a proven everyday practice of a Wix Partner.
Throughout this article, you will learn more about the following:
Designing a Mobile-Friendly Wix Website
There are many best practices to make your Wix website mobile-friendly.
1. Use strips and columns properly
Strips and columns not only give you a chance to manage page layout but also are powerful editor elements allowing you to design sections with more freedom. Here are the best practices for using strips and columns:
Always use strips while designing a page (at least most of the time),
Add columns if you need stunning two-column-like sections,
Don't add more than four columns to a strip (the area you will use to add texts and images will get even smaller as you add more),
Add a strip background first and then add columns (this will save you time),
If you are not sure about the design, don't add gaps between the columns,
If it is required to make a design the content and title are separate from each other a bit vertically, use another strip (child) attached to the main strip.
Following these best practices will help the editor to turn a clean mobile website when you try to switch to "mobile website editor".
You can also try the following:
Dividing a strip into two columns for landing sections, one column for texts and CTAs, and another for images,
Dividing a strip into three or four columns for highlighted services or solutions a brand offers.
2. Leave gaps between the page elements and gridlines
Adjust your element content at the center by equally spacing from both horizontal sides. This will protect this column and section from going crazy when you switch to the mobile editor.
Align texts where you would like them to be, but don't forget to use the best practices for aligning texts.
3. Check layers often
Sometimes having a page with tens of sub or child elements gets you and your mobile editor confused. Make sure each child's elements are under the required parent elements.
The layers tool helps you to manage your page sections and elements by parent-child hierarchy.
You can use the Layers tool to reorder your strips. See how:
Click one of the layers on the tree,
Drag it onto another one.
Make practice with a couple of them.
4. Get your text content to share the common size in pixels
Elements having the same width will appear on the mobile editor with less breakdown. If you have two three or even more text elements than one under the other, set the same width size for those elements. They must be aligned well horizontally, too.
At this point, if you think that your mouse (not you, ha-ha) is not as accurate as you supposed it to be, you can use the toolbar. It allows you to set the exact location of each page element and its size.
To access the toolbar, click on the "Tools" tab and then click on "Toolbar" to activate it on the screen.
There is a tricky point with setting element positions in Wix. You can check our Wix Element Position Tutorial for further information.
5. Hide unnecessary elements on mobile
Not all elements that exist on the desktop version are needed on the mobile version of your website. To make your mobile website more user-friendly, hide some elements from the mobile version.
While you are trying to hide or show mobile elements, parent elements might be removed from mobile sites with their children.
In addition to all these pieces of advice, for a better view on mobile also try the following:
Use smaller size texts on mobile,
Make the button heights the same,
Don't use three lines of heading text,
Check your mobile site menu and design.
Here is a video tutorial that lets you understand mobile design better.
Hope you are now ready to get your Wix website more optimized and mobile-friendly.
Do you need a fully customized mobile view and a responsive website? Build a responsive website in Wix.
You are ready to go. If you have further questions in your mind, feel free to reach us at any time.
Comments