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! Gamer and antovicodg 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. 🤞 Spark_Plugin, Rubykatedesign23, cmancuso and 4 others 7 About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. Content: Links in my posts may refer to SF Digital products or may be affiliate links. If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too. Link to comment
antovicodg Posted November 2, 2022 Share Posted November 2, 2022 I was wonder the same 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: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. Content: Links in my posts may refer to SF Digital products or may be affiliate links. If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too. Link to comment
SCAgency Posted April 21 Share Posted April 21 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 1 Link to comment
ElaineAZ Posted June 13 Share Posted June 13 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 Share Posted August 18 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 Share Posted August 22 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 1 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 Share Posted October 10 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 Share Posted November 2 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment