Have you looked at your website on your phone lately?
Most of my clients never had before I asked them to. They were surprised to find that their website didn’t look quite as nice on their phone as it did on their laptop or desktop monitors.
Typically at least 60% of your website traffic will come from mobile devices. You can find this stat for your website using your analytics (not sure how to do that?). That means most of your potential customers are looking at the mobile version of your site. So it better look nice and work well.
Most modern website builders allow you to preview a mobile version of your website design before publishing. Some let you make changes just to the mobile version. I talk more about this below.
What needs fixing on mobile
Since mobile screens are very small compared to monitors, you often need to change some of your design to make your website look better on mobile. Some typical things that need adjustment for mobile:
- scale down font size – large headings may overwhelm a small phone screen. It can be helpful to scale down fonts on the mobile version.
- reorder elements – if you have side by side elements on desktop, remember that these will be stacked vertically on mobile. So they might appear in an undesired order.
- hide excessive decoration – while icons and images can add a lot of interest on a large screen, they can distract on a mobile screen. You may need to hide some of these on mobile.
- break up large text blocks – long paragraphs suddenly seems much longer when viewed on mobile. You may need to break every 2-3 sentences to make it more pleasing to read on mobile.
WIX Mobile Editing
On WIX, you can access the mobile preview from the toolbar as shown below. Then you can move around and hide elements as needed without affecting the desktop layout. I particularly like that you can reposition and resize elements (like text and icons), which is often necessary to make your design look good on mobile.
There is also an “Page Layout Optimizer” button, which will automatically move things around to look better on mobile. Then you can make manual adjustments as needed. See WIX Help Center for more details on these features.
Squarespace Mobile Editing
Squarespace has a mobile preview, but you can’t make changes to the mobile version. So you have to make changes to the desktop version so the mobile version looks good. This is a real limitation in my opinion. Hypothetically, the Squarespace templates are designed so they automatically look good in mobile. But I often find myself having to make unwanted changes on the desktop version to make sure to looks good on mobile.
Banner images are particularly fussy on Squarespace, which often resizes banners in unexpected ways. You can set a focus point on the image, so when it’s cropped, it focuses on the important part of the image. More info about focal points here.
WordPress – Elementor
Most visual builder plugins for WordPress have a mobile preview, including Elementor, which is what I typically use. With Elementor, you can preview the website in mobile and tablet mode. Then you can change the styling and/or hide elements as necessary. See Elementor Mobile Editing instructions.
So… how does your website look on mobile? Leave a comment and tell me what frustrations you’re having with the mobile version of your website.
If you need help fixing it, don’t hesitate to contact me. I love making websites look and work better.
Cover photo by Oleg Magni on Unsplash
