[Updated 6/10/23 with newer Squarespace features]
With so many people looking for information on their smartphones, it's critical that your website employs a responsive design. A website that has a "responsive design" responds to the screen size of the device the reader has and narrows or widens pages so information fits the width of the device. The smaller the device, the narrower the space that is available for showing your website pages.
In the early days of smartphones, website designers had to create alternate, much narrower versions of their website pages to show them in a reader-friendly way. Fortunately, these days, the do-it-yourself website design platforms like Squarespace create multiple versions of your website pages automatically. These versions accommodate many different screen sizes – from small cell phones to tablets, laptops, and large desktop monitors.
Previewing your page as a cell phone user will see it
Before you consider a website page ready to publish, check the page with the Mobile preview feature so you can see the page as a cell phone user will see it. Chances are that everything will look just fine, but it's a good idea to preview your website in the smaller size to make sure it looks good.
Squarespace mobile preview
In Squarespace, the Mobile preview is activated by clicking the Mobile Device Preview tool at the top of the editing window.
NOTE - With Squarespace 7.1, you also have the option to move design elements specifically for mobile. Those changes won’t affect the Desktop version of your website. If you’re using the Fluid Engine Editor, which shows you a visible grid when you’re moving design elements around, you should definitely preview on mobile. The Editor doesn’t always place design elements where you’d expect for mobile. But you can move them and add or condense extra space to make mobile-only design adjustments. After making changes, check the desktop version again to make sure you haven’t changed anything on the desktop version inadvertently.
Previewing for a smartphone and a desktop computer on Squarespace 7.1
Open the website on a real cell phone too
The Preview feature in the website editor is helpful as you’re building a website. But you should also open the website on your cell phone to be sure that it looks good on a real phone too.
Mobile preview checklist
Here are some things to check to be sure your website works well for cell phone users:
Is there a manageable amount of text, so that it is comfortable for a cell phone user to scroll through and read?
Are the text font, size, and color you chose clear and readable?
Is it clear how to navigate to other pages on your site?
Are pictures an appropriate size?
Are text blocks in the correct order?
Are buttons visible and near the text that explains them?
If you see something that doesn't look right, adjust the overall page design so it looks good in the regular large size and in the narrower cellphone size.
With a clean responsive design, your website is ready to go for your on-the-go customers.
Optimized photos load more quickly and improve SEO (search engine optimization) for your website, without sacrificing quality. Techniques for optimization include resizing and compressing the photo to reduce the file size while maintaining sharpness and clarity.
Adding links to your website gives people a convenient way to learn more about a subject that interests them. Links can be built into text, buttons, or images. Learn more about the guidelines I go by when deciding which type of link to use.
Whether your website is new or has been around a while, decluttering the content to encourage visitors to browse is always a good idea.
Whether you design your website on Squarespace or some other platform, you’ll be making color choices that are unified and compatible across your website, from the text to the buttons to the colors in the images. Designers call these color choices a color palette. Here’s how I simplify color selections for my clients.
There’s no need to migrate to Squarespace 7.1 any time soon. But if you’re ready for a redesign anyway, you’ll get more design features if you migrate to Squarespace 7.1.
Like the receptionist and reception area in an office, the Home page is the greeting area that needs to contain enough cues to reassure visitors that they're in the right place and give them guidance about how to find what they need and what to do now that they're there.
Squarespace assigns every new website a built-in domain, a Site ID, that ends with “squarespace.com.” I recommend changing the random ID Squarespace assigns to be something you’ll remember.
To stretch and expand the background image to the top of your website, change the site header color style to Adaptive. The site header then becomes transparent so the background image shows behind the navigation text.
The clickable image that shows up on social media posts is called a link preview image. In Squarespace and other website editors, you can designate a specific image to show up when you share a website page on Facebook, LinkedIn, or Twitter/X.
Understanding in advance how your website will support your business will inform your website's design and content.
The aspect ratio of an image is its width relative to its height. Understanding aspect ratio helps you design your pages with images that look attractive and well-matched. Aspect ratio choices can also help with planning and choosing images you’d like to use on your website.
As a Squarespace Circle Member, I bring lots of benefits to my clients’ projects through the supportive professional community I belong to. As my client, you also get direct benefits I pass on to you, like an extended 6-month trial period and 20% off your first annual purchase.
Being able to preview your website live without logging out of Squarespace is a convenience for testing and proofreading before you launch.
You can add a Social Sharing image to Squarespace to be shown as a link preview for your website when you share a URL on Facebook, LinkedIn, and Twitter. The size of 1200x628 pixels works best for those platforms. You can also set custom images for specific website pages or blog posts to draw extra attention to them.
Squarespace and Square are two different companies. They both support online stores, so it can be confusing when you are doing research about getting your business online. Squarespace is my favorite website builder, so this blog post will explain how it’s different from the company called Square.
A footer is the last section of information at the bottom of a website page. Use this valuable area to show contact information, add links to website pages, and ask visitors to take action on their way to becoming loyal customers.
Here are my 10 favorite text tips to help you create a modern and professional-looking website on Squarespace or any other website platform.
