Editing your website’s mobile view
A quick walk-through on how to change the mobile version of your Squarespace 7.1 website!
For more information, PLEASE see this documentation from Squarespace.
VIDEO TRANSCRIPT
As you make edits to your desktop site, it's going to change and shift how your content shows up on your mobile side. This video will show you how to make edits to the mobile side to make sure that your site is showing up just as beautifully on people's phones, which in today's world is arguably even more important than your desktop site.
The easiest method I've found for mobile edits is to get one web page completely ready to go on desktop, and then hopping over to mobile, optimizing it on mobile, and moving on to the next page. I've found it's easier to edit page by page instead of getting your entire website set up on desktop and then hopping over to mobile.
So let's get started with this.
Editing your mobile site in Squarespace 7. 1 Fluid Engine is thankfully super easy, especially compared to the old Squarespace.
The mobile customizations used to be super limited, but now it's a drag and drop feature thanks to the Fluid Engine setup.
It does definitely take some time, which is why I'm dedicating entire lesson just to mobile edits, but again, thankfully, it's pretty easy to do.
Your editing flow is totally built on preference. You could design the entirety of your site on desktop first, and then hop over to the mobile side. I typically like to finish designing an entire page in desktop, and then edit it on mobile, and then move on to my next page.
I do recommend getting your desktop design finished for a page before you move into your mobile site.
Now, all of my templates have obviously already been perfectly customized and designed for mobile so this is already looking great, but typically if you're designing a brand new page or you've made some major adjustments to sections or added new sections, when you hop over here, your text and images will be completely stacked on one another and look weird.
To show you an example, this is what it's going to look like once we've added a brand new section, and we're adding new content to the section.
So we've added this new section. It looks just fine on desktop. We'll save it, and we'll notice when we hop over to the mobile side, It looks a little bit different on the mobile end. This actually isn't bad. Sometimes when I create a section, depending on the layout, I'll hop into mobile and it'll look something like this.
Once we've hopped over to mobile, it's just as simple as clicking and dragging the blocks around the section, just as we would on our desktop site. Changing the order and the placement of these blocks is not going to change what it looks like on desktop.
For example, let's say I do that configuration for some reason on mobile, you'll notice desktop, nothing has changed. So that's the really awesome thing with mobile customizations in Squarespace 7. 1.
It is important to note that the differentiation between mobile and desktop is based on layouts, And that if you make changes to the content itself, this will still carry over to the desktop as well. So for example, there's not a way for me to have the color of my text be yellow on mobile and not on desktop.
It will change the color on desktop as well. Same thing with images. If we want this image to actually be a fill image, we want it to fill the container that we're setting. Which I usually do recommend, especially on mobile, it makes it really easy so that we can, for example, fill the container on mobile, just make it look a little bit prettier.
But when we go over to desktop view, you'll notice that it has now changed from fit to fill. So this is what it looked like previously, but because we've changed on mobile, it will now change on desktop as well.
Once we've created a layout that we're happy with on mobile, we can go ahead and just press save as usual, and now it'll be updated for mobile.
Keep in mind just from a design aesthetic standpoint, it looks best to alternate between text and images. For example, if when we pulled this section over to mobile, and it looks like this with the image first, that still looks great by itself, but in the overall flow of the page, it's not super aesthetically pleasing or content friendly to have an image followed by an image. I would just make sure you reorder any sections to have a text image text flow.
To edit things quickly and easily, especially on mobile, because sometimes you'll get long configurations of content that needs to be reordered, you can always click and drag to hold multiple blocks, and then use your arrow keys to shift content up and down.
This comes in handy especially, like I said, if you have multiple images and text blocks that need to be reordered within a single section. If you do anything that you don't like and you want to undo it, you can simply press Command + Z and undo the previous work that you've done.
You'll want to make sure before you launch that your site looks great on mobile and desktop because about 60% of web traffic overall does end up being on mobile.
To change our mobile menu, we can simply go back into our site styles panel and access all of our style options.
Your footer, again, on your templates should already be perfectly designed for mobile, but if you decide you want to change the layout and settings for desktop, it does often end up looking wonky on mobile, so you'll just have to hop back in and change it.
So let's say, for example, I want my logo to be over on this side, and I actually want my... navigation to be in the center, and I've decided that I want all of my content to be justified to the left.
So we'll scoot these all together, make this a little bit smaller, and let's actually do this. So let's say we've decided that's what we want our footer to look like.
Once we hop over to mobile, we'll notice, actually, that doesn't look too bad, but our content is spaced a little bit closer than it was previously. So we can simply move this to give some nice visual space in between. Again, you'll notice that once we've changed the justification of the text, it's going to be the same on desktop and mobile.
So because we've changed it to be left justified on desktop, it's going to be left justified on mobile as well. So change it to right justification, it'll be right justified. So those are a couple examples of little tweaks that will carry over from our mobile to our desktop view.
