So good to know. Having issues on my site with buttons wrapping onto two lines and the images being cropped as it goes to tablet or mobile - I’m confident I have the fix now though!

@launchthedamnthing

16 күн бұрын

Yay! Glad this helped! There's a newer video that dives a little deeper now that Fluid Engine has been around for a couple of years. You can check it out here: kzread.info/dash/bejne/jJquxaWCZciuj8Y.html

Thank you so much for this tutorial. It's incredibly helpful. I've been running on my person site on Squarespace since 2014, and I haven't made the switch to 7.1 yet, but I'm building a website for my company this week with 7.1 and I was trilled with the new designs I could make, but then was frustrated after I began resizing the window. I think these 3 tips can't be repeated enough, because it solved 90% of my problems. Another big thing is when overlaping images (depending on what you're going for), sometimes it's just better to do it in a photo/image editor outside of Squarespace, and drop the single image in. so that it sits the same way every time. This doesn't work if resizing is a big issue, but in many cases it's the best solution. Another big thing I found is to use PNGs with transparent backgrounds, especially if you have an app that can do gradient transparencies so that the image fades back into the background if you don't want the image to have hard edges. You can use PhotoScape X to get that to work (video idea alert if you don't have one on this 😁) Is there a way to do motion graphics for the images? I know I can imbed a video, but I just want the image to do a bit of movement as you scroll down the page (but doesn't have a replay button) and just looks like an image when it completes. I think the Apple website product landing pages are a good example of this).

@launchthedamnthing

Жыл бұрын

@JimWilbourne You're welcome! So glad to hear those simple best practices have solved so many of your responsive problems. I agree with your additional comments too, overlapping a video block on top of an offset shape block for example can become downright "weird" in tablet view and not at all what was intended! 😂 As for the motion graphics, I tend to source those from Canva for animated arrows & things that move on a loop without using video. If you search Canva for the type of graphic you want, then filter the results to cut-outs or animated graphics, you'll typically find quite a few to pick from! Some even allow you to edit the colors which is nice! If you save it as a GIF, Canva doesn't allow those to have transparent backgrounds, so I just add a background color that will match the background of the website where I intend to put it, or you can try using something like www.unscreen.com/ to remove it, though they watermark everything on the free plan. Hope that helps! 😁

Wow! This is so helpful. I just tried it and it is such a time saver. You're the best. Keep on rocking! 🤩

@launchthedamnthing

Жыл бұрын

Yay!! Music to my ears. Thanks for sharing, Ulli! 😁

Omg I love the break when your pup was barking! You’re too funny! ❤😂

@launchthedamnthing

9 ай бұрын

Hahahaha!! Happy to have made ya laugh! 🤣

Thank you so much for this! I've been struggling with responsiveness and this is super helpful.

@launchthedamnthing

Жыл бұрын

You're welcome! Thrilled that it helped you get a better handle on it. 😁🙌🏻

Awesomesauce!! #toptutorial Just downloaded, and bookmarked this video 😀

@launchthedamnthing

Жыл бұрын

Hahaha! I'm so glad it was helpful for you Ilse! 🤩

Absolute gold video & tutorial! The tip about the buttons - so simple but yet so impactful. Responsively is amazing, but yeah I long for the day we don't need it (a girl can dream!).

@launchthedamnthing

Жыл бұрын

Thank you!! 🤩 I'm stoked it was so helpful for you!! --And yeah, me too girl. haha! Let's keep telling them in the Circle forum & in the support chats w that as a feature request bc I think they'll base that on how many times they hear it's important to us!

This is a great video, really appreciate the tips and knowledge. I am a full time web engineer and I am doing some work for a Square Space user. This is my first time using SS (and Fluid Engine) and I have to say, I was really frustrated by how "responsive" SS was being. I totally get you when you say, "it is responsive, but not intuitively responsive" lol. 100%. I use Flexbox regularly but didn't realize that's what was behind Fluid Engine. Once you said that things started to make a lot more sense. In my experience, I usually develop with a mobile first approach. The idea being, when you do that you can make desktop styling/layout/design a lot easier because there is a lot more real estate to work with, knowing you've done most of the mobile design work already (granted, you still need to make sure the design didn't shift during development). Once I watched your video, I started to do that more and noticed when I make Mobile changes first, it doesn't impact the desktop layout/design nearly as much as when I make changes on the desktop side first. Have you tried a mobile design first approach? I am curious if this is something you've tried since you made this video and maybe it makes working in SS more manageable? Also, Responsively is awesome! Thank again for this video and your time! It was great!

@launchthedamnthing

7 ай бұрын

Thanks, Isaac! I'm so glad that was helpful for ya. 😁 I don't typically design it on mobile first because Sqsp doesn't provide the 'add block' button in mobile view, but I do layout things in each section knowing what Sqsp will probably do with the elements or pieces in the layout, and then make sure to adjust the mobile view before saving & leaving the editor (so I won't forget! lol) for that page. It's not super intuitive, but it is way easier than other mobile editors because it does become somewhat predictable in how it works with practice or especially if you understand flexbox. haha - Happy it helped ya get the work done a little easier & that you like Responsively too!

Thanks for this helpful video. Those three main tips are invaluable! I’m curious about Responsively. I download it but am having trouble using it. Getting ambiguous error messages that I don’t know how to interpret. I’ve been using the device view in the Inspect tool in the meantime.

@launchthedamnthing

Жыл бұрын

You're so welcome! I'm glad it was helpful for you. 😃 I'm sorry you're having trouble using Responsively. I've never seen an error message in there before so I'm not sure what to help you troubleshoot. 😔 Maybe check their downloads page to see if you have the right version? I know for my Mac I had to download the new version that's NOT for the Intel memory chip when I upgraded my laptop last year. If that doesn't work, definitely try emailing them to find out what's up! Never hurts to ask! 😄

Wow, this is a great video, so many good points to help people! Only draw back is I saw and liked your link on Facebook before actually listening and now I'm wishing i could go back and find it to give a comment on there! 😅

@launchthedamnthing

Жыл бұрын

Since I had just shared it in a group, I checked there & tagged ya. 😂 So glad it was helpful for you!!

I just launched my SS site and the desktop version is not responsive. The layout changes based on monitor and screen size. Help!

@launchthedamnthing

11 ай бұрын

Yes, Olivia, that's technically correct! 🙃 Elements in Squarespace's editor are responsive, BUT Squarespace also gives us the opportunity to edit the layout (position) for those elements between Desktop and Mobile. So you will have to switch to the mobile view while in edit mode & make position changes there too, in addition to the Desktop editor's design. If you watch the video & follow those 3 best practices AND also ALWAYS check mobile view any time you see the blue dot on the phone icon there (top right corner of the editor window) then you'll know when the changes you made to Desktop have affected the mobile view & when to go check that for adjustments before saving & exiting the editor. Hope that helps clarify! 😁

@user-bw4hr8gx3o

11 ай бұрын

its not the mobile version that is the problem, it is the desktop version. I made edits to mobile and it seems fine. I have a bunch of icons and text in a section and as the screen gets bigger or shrinks, the icons move and the text moves and becomes out of alignment. @@launchthedamnthing

@user-bw4hr8gx3o

11 ай бұрын

Also, there are some sections where the section was built using a template and they are also moving around when shrinking and enlarging screen. I also have a section, where I am using an accordian, and when I click on the arrow, the image next to text enlarges...@@launchthedamnthing