Squarespace Fluid Engine | How to Master Mobile Edits in Fluid Engine

Learn what you need to know about creating or updating your mobile website with Squarespace fluid engine. These tips will save you time and help you develop better.    

Fluid engine provides Squarespace developers with a more intuitive way of building and updating websites.  

But did you know that when you make a change to your site on your desktop, it may or may not affect how users see the site on their mobile devices?  

As longitime Squarespace Designers, we’ve discovered many of the ways desktop and mobile views differ in fluid engine, and we’ve created workarounds. We’ll walk you through some of these important areas to help you master mobile edits when you’re using Squarespace’s fluid engine.  

Table of Contents in Detail Hide

How to Use Templates in Fluid Engine 

Templates can save you a great deal of time, so you don’t have to create a page from scratch. They’re available to help Squarespace developers like you enjoy a better user experience.  

In a template, a Title Section can be used to list services or other helpful categories, such as Benefits or Features.  

When you design any Title Section, make sure it looks beautiful on mobile devices. When you build this on your desktop and you then check it on a mobile device, you may notice any number of issues, such as the icons looking way too big relative to the size of the text.  

• Don’t assume that what you see on a desktop template is what you’ll see on mobile. 

When you select a template you like, doublecheck how it appears on mobile. Before you get too far along the development process, modify your template so it looks great on both views.  

Adding a New Block in Fluid Engine 

When you add a line into a specific location within a section, it will look one way on desktop. When you go to mobile, you’ll have a hard time finding that line. 

That’s because on mobile, that line does not appear where you’ve placed it on your desktop page. Instead, it appears way at the bottom.  

• When you add a new block to a section, it always goes to the bottom of the list on mobile.  

So if you add something to the top of your page on your desktop, make sure you go to your mobile view and move that block from the bottom to the top. Use the convenient up-down arrow to move the block to the top of the mobile screen view.  

Adding Elements to a Fluid Engine Page 

Whenever you build a page, think beyond what you see on your desktop screen. Always think about your page along the lines of the order that you want elements to show up on mobile devices.  

By keeping this in mind, you can proactively add elements to a page to prioritize how everything shows up on mobile.  

• After you’ve added elements to a desktop page, go to mobile view and resize and reorganize elements for a better presentation.  

As a Squarespace developer using fluid engine, practice switching back and forth between views. Over time, you’ll get a good feel for how to streamline your desktop design process to simplify your mobile view editing process.  

How to Deal With Alignment 

One of the trickiest things as you move back and forth between desktop view and mobile view is how everything lines up. A good way to get things to align the right way in both views is to make small changes in one view and immediately check the results in the other view. 

• To get elements to line up properly, switch back and forth between views and make minor adjustments. 

After doing this a few times, you’ll have a great feel for what works and what doesn’t. You’ll learn to be more intuitive in your desktop design efforts, because you’ll have a better idea of how aligning elements a certain way on your desktop view translates over to your mobile view.   

Initially you’ll make some mistakes, but you’ll learn how to correct them by switching back and forth between views. Eventually, you won’t make these mistakes anymore, and you’ll streamline your process to design well for both views right from the start, saving you a ton of time.  

Bonus Pro Tips! 

Here are a few bonus pro tips to help you master mobile edits in fluid engine. 

• Once you format one block correctly for both desktop and mobile views, you can duplicate it in seconds to expand the page, and it will remain looking right in both modes. 

• As much as possible, avoid overlapping blocks. 

• To avoid alignment problems between desktop and mobile views, don’t leave gaps at the end of sections. 

• Always doublecheck mobile and desktop views.  

Optimize both views as you go to avoid having to do extra work to make everything look the way you expect it to look.  

Need More Help?

At Launch Happy, we love to design with Squarespace fluid engine. But we understand that if you’re just starting out, things can be a little confusing.  

That’s why we’ve put together a helpful resource you can buy to help you come up to speed with fluid engine quickly. Check out our Squarespace fluid engine starter kit to see if it’s something you might benefit from. 

We also make a ton of free resources available to Squarespace developers like you, from a powerful site audit tool to a free newsletter you can sign up for. Browse through our site today to find what you need to become a better developer faster.