Genislab builds better products and faster go-to-market with Lean project man...
Squarespace Intro Class - 10082015
1. I N T R O D U C T I O N T O S Q U A R E S PA C E
1 0.0 8 . 1 5
S I T E S H A C K W E B D E S I G N
W W W. S I T E-S H A C K .C O M
2. I N T R O D U C T I O N TO S Q U A R E S PA C E
1 0.0 8 . 1 5
S I T E S H A C K W E B D E S I G N
U N D E R S TA N D B A S I C S Q U A R E S PA C E C O N C E P T S
B U I L D A S M A L L B U S I N E S S W E B S I T E W I T H B A S I C
C O M M E R C E & B L O G F U N C T I O N
L O O K AT S O M E S Q U A R E S PA C E S P E C I A L F E AT U R E S
Q U E S T I O N S & A N S W E R S
In this class
3. Anthony Casalena
Launched 2004
SaaS (Software as a Service)
Offers a Developer API
Has won lots of impressive awards
Squarespace 7 is the current Squarespace iteration
I N T R O D U C T I O N TO S Q U A R E S PA C E
1 0.0 8 . 1 5
S I T E S H A C K W E B D E S I G N
www.webbyawards.com/winners/?search=true&keyword=squarespace&pagenumber=1&filter=all&sort=date
4. C M S
I N T R O D U C T I O N TO S Q U A R E S PA C E
1 0.0 8 . 1 5
S I T E S H A C K W E B D E S I G N
1. Front end or theme/template
2. Administration area (requires login)
3. Database (holds the content - text, html etc.)
6. Features
I N T R O D U C T I O N TO S Q U A R E S PA C E
1 0.0 8 . 1 5
S I T E S H A C K W E B D E S I G N
www.squarespace.com/feature-index
You can build a basic, out-of-the-box
Squarespace website
or
You can build a richly-featured, customized
Squarespace website,
utilizing custom formatting with CSS,
code injection and manual HTML.
7. Templates
I N T R O D U C T I O N TO S Q U A R E S PA C E
1 0.0 8 . 1 5
S I T E S H A C K W E B D E S I G N
www.usingmyhead.com/squarespace-7-template-comparison-chart
www.squarespace.com/templates
A “template” is a collection of files that combines HTML, CSS
formatting, javascript etc., PHP plus any proprietary code that provide
(basically) your website’s visual interface and function.
With Squarespace, you can switch your template at any time. Starting
with a template that's right for you will make designing your site easier,
but if you decide a template doesn't meet your needs, you can preview
a new template or switch completely without starting over.
Squarespace currently offers 28 different templates.
8. I N T R O D U C T I O N TO S Q U A R E S PA C E
1 0.0 8 . 1 5
S I T E S H A C K W E B D E S I G N
9. Blog (vs Page)
I N T R O D U C T I O N TO S Q U A R E S PA C E
1 0.0 8 . 1 5
S I T E S H A C K W E B D E S I G N
answers.squarespace.com/questions/24707/blog-page-vs-page
• A chronological listing of blog posts.
• A commenting system that invites readers to participate in
the communication and leave behind comments.
• Blog posts are archived by date, category, author, tags and
sub-categories.
• RSS (Really Simple Syndication) feeds for posts and/or
comments for feed-readers like Feedly, etc.
10. Page Types
I N T R O D U C T I O N TO S Q U A R E S PA C E
1 0.0 8 . 1 5
S I T E S H A C K W E B D E S I G N
support.squarespace.com/hc/en-us/articles/205814778-Adding-pages-to-your-navigation
11. Within (most) page types, you place a content block, depending on the type of content you want to add.
Block Types
I N T R O D U C T I O N TO S Q U A R E S PA C E
1 0.0 8 . 1 5
S I T E S H A C K W E B D E S I G N
support.squarespace.com/hc/en-us/articles/206543757-What-are-blocks-
12. Why?
Every template is “responsive”
Professional, visually strong templates
Built-in analytics
Google and TypeKit fonts
Built-in image editing tool (Aviary)
Social Media integration (share + link)
Code injection + custom CSS
Almost complete support for retina display
Import content: WordPress, Tumblr, Squarespace 5, Blogger
Import products: Etsy, Shopify, Big Cartel
Export: WordPress
Every annual account receives a free custom domain
Very good documentation and support
I N T R O D U C T I O N TO S Q U A R E S PA C E
1 0.0 8 . 1 5
S I T E S H A C K W E B D E S I G N
13. Why not?
No built-in email
No forums
No membership section
No backup, exactly
I N T R O D U C T I O N TO S Q U A R E S PA C E
1 0.0 8 . 1 5
S I T E S H A C K W E B D E S I G N
14. Special Features
Announcements Bar
Mobile Info Bar
Create a logo -
www.squarespace.com/logo/
SoundCloud collections
Pinterest button for images
Android apps (beta)
4 IOS apps (iphone - ipad)
I N T R O D U C T I O N TO S Q U A R E S PA C E
1 0.0 8 . 1 5
S I T E S H A C K W E B D E S I G N
15. TA B L E 1
Personal / $8
Monthly
1 Product + Donations
Professional / $16
Monthly
20 Products + Donations
Business / $24
Monthly
Unlimited
Prices
http://www.squarespace.com/pricing/
I N T R O D U C T I O N TO S Q U A R E S PA C E
1 0.0 8 . 1 5
S I T E S H A C K W E B D E S I G N
16. Developer “Application Programming Interface” (API)
• Complete Control. Edit all the code that affects the display of your website, every line of
HTML, CSS, and JavaScript is under your control.
• Git/SFTP. Every template is a Git repository. Version control comes standard. Connect to
template files via Git or SFTP.
• Developer Tools. LESS Preprocessing, JSON Templating, Script Comboing, Retina-
ready Responsive Image Handling, and more.
• Free. Developer accounts never expire while in development. Take as much time as you
need before launching your site, and pay nothing until you do. Then pay as little as
$16/mo. when you go live.
developers.squarespace.com
I N T R O D U C T I O N TO S Q U A R E S PA C E
1 0.0 8 . 1 5
S I T E S H A C K W E B D E S I G N
17. Blog Information
1 0.0 8 . 1 5
S I T E S H A C K W E B D E S I G N
I N T R O D U C T I O N TO S Q U A R E S PA C E
Ecommerce Information
www.squarespace.com/feature-index
18. Resources
support.squarespace.com/hc/en-us
answers.squarespace.com
Squarespace Answers is a peer-to-peer forum dedicated to answering
questions about the Squarespace Platform.
www.squarefront.com (potentially huge resource)
www.squareflair.com (consultants)
www.squeakworks.com (consultants)
www.sqsp.guru/products
www.lynda.com
I N T R O D U C T I O N TO S Q U A R E S PA C E
1 0.0 8 . 1 5
S I T E S H A C K W E B D E S I G N
support.squarespace.com/hc/en-us/categories/200204575
Training videos:
blog.squarespace.com
workshops.squarespace.com
19. Search Engine Optimization (SEO)
I N T R O D U C T I O N TO S Q U A R E S PA C E
1 0.0 8 . 1 5
S I T E S H A C K W E B D E S I G N
support.squarespace.com/hc/en-us/articles/205814568-Increasing-your-site-s-visibility-to-search-engines
Google Search Console:
moz.com
organic vs paid
Back links
Key elements (page titles, page headers, other key elements)
Valuable, fresh content (think: blog)
www.google.com/webmasters/tools/
moz.com/blog/seo-cheat-sheet
moz.com/beginners-guide-to-seo
Stuff Google pays attention to
20. Built-in Social Media in Squarespace
I N T R O D U C T I O N TO S Q U A R E S PA C E
1 0.0 8 . 1 5
S I T E S H A C K W E B D E S I G N
Follow
Login > Left Menu > Settings > Connected Accounts
Login > Left Menu > Settings > Connected Accounts
When you configure Share buttons, visitors can share your blog content,
products, and albums to their social profiles in one click. The share buttons
display differently depending on your template.
Share / Recommend
21. Getting started
Ask yourself what type of site you want – e.g. business, portfolio, ecommerce
Go to squarespace.com
Look at the templates and go from there:
ohttp://squarespace.com/templates
oLook at the Live Preview
oYou’re not tied to an ecommerce template for your ecommerce website
http://www.squarespace.com/feature-index
http://help.squarespace.com/guides
I N T R O D U C T I O N TO S Q U A R E S PA C E
1 0.0 8 . 1 5
S I T E S H A C K W E B D E S I G N
22. Image editors
Aviary (Squarespace built-in image editor)
Photoshop CC (Creative Cloud) / Expensive
Photoshop Elements / $100
Gimp / Free
Pixelmator (mac only) IOS and MAC versions / $30
http://avocode.com (subscription)
I N T R O D U C T I O N TO S Q U A R E S PA C E
1 0.0 8 . 1 5
S I T E S H A C K W E B D E S I G N
23. There are a few ways to access the login for your account:
1. You can go directly to your login page with this link:
http://youraccount.squarespace.com/config
2. You can press the ESC key on the top left of your keyboard while anywhere on
your site and a login prompt will present itself.
3. You can login at the Squarespace home page:
http://www.squarespace.com
www.squarespace.com
Login
I N T R O D U C T I O N TO S Q U A R E S PA C E
1 0.0 8 . 1 5
S I T E S H A C K W E B D E S I G N