Just like the finest custom homes, all of our websites are designed and built 100% from scratch. We don't touch code until you're in love with the design, and when you are, we only build on the Squarespace Developers Platform. You want best in class, and that's what we deliver.
Adding a simple text link to Google Driving Directions (as seen in the video):
1. Type the text (or add a button)...
2. Open the destination location in Google Maps...
3. In Google Maps, click "Directions"...
4. Without adding an origin, just copy the (long) URL...
5. Back in Squarespace, create a link and paste this URL into the link field...
6. Select "open in new window", and save.
Share this post
How to upload files to your Squarespace site, so you can reference them later!
Share this post
In today's world, there is very little that's free. You're already well aware of this marketing trend: to provide site visitors a free download in exchange for their information. (Or as we called in in 2012: Downloading Whitepapers in Exchange for an Email Address) 🥇SEO BONUS POINT 🥇
While not a "feature" in Squarespace, this is definitely possible to do, with just a little creativity. You got this.
1. Create your downloads landing page
Yes, we're going into this thing backwards. It will make the most sense.
The secret sauce here is to provide a place where you can send the visitor for your download(s). If this download is for one file, you could just add the one file to the page. But with enough planning, you could use this technique for other uses.
Example: if you want all your partners to access your "partners-only" area of your site, you could add all your super-secret partner documents to this particular downloads page. Make sure the page is "hidden"; keeping it outside plain view is the key to keeping things secret, Miss Sneaky-Pants.
2. Create your form
What do you want to collect from the visitor? It's all up to you, but keeping in mind that they may just want to grab your document and run, you'll probably want things short and sweet.
TIP: since they're grabbing, running and giggling with your free document, be sure to add lots of branding to the document on that thing! (my example that's used in this post is found here)
Remember what we said about the secret sauce?
The secret sauce is to provide the link to your downloads page at the end of the form.
In the form's advanced settings, just add the link to the newly-created downloads page.
You're already a marketing genius!
The actual form is below. Give it a whirl!
Share this post!
We invented this very technique SIX years ago on Squarespace V5. Allegedly:
Squarespace Marketing Tip: Downloading Whitepapers in Exchange for an Email Address
🥇SEO BONUS POINT 🥇
When kicking the tires on CMS platforms, one of the first things you realize about Squarespace: Squarespace doesn't have backups (that we can benefit from). I won't go into the Nerd Forest to explain why the complexity of the rendered Squarespace viewport makes it really really tricky to backup, but I totally agree— backing up site content is imperative.
Before you NEED it, consider backing up your content now.
It's like being at the drive-through window and being asked: "do you need napkins?" If you say NO, you'll almost certainly need them later. Always 👏 get 👏 extra 👏 napkins.
So no— Squarespace doesn't do it, but I can recommend a third-party tool like Evernote (or Pocket / Instapaper) to grab your content. Each platform is great for collecting things on your trips around the web to read later, and they all have browser plugins to make it super-simple.
Evernote is my favorite; it's my peripheral brain. So I'll show you how easy it is to backup a web page/post to Evernote while browsing.
Three simple steps:
1. Install the Evernote Web Clipper browser plugin
2. Browse to each page of your site, and engage the Web Clipper
3. Save each page as a "SIMPLIFIED ARTICLE"
- This view will strip out the structure of each page, and leave you with the text and image content.
- You cannot convert this back to a Squarespace page, but at least you can grab the text content and store it safely.
- As a site owner, when knowing the old site is going away, you can grab full-page screenshots and simplified page/post content to always have a record of your old stuff.
You can easily use Google Spreadsheet data to drive website content.Read More
Before jumping-into adding background video to a website, you should review considerations and limitations:
The Just Because Clause
Don’t just use this technique because you can: video content must amplify a site’s message, not just be shown because it’s pretty. Unless it's really-really-really pretty.
The video will likely be set to autoplay, but it should be muted by default; ideally, it should not include sound at all. Please, and for the love of all things holy, MUTE. THAT.
The video should display a placeholder image, falling back to a static background image for browsers that do not support HTML5. The placeholder image will also be used a background on mobile devices: most phones and tablets do not support auto-play, for obvious reasons.
If too short, a video can feel repetitive (as most such videos will be set to loop), while too long becomes a narrative unto itself, and therefore deserving to be a separate design element.
A runtime of approximately 12 – 30 seconds will be ideal.
Accessibility & Contrast
Any text or (logo) image placed on top of the video should remain in high contrast throughout the length of the video. Considering that every frame of the video is different, this can be hard to achieve, but it's totally possible to add an "overlay filter" to the browser with CSS code to better add to the contrast. Users should have easy access to a UI control to pause the video*; ideally, the video should play through only once.
* It's an accessibility issue; flashing or strobing content can trigger epilepsy and migraines in susceptible individuals, and some will find it difficult to read content with moving images on the page. Those visitors should not visit the Squareflair 404 page.
Browsers Still Suck at HTML5 Video?
Is it a truth that all other browsers besides the one I use are horrible? OF COURSE! That's one way to look at it, but in reality, we always need to be aware of what users use (what people surf with sounded worser). For this, it's always a good idea to deliver the same video in various formats. The HTML5 <video> element works in the latest versions of all major browsers (IE9+, Firefox 7+, Chrome 14+, Safari 4+, and Opera 11+). But because different browsers prefer different native video formats (of course, why wouldn't they?) — a typical implementation of <video> in HTML5 looks like this:
In horse racing terms:
Frontrunners MP4 and running mate WEBM are on-course to the bank, and washed-out OGV (OGG) is still hanging on.
Another way to remember it:
"WHO DOWN WITH O.G.G.? ... some versions of Firefox, um... homie."
The fallbacks are necessary because not all browsers support MP4 playback. Those that do not will skip to the WEBM format. If the browser doesn’t support MP4 or WEBM, it will default to the OGV format. Between these three formats, you should have compatibility with just about every common browser.
A closer look at the <video> attributes used above:
- poster – a link to an image that will be displayed while the video is loading or prior to the visitor clicking on the play button
- controls – tells whether or not the visitor can see the video playback controls
- muted - this mutes the sound on the video
- source – the link to the video file’s location
- source type – the video format of the referenced file
- fallback text – the text within the <p> tags will display if the browser cannot play any of the three video formats
If the video content is of utmost importance that it must be viewed, well then— don't put it in the background of your page. But seriously, if you want to provide a link for people to play it, then the fallback text could read something like this:
Your browser doesn't support HTML5 video. Here's a <a href="#">link</a> to download the video.
Bandwidth is Still a Major Concern
The video needs to be small, and compressed as effectively as possible. Try to keep the video under 5MB; ideally, under 500K. Additionally, the video needs to scale across different devices and their associated screens.
After calculating all the other content that has to load on the page, ask yourself this important question:
"what would it do to the visitor's experience if I added another 8MB to this page?"
What About YouTube?
Meh. Despite the popular belief that YouTube is all you need, it does have some notable downsides. For example, at the end of your YouTube video a series of other recommended videos is displayed, which is hideous. YouTube also adds a small watermark to every video, which isn’t always acceptable (also hideous). There are plenty of other cases where YouTube is not a viable option, so to be safe, go the extra mile and make things awesome by using custom code that's made for the site.
In this quick demo, I'm showing how you can set-up Gumroad's video streaming to allow the sale of rental content online. You can then embed the product on any website, or share the link socially in seconds.
Easily offer the option for your audience to rent or purchase your film/video content. Rentals are available for 30 days after purchase. Once started, viewers have 72 hours to watch the rental as often as they’d like. / Upload files up to 12GB each in any format and bundle them however you like. Create unlimited offer codes for your viewers.
The "product" I built in the video can be viewed here: https://gum.co/itsademo
Check-out Gumroad.com for full features and tutorials.