Understanding Image Ratios in Squarespace Slideshows

In the video video below, I walk my client through determining the "image ratio", using Picasa to crop images, and adding the newly-cropped images to the Squarespace Gallery + Slideshow.

Have you enjoyed using the Squarespace Slideshow component that's built-into V5's editor?

Rather than define an exact pixel size, Squarespace has decided that setting the "ratio" makes more sense, because the images already are set to proportionally scale in Squarespace's Photo Gallery, and the Gallery module is what feeds the slideshow component.

This concept works well for "standard" photos that would come out of a camera— photos that use generic/standard size ratios. However, when using a Squarespace Slideshow in custom locations, where a pre-determined "target size" is important, it can be a little tricky.

In the client-site example on my video above, I've incorporated three Squarespace Slideshows on the same homepage. All three slideshows are the same size, but as my client quickly learned, using THE EXACT image size is important.

Here's why this is important:

It's fantastic that Squarespace's code will auto-crop and re-size the images to fit our areas, and they won't distort the aspect ratio, but if the images are larger than the target area, there is a great-deal of unnecessary overhead when loading the images. It's totally possible that the image files-sizes could be 10-20 times larger than they need to be. Pre-scaling your images will greatly help you! 

(*NOTE* This changes in Version6, where images are sampled at multiple image sizes on the server-side)

Here's What.

If you've used the Squarespace "Slideshow" component, you might already know that configuring a custom "image ratio" is a little confusing, so in the video, I'll walk you through determining the "image ratio".

Do I need to learn Photoshop?

No. I work with many clients who wish to swap-out images on their websites, but either they don't want to invest in the cost of Photoshop, or in-reality— learning how to use Photoshop for simple edits can be daunting. 

There are hundreds of apps, and even websites that will allow you to crop and re-size images, and after further hunting for "an ideal app", it looks like Google's Picasa (free app) will be the easiest to use, and is available on both Mac and PC.

Receiving a Form Attachment on Squarespace

I record many video tutorials for my clients, and when doing a site hand-off, I generally will build them their own private video library (no wood paneling or cool rolling ladders though, unless the budget allows)

On a recent Basecamp conversation with a client, as I was answering questions about customizing Squarespace's contact forms, I decided to post a video to explain specific customization, and then to share it with you here.

Here's the conversation and the video...

Q: Can you show me how to allow job-seekers a way to attach their CV on a Squarespace form?

Sure... Squarespace forms are quite easy to edit. Most every customization is possible, however— Squarespace forms will not allow "an attachment". (I know— bummer)

There are a few workarounds if you want to allow an attachment on your forms. Here are a couple of ideas…

OPTION 1.

Use a third-party form like FORMSTACK.COM — their forms will allow this, and we can embed them on a Squarespace site. (I use Formstack's form on Squareflair.com/quote to allow people to send me files along with quote requests.)

OPTION 2.

Use a Squarespace form, then in the "Form Confirmation" field (on the form configuration area), we could add a message with an email link, stating:

"Thank you for filling-out the form. Please submit your CV to the following email address: emailcv@domain.com"

OPTION 2.1

Add a "dummy" checkbox within the form stating:

" [ × ] Check if you will be submitting your CV (look for instructions on the following page."

(The checkbox will not do anything in this case— only as an alert for you, that field will be marked as "YES" when collecting data via email or on the Squarespace-generated spreadsheet in file-storage area.)

OPTION 3.

Use a Squarespace form, then in the "Form Confirmation" field (on the form configuration area), we could add a message with a PAGE LINK to a Squarespace upload module. The upload module looks like this example site: http://alizadehortho.com/file-upload The output is then mapped to a directory in your file storage area. To get your files, you just log-into your Squarespace account and download them.

OPTION 3.1

See 2.1 above

Video hosting exclusively from Wistia.com, a Squareflair partner.

Sparrow Raises the bar for iPhone App Demo Websites

For over a year now, I've been running Sparrow Mail for Mac, and it's been a great, streamlined solution for email. A few weeks ago, I installed the new Sparrow iPhone app, and I can tell you— it's fantastic. Great design solutions are about solving problems, and quite-frankly they've killed several Apple dragons that have been circling around the default mail app for years.

To best demonstrate several of the key interactions available on the app, the folks at Sparrow have added several animated click-throughs to the iPhone app's website. This simple solution allows the visitor to quickly become a "user" of the iPhone app, and better than that— this click-through probably converts many a customer.

I recorded a quick video and posted it below.

Video hosting exclusively from Wistia.com, a Squareflair partner.