Wix Websites: Testing Responsive Media Correctly
Displaying media correctly across all devices is crucial, as over 56% of website traffic comes from smartphones. Faulty media displays can negatively affect both user experience and Google ranking. Here are the key steps and tools to ensure your Wix website functions optimally on all devices:
Key Points at a Glance:
- Common Wix issues: Non-responsive elements, display problems in Pro Gallery, layout challenges.
- Solutions: Use full-width elements, follow the vertical grid system, utilise the Studio Editor.
- Testing tools: Chrome DevTools, real devices, Pixefy extension, Google Mobile-Friendly Test.
- Test checklist:
- Check layout and media elements.
- Analyse loading times.
- Conduct regular tests (e.g. every 3 months).
Quick Tips:
- Optimise images: JPEG instead of PNG, keep file size under 100 KB.
- Adjust videos: Enable autoplay only with mute, adjust playback quality.
- Optimise iFrames: Use flexible values instead of fixed pixel dimensions.
Testing Tools Comparison:
ToolFunctionUse CaseReal DevicesRealistic displayTests on smartphones, tablets, desktopsChrome DevToolsDevice emulationSimulation of various screen sizesPixefy ExtensionBrowser-based testsQuick device view directly in the browserGoogle Mobile TestMobile optimisation analysisMobile usability assessment
With these approaches, you can improve the media performance of your Wix website and ensure an optimal user experience across all devices.
Optimising Your Wix Website for Mobile Devices
Setting Up Media Tests
Plan your media tests carefully to ensure your Wix content is displayed optimally on all devices.
Essential Testing Tools
For meaningful media response tests, you need several tools covering different functions:
ToolFunctionUse CaseReal DevicesRealistic displayDetailed tests on smartphones, tablets, and desktopsChrome DevToolsDevice emulationSimulation of various screen resolutionsPixefy ExtensionBrowser-based testsQuick view of websites on different devicesGoogle Mobile-Friendly TestMobile optimisationAnalysis of mobile usability
The Pixefy extension for Chrome, released in June 2024, has proven particularly useful. It allows you to check how your Wix Studio website displays directly in the browser without using multiple physical devices. With these tools, you can create a structured test checklist.
Media Test Checklist
A well-thought-out checklist helps you conduct your tests efficiently. Pay attention to the following points:
- Check layout: Create wireframes for the defined breakpoints.
- Test media elements: Verify that images, videos, and interactive content scale and align correctly.
- Analyse performance: Measure media loading times under various conditions. Schedule regular tests, e.g. every three months.
This checklist serves as a guide for optimally preparing your test environment.
Configuring the Test Environment
A correctly set up test platform is crucial for achieving reliable results:
- Activate Wix Preview mode: Use the 'Run' button to start the preview mode.
- Use the Pixefy extension: Install the Pixefy extension for Chrome and activate it via the browser icon. Select from predefined device profiles.
- Set up Chrome DevTools: Open DevTools with F12 and navigate to the device toolbar to simulate different screen sizes.
Testing Media Elements
Testing Image Display
Check how images are displayed on Wix websites, as the Pro Gallery functions differently depending on the layout.
An example: With the Pro Gallery's Masonry layout, images are automatically arranged to make optimal use of available space. To avoid empty areas, you can do the following:
- Increase gallery height
- Adjust image size
- Add more gallery elements
Once images are displayed correctly, you should check video display.
Testing Video Display
Besides images, it is important that videos play without issues. For optimal video display, the following points should be observed:
Test AreaCheck PointsParticularitiesBrowserChrome, Firefox, Safari, EdgeAutoplay only works with muteDevice TypesDesktop, Tablet, SmartphoneiOS devices: Limited quality controlControlsPlay, Pause, VolumeEnsure functionality on all devices
Video quality should automatically adjust to the respective internet speed. Test playback in Wix video players such as Classic, Compact, and Grid.
Next, test external embeds.
Testing Embedded Content
External content such as widgets or iFrames requires particular attention when checking for responsive behaviour. A frequently occurring problem is fixed pixel values that prevent correct scaling.
To resolve this, you should:
- Adjust the code to use flexible values
- Use HTTPS for secure connections
- Create separate embeds for mobile views
Here is an example of an optimised iFrame embed:
Note that some websites may not be embeddable in Wix due to security policies. Since external content can change without warning, regular tests should be conducted.
Fixing Media Issues
Once you have tested your media, you should fix any errors that arise to improve the user experience.
Adjusting Image Sizes
Even though Wix optimises images automatically, manual adjustments can further improve performance. Here are some tips:
- Use JPEG files instead of PNG when transparency is not needed.
- Keep your image file sizes under 100 KB.
- Upload images in high quality (up to a maximum of 25 MB).
- Check your images regularly to ensure they are displayed optimally.
Fixing Video Issues on Mobile Devices
If videos are not playing correctly on mobile devices, these solutions can help:
ProblemSolutionNoteStuttering playbackRe-upload videoQuality automatically adjusts in the first 5–10 seconds.Autoplay not workingEnable muteiOS and Android block autoplay with sound.External videos not loadingDisable privacy settingsApplies to platforms such as YouTube, Vimeo, and Facebook.
Note that power saving mode on iOS devices can disable autoplay. Enable the "Play video on mobile devices" option in the mobile editor to work around this.
