Everything You Need to Know to Customize Your Mobile Website Design With Squarespace Fluid Engine Editor
PIN TO SAVE FOR LATER!
With the new Fluid Engine Editor, we now have more control over the design of our mobile website than ever with Squarespace 7.1.
Before Fluid Engine, Squarespace websites were automatically responsive — meaning the mobile version was already made for you. Amazing! But with the Classic Editor, you couldn’t really update the layout, which wasn’t ideal in many situations.
Designing your website for both desktop and mobile definitely requires more work, however it’s necessary for a seamless, functional and aesthetic mobile experience.
In this tutorial we’ll share everything you need to know to confidently customize your mobile website with the Fluid Engine Editor.
To learn more about Fluid Engine, check out this video!
How to edit your mobile website with the Squarespace Fluid Engine Builder:
1) CLICK EDIT IN THE TOP LEFT OF THE PAGE
2) CLICK ON THE MOBILE ICON IN THE TOP RIGHT
The mobile editor functions the same as the desktop editor — it’s just in a mobile size rather than desktop! The smaller screen size may add some challenges, but if you’re confident editing with Fluid Engine on desktop, then mobile should be a breeze.
The difference between the Classic Editor vs. the Fluid Engine Editor
In the Classic Editor, the mobile website design was automatically generated by how things were positioned on desktop.
With Fluid Engine, the mobile design is organized in the order of when it was added to the section. For example, if you have a blank section and add an image block, you’ll find the image block at the very top of the section in mobile. Squarespace will stack the Blocks in the order that you added them — which means they may need to be reorganized. Don’t worry, we have a few tips and tricks to make the process as easy as can be.
The changes you apply to mobile generally won’t update your desktop layout & vice versa — but there are a few exceptions.
You can position element blocks however you like without disrupting the desktop layout, however there are a few elements that will affect the desktop layout if adjusted:
1) Text alignment
You currently can’t align text centered on mobile and left aligned on desktop — it’s one or the other (big bummer!). However, this is possible with some CSS tweaks.
2) Button alignment
If you are using the “fit” option for buttons, please note that the buttons will be aligned the same way on both mobile and desktop. For this reason, we recommend using the “fill” option so you can align your buttons however you like.
Tips & Tricks for Mobile Editing With Fluid Engine:
1) Don’t extend text past the grid (eg. to the edge of the section)
This makes text hard to read. Instead of butting text blocks to the edge of the section, try images! See example below:
2) Avoid overlapping text blocks & buttons
Depending on the size of the device, the text can actually overlap the button or vice versa if the container height is set too large. This isn’t ideal for legibility and doesn’t give the elements space to breathe.
Every element block has it’s own container and these containers will span to wherever you drag them. If your block has dead space, make sure to reduce it to the minimum, like this:
To avoid text and button overlap, make sure the the element containers don’t overlap, like this:
3) Consciously overlap visual elements to create dimension
Overlapping graphical elements (images, logos, scrolling text, etc.) can add dimension to your mobile design and make it feel more custom:
4) Extend the grid to give yourself more space to work
When we design a new mobile section, we always extend the section height drastically to give ourselves more freedom while we adjust the layout. Once the layout is set, simply minimize the section height to desired height.
5) Always verify your live website (on mobile) and readjust in Squarespace if needed
You may notice that elements move around as you’re editing your mobile website. Elements will often mysteriously expand or move down the grid *eye roll*
Once you’re done editing your mobile website with the Fluid Engine Editor, always make sure to verify the live version of your website on your device to make sure everything looks good. There may be a little bit of back and forth — refreshing your browser and updating the site on Squarespace.
6) Double check the mobile version of your website every time you add a new element to the desktop version
Adding a new element to a section will place it at the bottom of the mobile layout. We recommend reviewing your mobile version every time you add a new element to the desktop version to make sure everything is where it should be. To hide a specific element on mobile only, check out this tutorial!
Useful time saving hacks for mobile editing:
1) Update the mobile section before duplicating section/page
If you plan on creating a section/page with a similar design to another, make sure you update the mobile version before duplicating. This will drastically speed up your editing process because everything will be laid out in a similar and efficient way.
2) Add your desktop content in order of how you want it to appear on mobile
If you want to save time — think ahead. As we mentioned, Squarespace will stack the Blocks in the order that you added them. Keep this in mind as you create your desktop layout, and organizing in mobile will be much easier and less time consuming!
3) DESKTOP + MOBILE: Utilize the new block duplication option
Squarespace just added an exciting feature that allows you to duplicate blocks — FINALLY! We can now duplicate elements by using the keyboard shortcut COMMAND + D or clicking on the duplication icon: