Jo_SQSP Posted November 17, 2021 Share Posted November 17, 2021 Have you ever heard of the term “mobile-first design”? It’s a common concept among web designers who want to stay ahead of the curve on the technologies that we use every day to view sites on the Internet. The philosophy contained within mobile-first design is called “progressive advancement,” which dictates that you should design your web presence with smaller screens in mind first, which in turn makes it easier for you to progressively move on to larger screens. According to data shared by the AdobeXD Ideas blog, two billion people currently access the internet on their mobile devices, and that number is expected to jump 72.5% in the next three years. That’s a lot of people to think about! In essence, thinking about mobile-first design forces you to strategize and prioritize your content so that it is leaner and more to the point, to use headings strategically in order to create a visual hierarchy, reduce the number of links in your navigation to fit a smaller screen, use fonts that prioritize readability, and to use white spaces to your advantage for a cleaner layout. What are your best practices for designing more mobile friendly sites? Share your ideas below! Andrew101, antovicodg and Gamer 1 1 1 Link to comment
paul2009 Posted November 17, 2021 Share Posted November 17, 2021 This is an interesting subject choice because it isn't possible to practice Mobile First Design on Squarespace yet - at least not without a lot of code or a no-code pay-monthly add-on. The Squarespace platform doesn't allow you enough control over mobile layouts at present as it decides the mobile layout for itself. I'm really looking forward to the day when the editor is updated so that we can build mobile sites more easily on the platform. Something to look forward to in 2022. 🤞 MKT, JordanKH, jenneb and 6 others 8 1 About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥. Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links. Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional. Link to comment
antovicodg Posted November 2, 2022 Share Posted November 2, 2022 I was wonder the same gcart 1 Link to comment
paul2009 Posted November 2, 2022 Share Posted November 2, 2022 In 2022, Squarespace brought us Fluid Engine, and it is now possible to design a completely independent mobile layout for each page by arranging the mobile layout and resize its blocks independently of the desktop layout. PANTONIO and Spark_Plugin 2 About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥. Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links. Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional. Link to comment
SCAgency Posted April 21, 2023 Share Posted April 21, 2023 My biggest issue is that you have to do a lot of tweaking to the mobile design with positioning and spacing. On platforms like WordPress with Divi, it intelligently lays out the responsive flow and still allows you to tweak it. This is a much faster approach that how Squarespace currently handles it. On the current site I am building in SS I need to tighten up massive gaps between column content on mobile. Just a lot of extra steps per section per page. VisualNotes, Li-zl and gcart 3 Link to comment
ElaineAZ Posted June 13, 2023 Share Posted June 13, 2023 This is my first time using Squarespace and I am noticing that some graphics and buttons are out of alignment when I look at them in mobile mode. What do I need to do to anchor these graphics and buttons so they don't move out of alignment when going to mobile vs desktop view? Thanks in advance for advice. Link to comment
drunkbeetle Posted August 18, 2023 Share Posted August 18, 2023 Hi everyone, I'm new here and I was about to post a thread for help on this topic. My website looks terrible on mobile. So when I went to edit in mobile view it changed the original website as well. Which meant I had to go back and waste time editing the original again. Is it possible to have 2 different designs, one for desktop and one for mobile. And then when mobile users access the domain they are directed to the 2nd design which is better optimized for mobile view? Link to comment
WCS Posted August 22, 2023 Share Posted August 22, 2023 Hi @drunkbeetle, welcome to the forum! While you could technically use code to have 2 different sets of design, it's not a good idea for your site's health or for SEO. Sometimes it makes sense to hide 1 section and show another on mobile but that's on a small scale. There are things you can change on mobile view that don't impact the desktop design: Button size Layout of items (text, images, etc.) Image size Text block size However, you can't change the below without it modifying on desktop: Image alignment Text alignment or color Settings to list items Basically, you can move items and change the boundary box without it altering your desktop design -- these changes are more about where items go. However, changing the content or styling of a text box, image, etc. will appear on both desktop and mobile. 💡 If you're designing on a monitor, your settings and window size may modify the mobile preview. I'd highly recommend updating a section and then checking on your phone to see if the two versions are close. If they aren't, you may need to adjust your set up. There is CSS that can be applied to modify list carousels, text styling, and more. If there are specific places where you're struggling, post your issue with a screenshot, link, and password (if your site isn't launched yet, you'll need to go to Settings > Site Visibility > Password Protected and set a password). 😊 drunkbeetle and gcart 2 Was our response helpful? Click 👍 or mark it as the solution! This helps others find the answers they need. My name is Meghan and I'm the owner of Westerly Creative Studio, a Bay Area creative force specializing in Squarespace websites and branding foundations. Follow along on LinkedIn or Instagram for more tips, updates, and resources. Link to comment
katswanseyphoto Posted October 10, 2023 Share Posted October 10, 2023 Hey @drunkbeetle, just wondering if you figured this out? I am having the same issue and can't seem to figure it out. Link to comment
dreyahbohlen Posted November 2, 2023 Share Posted November 2, 2023 I've found that Fluid Engine has helped a lot with being able to make some changes on mobile that won't affect the desktop version but alignment has been a huge one for me! I use Squarekicker to achieve a different mobile experience and it works great! You're able to do quite a bit more (change alignment, add blocks and hide them from desktop, change up the layout further) without messing up the desktop view and vise versa. I have a paid promotional affiliate link with them if you're interested in a free trial: https://squarekicker.com?ref=dreyahbohlen www.dreyahbohlen.comInstagram | Facebook | TikTokBuy Me A Coffee Link to comment
LouiseDrever Posted December 13, 2023 Share Posted December 13, 2023 I was just about to post a thread asking for advice on mobile layout so I'll add it here. Does anyone find Fluid Engine a bit buggy? Or am I doing something wrong? I worked to get the mobile section as close as possible to the desktop on a client site, sent it to them for review, and they've come back with a lot of small mistakes that I swear weren't there when I finished it. I don't know whether it's because they're changing things and not noticing that it's affecting the mobile layout (ie user error), but it's driving me crazy. Link to comment
paul2009 Posted December 13, 2023 Share Posted December 13, 2023 17 minutes ago, LouiseDrever said: Does anyone find Fluid Engine a bit buggy? Or am I doing something wrong? FE can be very frustrating (it is for me!) because there are lots of things going on in the background that, if you aren't aware of them, can make things seem unpredictable. Examples are "Row stretch" (see the height of the rows in the image below) Avoiding overlapping blue boxes Creating space within the blue box for elements to expand Can you share some screenshot examples of your issues, including screenshots of the pages whilst in the editor in mobile and desktop (showing the grid)? That may allow contributors to suggest solutions/workarounds for the issues you're experiencing 🙂. LouiseDrever and CarolStatella 2 About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥. Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links. Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional. Link to comment
LouiseDrever Posted December 13, 2023 Share Posted December 13, 2023 Thanks so much for your reply @paul2009! I think because I'm not all that confident using FE, I'm still not sure what is user error, and what is behaving the way it should (and what's not)!? The row stretch for example - is that what's supposed to happen? It doesn't always seem to behave in the same way for me (though I do need to really use it more and get more comfortable with it). And thank you, I certainly will post some examples. Link to comment
paul2009 Posted December 13, 2023 Share Posted December 13, 2023 1 hour ago, LouiseDrever said: I think because I'm not all that confident using FE, I'm still not sure what is user error, and what is behaving the way it should (and what's not)!? You're not alone @LouiseDrever. We're all still learning. For example, here's an example of how to stop an Accordion Block affecting an Image Block by changing the way the rows stretch (credit to @guillermo_SQSP for his patience in explaining this!) LouiseDrever 1 About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥. Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links. Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional. Link to comment
HerMessyBun Posted December 19, 2023 Share Posted December 19, 2023 My best practice for mobile design and styling: Don't be afraid to hide elements on mobile Disable the Mobile Information Bar Shorten the mobile nav menu (code below) Anchor Links .header-menu-nav-folder-content { flex-grow: 0; } xo Danielle Link to comment
LouiseDrever Posted December 22, 2023 Share Posted December 22, 2023 On 12/13/2023 at 8:18 PM, paul2009 said: You're not alone @LouiseDrever. We're all still learning. For example, here's an example of how to stop an Accordion Block affecting an Image Block by changing the way the rows stretch (credit to @guillermo_SQSP for his patience in explaining this!) Wow! That's such a simple but important tip! Thanks for understanding - I feel less like an idiot knowing it's not just me! 😅 😂 I've got a related issue now with image blocks, but I'll look for a more relevant thread or start another one. paul2009 1 Link to comment
justin.mabee Posted January 2 Share Posted January 2 One of the best pieces of advice I can give with Fluid Engine and mobile design adjustment is to adjust mobile as you go. Building out websites, I do my best to build out a page, get client approval, then adjust for mobile, and then use that as my template moving forward. I mostly build my websites from pages I've already created, saving sections, and re-using them throughout the site. Once you adjust a section for mobile, you can save the section, and then when you re-use it, it stays mobile optimized. So if you add additional content to that particular section elsewhere, you only have to re-adjust the new elements you added. This worked really well on my most recent launch, dingsmotionusa.com, where I had nearly 100 pages and several pages that all had the same content and elements on them for products. I built one page with the structure I needed, then adjusted for mobile, saved the sections, and repeated across 70 pages. So I had very little I had to adjust when I was done. CarolStatella 1 Link to comment
Humlemo Posted January 24 Share Posted January 24 I try to find an answer here as well. In edit mode the device version looks good but when I display it on an actual device it's the desktop version that shows. Im using 7.1 Is there a way to force device version instead of desktop version? Link to comment
CarolStatella Posted February 14 Share Posted February 14 So many great suggestions. I design mobile as I go, also—with several devices, if possible. Am in the process of working with a Circle member to obtain code to make a button on mobile work on the first tap. This is happening on at least two sites that I'm currently building. Squarespace support has been most helpful and said that it's an issue on their end, and they're on it. In the meantime, my client is patient, luckily :/ Link to comment
thesquareteam Posted March 18 Share Posted March 18 Hi, I am new here. Would love any suggestions. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment