How to Customize the Mobile Version of Your Squarespace Website
50% of your website visitors look at your website from their phone.
So let's make sure your site looks amazing from every angle, shall we? Today we’re going to share a video from our membership program, Therapy Website Club,that walks you through exactly what to do.
Here's what we cover in video:
What I mean when I say "mobile view"
How to find the mobile preview of your website so you can see what it looks like to mobile visitors
Moving/dragging/stretching elements on the mobile view
Minimizing extra spaces in your section
Overview of what you can and can't change on mobile
How to use the “position” (move forward and move back) button to move elements in front of or behind other elements
This video does focus on Squarespace, but the design best practices apply to any website builder. Keep scrolling for list of best practices for mobile web design!
NOTE: Please be aware that this video only applies to Squarespace 7.1, Fluid Engine (the newest version as of July 2022). Fluid Engine sections can be used with any Squarespace 7.1 site (and if you have a new site since early 2020, it is likely using 7.1).
Here are some best practices for creating a great experience on the mobile version of your private practice website
Keep it Simple: Mobile screens are smaller, so it's important to keep your design simple and clean. You can use the “positioning” buttons (move forward and move behind-see video above) to hide unnecessary elements behind other ones.
Optimize Images: Squarespace automatically creates versions of each uploaded image to ensure faster loading times–but you still want to keep your images to less than 500KB.
Navigation: Make sure your site's navigation is easy to use on mobile. Hamburger menus are a popular choice for mobile sites because they save space.
Touch-friendly Buttons: Make sure all buttons and links are easy to tap on a small screen (and if they are too small, you can adjust font and button sizes in your Site Styles panel).
Test Your Site: Finally, be sure to preview your site both on Squarespace, and also on an actual device to make sure it looks the way you want it to.
And don’t forget to check how it looks each time you add a new section or a new element to a section!
Use the “Saved Sections” feature in Squarespace so that you don’t have to adjust the mobile view from scratch every single time for every section.
Remember, the mobile experience is just as important as the desktop experience. By following these best practices, you can create a mobile Squarespace site that's user-friendly and visually pleasing!
