Creating Responsive Websites in FLUID ENGINE does NOT have to be a PITA 🍑 | Squarespace

[@JimWilbourne]

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! 😁

[@ulliwendrich4125]

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! 😁

[@floatinglotusdesign]

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!

[@plantbasedbriefing]

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

[@launchthedamnthing]

Hahahaha!! Happy to have made ya laugh! 🤣

[@davetaylor7664]

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]

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: kzbin.info/www/bejne/kJfdlHZ_asp7lcU

[@quizninja8888]

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. 😁🙌🏻

[@YTillie2000]

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

[@launchthedamnthing]

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

[@IsaacGilman]

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]

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!

[@dlem507]

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! 😄

[@dmak2425]

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!!