2021-09-30 19:28:23 – Nicole Cammorata
If you ever had to pinch-and-zoom your way around a website, trying to press microscopic buttons just to get to the next page, then you probably know how important it is that your website can adapt to the small screen. Squarespace is a website design and hosting platform that ensures that every one of its 90+ templates will resize itself for a legible mobile experience, but some templates offer even more options with customizable features you can play with just for the mobile version of your website.
Among these templates, some of the mobile features are pretty basic and come down to adjusting font size. But others, such as any of the 40+ templates within the Brine template family, offer many ways to tweak the mobile version of your website and give your phone-holding viewers a strong first impression.
Do Squarespace websites work on mobile?
Every Squarespace template is built off the concept of responsive design, which changes the dimensions of your website as viewers adjust the size of their browser or switch devices to read your content from a tablet or phone. On mobile, all of your content will stack vertically, eliminating the need to pinch, zoom, or scroll horizontally. Aside from making your site easier to use, there are many benefits to having a mobile-optimized website, such as having a higher SEO indexing priority and the opportunity to take advantage of some mobile-only customizations.
How to make a Squarespace website look good on mobile
When you’re using your desktop to design your website, the first thing you should do is adjust the size of your browser so you can preview how design elements will shift in the mobile view. If you’re using spacer blocks on the desktop version of your website, bear in mind that these will disappear in the mobile version as the priority is to stack each element vertically. When deciding how to layout your website, you should think about the potential reader who has just arrived and where they are coming from. Did they click through from your Instagram profile or find one of your blog posts on Google? Because everything on mobile is stacked vertically, you should put your most important information at the top of the page every time.
If your website features many photos, you should also consider uploading them at reduced file size, since large-format images can cause your mobile site to load more slowly. (Peep our picks for the templates that photographers will love here.) Squarespace recommends keeping your page under 5 MB to make sure it loads quickly and if you are using your website for blogging, you can also toggle on Accelerated Mobile Pages (AMP) to quicken the pace of how fast your posts load.
What is the best Squarespace template for mobile websites?
We selected some of our favorite Squarespace templates for mobile websites, not just from the all-star Brine family, but also other templates that may have features better-suited for your business.
Best For Musicians
For touring musicians, a mobile-friendly site is key for discoverability. On the mobile version of Aria, your viewers will be pulled in by a top lead photo and an event calendar, which you can use to highlight upcoming gigs and events. Aria also supports different styles for eCommerce information, so you can customize your merch page.
Part of the Brine family, Aria has extra customizable features for mobile sites, like adjusting the weight and color of icons and text when they appear on mobile. You can also set the point at which the website width makes the switch. Musicians may want to fix the top banner, so you can be sure the user sees your name as they scroll. The option to add a secondary navigation bar can also be handy for making sure important pages can be found by the right people, but won’t take away from your main brand message. These menu items appear at the top of the screen on the desktop, but on mobile, it’s just under the main navigation buttons of the sidebar, but the font can be customized to be less or more pronounced.
Best For Visual Bloggers
If you want every blog post to feel like it’s from the pages of a magazine, Farro is a great way to give your work an editorialized look, adjusted to your personal style and brand. Not only can you customize the positioning and colors of your navigation menu, but you can also change the style of the blog list, opting for different aspect ratios, which can enhance the overall look of your website.
Fashion bloggers might prefer the 2:3 ratio for showing off head-to-toe styles, while travel writers can feature sprawling landscapes with the more cinematic 2.40 Anamorphic Widescreen. This ratio also has a very cool revealing effect when looking at your page from a computer. Text placement and the color and style of any overlays you may want to add are also customizable on posts in the mobile view. The only downside is that on mobile, you are stuck with the stacked organization of blog posts, while the desktop version has more layout options.
Best For Ecommerce
If you’re running an online store, the mobile version of your website should be easy to browse without individual photos taking up too much real estate. Galapagos is a perfect template to do this. Unlike the Farro template, the adjustability of the grid works as well as it does for mobile as it does on desktop, giving you the option to change the product size and spacing, as well as select the style of extra product information to appear as an overlay, box, corner, or tag. Setting your product to the smallest size (1.8) and changing the grid style can help you fit even more on the front page.
The beauty of this layout is that even if you are trying to push as many items to the top of the page as possible, it still looks organized as long as you’re using product photos with a solid background. Individual product pages also adapt easily to mobile with large photographs to ease the online shopping experience for any potential customers. Galapagos is also one of the only templates that lets you add a second logo in the top bar of the mobile navigation bar. If you have a minimalistic version of your main logo, this is a nice place to use it.
Best For Jacks Of All Trades
If you only have one website to display the breadth of your many talents, you’ll need a mobile homepage that can easily help viewers navigate the many interests and projects you have going for you. York is a classic template and made for doing just this. The intro text at the top is your chance to tell the world who you are, giving them a sneak peek of your multi-faceted portfolio below.
The mobile version of York has some options for customization, such as being able to affix the navigation and title bar to the top or bottom of the screen and toggle the transparency. You can also change the width of the logo and the color of the menu icon. York’s mobile menu is quite bold, capturing the whole screen in one click. Try changing the color of the menu background for an effect that will more easily grab viewers.
Best For Simple Statements
You don’t need to have a blog or extra informational pages, just because you need a landing page for your business. Aviator is a great template for keeping things simple and highlighting key information and there are a few customizations for mobile versions.
The welcome page of this template leaves just enough room to share your logo and a tagline on top of a beautiful full bleed photograph. The logo size is adjustable and the background image can be turned on and off for the mobile experience. Aviator gives you a smaller space to work with, but at least it won’t look cluttered. If you’re struggling to get that background image to shine through, try adjusting the overlay color to something with a lighter opacity.
Best For Blogging On Mobile
No worries if you don’t have a lot of strong visuals to accompany your content. Tudor is a layout that can draw in readers on the substance of your writing alone, but still looks good when you do want to add a photograph.
When publishing articles from multiple contributors or writing about a variety of topics, it’s easy to organize your content within the home page which looks clean on mobile. Each blog post is designed to shine on its own and you can make the details of each post, like the circular date callout, really pop. In mobile, the Tudor layout organizes itself, automatically moving the navigation bar to the bottom. This way, it’s always within your readers’ reach. However, you’ll notice there are not quite as many options for mobile-only customizations.
Best For Small Business Owners
While business cards can easily get lost in the rush of a conference, a website that’s professional and exciting to look at can make a lasting impression. The Nueva template does just that with splashy titles and a lot of room to share your brand statements and testimonials. With so many customizable features for mobile, it’s easy to integrate your brand aesthetic into every part of this template’s mobile experience.
When it comes to mobile presentation, Nueva is the shining star of the ultra-customizable Brine family of templates. With the ability to adjust the mobile breakpoint and parallax images, this template will make your site a pleasure to scroll through. That being said, this platform would be best utilized by small businesses that have strong visuals that can represent their products or services.
Best For Portfolios
If you’re a visual artist who specializes in different niches, the Carson template can help you make a strong first impression. It also comes with a few special tweaks for the mobile version.
With this template, your navigation menu is the main event and as you hover over each item (in a desktop view), the background photo changes. This is a great way to quickly represent the variety of your services or projects in a visual manner. On the mobile version of this template, the photos will flip through each category automatically, which heightens the oomph factor. You can customize the mobile appearance to scale the width of the size and menu fonts, with an option to customize this for tablet-sized versions of your website also.
Best For Restaurants
Much like the Carson template in the same family, the Tremont features a flashing front page design that works great on mobile but offers a more classic look with navigation items listed horizontally rather than vertically. This is a better template choice for restaurants that want to display their different menus while getting their customers hungry with glossy photos.
The top description above the index is a good spot to present the key information potential customers may be visiting your website for — such as an address or phone number. While the photos flash between the different index items and photographs, this information will stay constant. If you have more pages to include, like a history or contact page, but don’t want to clutter the initial effect, you can organize them under the secondary menu that stays present at the top of the page.
Best For Events
If you need a simple landing page for your event, the Royce template is a streamlined way to present essential information, as it does not rely on the need to have a lot of photography or informational pages. At the top of the page, you can use one strong photograph and a title to set the stage for your event, and an RSVP button that will take up the whole screen when clicked.
Below, there’s room to add more key information, a description of the event, and any other fun details you may want to mention. Being a part of the Brine family of design, Royce has the option to fix the title banner to the top or bottom of the page on mobile, which is also a good way to keep your brand ever-present in the reader’s view as they peruse event details.