How to optimise your new Squarespace website for mobile.
If you’ve just launched a new Squarespace site, mobile optimisation is especially important—most visitors will experience it on a phone first.
Here are our tips on what you should do to your website more engaging on a mobile. Nearly 65% of all search queries are conducted on a mobile.
Nearly 80% of shoppers use their phone while in the store looking up product reviews, comparing prices and finding alternative locations.
Having your website perform well for a user on their mobile is no-brainer.
All of our website templates are optimised for use on a mobile. You can see them all here.
1. Design for mobile first
In Squarespace’s editor, switch to the mobile preview and work through every page. Check:
Text isn’t too small or cramped
Buttons are easy to tap
Images aren’t awkwardly cropped
Sections don’t create excessive empty space
Headings wrap naturally rather than creating 4–5 lines
Nothing important is hidden below the fold
2. Keep navigation simple
Your mobile menu should make it obvious where visitors should go.
Aim for roughly 5–7 primary navigation items. Put less-important pages under dropdowns or in the footer.
Make your key CTA—such as Book a Call, Get a Quote, Shop Now—particularly easy to find.
3. Optimise your images
Large images are one of the easiest ways to slow down a mobile site.
Before uploading:
Resize images to an appropriate display size
Use WebP or JPEG where appropriate
Avoid uploading a 5–10 MB image when a much smaller file will look identical
Compress images without noticeably reducing quality
Use different crops where necessary so important subjects aren't cut off on narrow screens
4. Make typography responsive
Don't simply shrink your desktop typography.
A good mobile hierarchy might be:
H1: ~32–40px
H2: ~26–32px
Body: ~16–18px
Buttons: ~16px or larger
The exact sizes depend on your font, but readability matters more than sticking to a particular number.
Also keep paragraphs relatively short. A wall of text that looks fine on desktop can become exhausting on a phone.
5. Make buttons thumb-friendly
Avoid tiny links and closely packed buttons.
As a rule of thumb, give interactive elements around 44px or more of touch area. Leave enough spacing between adjacent links so visitors don't accidentally tap the wrong one.
6. Simplify your homepage
Your mobile homepage shouldn't force visitors to scroll through every piece of information you've put on the desktop version.
Prioritise:
What you do → Why it matters → Proof → CTA
For example:
Professional bookkeeping for small businesses
Keep your finances organised without spending your evenings on spreadsheets.
[Book a consultation]
Then provide supporting information further down.
7. Check forms carefully
Forms are particularly important on mobile.
Test:
Field sizes
Number of fields
Dropdowns
Date pickers
Error messages
Keyboard behaviour
Submit buttons
If your form takes several minutes to complete on a phone, consider whether every field is genuinely necessary.
8. Remove unnecessary animations
Animations can look impressive on desktop but become distracting—or slow things down—on mobile.
Use them selectively, particularly above the fold. Your site should still feel polished if animations are disabled or don't load immediately.
9. Test on an actual phone
Don't rely entirely on Squarespace's preview.
Test the site on at least one iPhone and Android phone if possible. Check it over both Wi-Fi and mobile data.
Pay particular attention to:
Homepage loading speed
Navigation
Contact/booking forms
Checkout, if applicable
Sticky headers
Pop-ups
Cookie banners
Embedded videos
Maps
Social feeds
10. Check Core Web Vitals
After launch, use Google's performance tools to identify technical problems affecting mobile users. Look particularly at Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS).
Quick mobile launch checklist
Before you call the site finished:
☐ Mobile navigation is clear
☐ H1 is readable without taking over the screen
☐ Body text is comfortable to read
☐ Buttons are easy to tap
☐ Images are compressed
☐ No horizontal scrolling
☐ No overlapping elements
☐ Forms work properly
☐ Pop-ups aren't intrusive
☐ Videos don't dominate the page
☐ Important content appears quickly
☐ Every major page has a clear CTA
☐ Site tested on a real phone
One important principle: don't try to make the desktop design fit a phone. Design the mobile experience deliberately, then make sure the desktop version works equally well.