Are Sites Made with the Wix Editor Responsive?
The short answer to that is no ....but, the good news is that you can make your Wix website fully responsive. You can also improve the functionality of your mobile website in Wix in a much better way than fully responsive website design platforms.
Responsive web design, also called mobile-friendly design or mobile-first design, is critical for your website!
All websites that we at Wix Create design are responsive and optimized for desktop and mobile devices to ensure your users a unique experience on all devices.
How do you make your Wix website responsive?
Wix websites are becoming more and more responsive as they continue to add more full-width elements that expand to fill the entire width of the screen.
We recommend using full-width elements on your site as much as possible. Wix full-width elements include:
Strips and columns
Full-width slideshows
Full-width galleries
Horizontal menus and lines
Google maps
Wix apps
If you are using elements such as text boxes and images that can’t be stretched to full width, you have to make sure to keep them within the vertical gridlines so that your elements appear correctly on most screen sizes.
Gridlines are the dotted lines inside the Wix Editor.
The width of the page inside the gridlines is fixed at 980 pixels. It is important to place all of your site's content inside the vertical gridlines to make sure that your site looks good on all different devices. Elements that are placed outside the vertical gridlines will be cut off on iPads and tablets.
If you use strips and columns, you still have to make sure that the elements you place inside the columns are within the column's gridlines!
The responsive part of strips and columns is that you change their background into colors and you can even use images and videos as a column's or strip's background.
The above is about your site's optimized view on desktop devices, iPads, and tablets. If you like your site to look good on mobile devices, you have to optimize the design in the Mobile View in the Wix Editor.
Optimize your Wix website for mobile
As you may have noticed, the Wix Editor has a Desktop View and a Mobile View. The Wix Editor always opens in the Desktop View. To switch to the Mobile View, you have to click Switch to Mobile.
You always should design your website in the Desktop View first and once you're ready with that switch to the Mobile View.
While Wix will automatically convert your website's desktop design, content, and integrated apps into a mobile version, your website will NOT automatically look good in the Mobile View. The reason for this is that the elements that are placed next to each other in the Desktop View have to be put under each other in Mobile View.
The Mobile View of your website is automatically created. Wix, understandable, does not know in what order you would like these elements to be placed in the Mobile View, nor what the optimum size of these elements is. Therefore, you have to manually optimize your site for mobile viewing.
IMPORTANT TO KEEP IN MIND:
Always check your Mobile View after making changes in the Desktop View because even small changes may affect your mobile site.
As you can see above in "initial layout in mobile", when we switched to the mobile editor the layout doesn't look exactly nice. We need to stretch the columns so that they have the same size and maybe change the text size to make it look more attractive.
After we have made the column height of both columns the same and moved the text, the layout looks way better.
Since we only had a few elements on this page we did not have to rearrange any of them. If you have many elements on your page, the elements may be in a completely different order and size than you want it to look like. This means that getting the mobile view right is often tedious work.
To make your website look good in the Mobile View, you will often have to:
Click and drag your elements to rearrange them.
Change font sizes, font colors, and text alignments.
Change Page Backgrounds.
Change which pages need to be hidden or visible in the Mobile Menu.
Check your Hidden Elements. When your mobile view is created, some elements are automatically hidden to make it more mobile friendly.
Hide Elements that are not necessary for Mobile View, such as buttons, social icons, etc.
Remove gaps by clicking Delete Space.
Use the Mobile Tools.
IMPORTANT TO KEEP IN MIND:
Changes in Mobile View are NOT reflected in Desktop View.
There are a few tricks to make sure that Wix understands which elements belong together:
Use strips and columns as much as possible.
Group elements that need to be placed together.
You can also click Page Layout Optimizer in the Mobile View Menu. If this does not improve the layout then you can always click Undo to revert back to the previous version.
Would you like us to design a beautiful, functional, and relevant Wix website for you? Contact WixCreate, we will create an online presence that works for you.
