Squarespace is a beautifully designed Content Management System that allows users to build a good looking website quickly and easily. No hosting setup, plenty of great tools for image editing, incorporating social media, video and handling SEO . . . and more.

1. INTRODUCTION TO SQUARESPACE
!
!
!
!
SITE SHACK WEB DESIGN
NASHVILLE, TN 37206
10.02.14

2. In this class
• Understand Squarespace context and concepts
• Build a small business website with basic
commerce & blog function
• Look at some Squarespace special features
10.02. 14
SITE SHACK WEB DESIGN
INTRODUCTION TO SQUARESPACE

3. C M S
10.02. 14
SITE SHACK WEB DESIGN
INTRODUCTION TO SQUARESPACE

4. You host:
WordPress.org
Drupal.org
Joomla.org
!
They host:
Squarespace.com
WordPress.com
Wix.com
Weebly.com
10.02. 14
SITE SHACK WEB DESIGN
INTRODUCTION TO SQUARESPACE

5. 10.02. 14
SITE SHACK WEB DESIGN
INTRODUCTION TO SQUARESPACE

6. Anthony Casalena
Launched 2004
SaaS (Software as a Service)
Developer API
Squarespace 6 (7/2012)
Won 4 Webby Awards for 2013
10.02. 14
SITE SHACK WEB DESIGN
INTRODUCTION TO SQUARESPACE

7. Page Types
Six different page types:
Page
Gallery
Blog
Events
Products
Album
10.02. 14
SITE SHACK WEB DESIGN
INTRODUCTION TO SQUARESPACE

8. Content Blocks
Blocks are used in all page types.
Each Block is designed to allow you to add a
specific type of content within six basic groups:
Basic, Commerce, More, Layout, Content, and Social.
10.02. 14
SITE SHACK WEB DESIGN
INTRODUCTION TO SQUARESPACE

9. 10.02. 14
SITE SHACK WEB DESIGN
INTRODUCTION TO SQUARESPACE

10. 10.02. 14
SITE SHACK WEB DESIGN
INTRODUCTION TO SQUARESPACE

11. Why?
Every template is “responsive”
Professional, visually strong templates
Built-in analytics
Google and TypeKit fonts (67)
Built-in image editing tool (Aviary)
Social Media integration (share + link)
Code injection + custom CSS
Almost complete support for retina display
Import: WordPresss, Tumblr, Squarespace 5, Blogger, Etsy, Shopify, Big Cartel
Export: WordPress
Every annual account receives a free custom domain
Very good documentation and support
Sign up and build your site in 3 hours
10.02. 14
SITE SHACK WEB DESIGN
INTRODUCTION TO SQUARESPACE

12. Why not?
No email
No forums
No membership section
No backup, exactly
10.02. 14
SITE SHACK WEB DESIGN
INTRODUCTION TO SQUARESPACE

13. New & Special Features
Announcements Bar
Mobile Info Bar
Create a logo
SoundCloud collections
Pinterest button for images
Android apps (beta)
4 IOS apps (iphone - ipad)
10.02. 14
SITE SHACK WEB DESIGN
INTRODUCTION TO SQUARESPACE

14. TABLE 1
Personal / $8
Monthly
1 Product + Donations
Professional / $16
Monthly
20 Products + Donations
Business / $24
Monthly
Unlimited
Prices
http://www.squarespace.com/pricing/
10.02. 14
SITE SHACK WEB DESIGN
INTRODUCTION TO SQUARESPACE

15. 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
10.02. 14
SITE SHACK WEB DESIGN
INTRODUCTION TO SQUARESPACE

16. Blog Information
• Page type: Blog
• Import: WordPresss, Tumblr, Squarespace 5, Blogger, Etsy, Shopify, Big Cartel
• Export: WordPress
• Blog app managed/edit from iPhone, iPad
• Post from email
• Tags and categories
• Visitor subscriptions
• Podcasting support
• Add a product block to a blog post
• Multiple authors with selected permission levels/roles
• Lots more!
http://help.squarespace.com/search-results/?q=blog
http://help.squarespace.com/guides/blogging-with-squarespace-workshop
10.02. 14
SITE SHACK WEB DESIGN
INTRODUCTION TO SQUARESPACE

17. Ecommerce Information
• Page type: Products
• Need a Stripe account (stripe.com)
• Fully integrated commerce with Stripe (not PayPal)
• Stripe charges 2.9% + 30 cents per successful transaction (US)
• No integration with PayPal - (add PP code via a code block)
• Products added via blocks
• Coupons
• Digital and physical goods (audio block for songs etc)
• Donations
• Inventory management
• Fully integrated with Xero (accounting)
• Example: www.beatricekim.com
• Lots more!
!
!
help.squarespace.com/guides/?category=Commerce
help.squarespace.com/guides/squarespace-commerce-workshop
10.02. 14
SITE SHACK WEB DESIGN
INTRODUCTION TO SQUARESPACE

18. Resources
answers.squarespace.com - Squarespace Answers is a peer-to-peer forum dedicated to answering questions about the Squarespace
Platform.
www.squareverse.com (from author of Squarespace 6 for Dummies – very useful info)
www.squarefront.com (huge resource)
www.squarespaceplugins.com/
www.squareflair.com/
www.squaretuts.com/
www.squeakworks.com Design company that works with Squarespace
www.sqsp.guru/
www.sqsp.guru/templates (good template info)
www.squarespaceplugins.com/
specialists.squarespace.com/
www.lynda.com
10.02. 14
SITE SHACK WEB DESIGN
INTRODUCTION TO SQUARESPACE

19. Resources
http://help.squarespace.com/guides/welcome-to-squarespace
!
http://www.websitebuilderexpert.com/squarespace-vs-wordpress/
!
http://www.websitebuilderexpert.com/squarespace-review/
!
http://www.powr.io/tutorials/how-to-add-social-media-icons-plugin-to-your-squarespace-site
!
http://www.powr.io/tutorials/list
!
http://www.grovo.com/browse/app/squarespace/lessons
!
http://www.websitebuilderexpert.com/squarespace-review
!
http://css-tricks.com/squarespace-6/
!
Books
!
Squarespace 6 for Dummies (book/Kindle)
!
http://gennick.com/products/learn-css-for-squarespace
!
10.02. 14
SITE SHACK WEB DESIGN
INTRODUCTION TO SQUARESPACE

20. Image editors
Photoshop CC (Creative Cloud) / Expensive
!
Photoshop Elements / $100
!
Gimp / Free
!
Pixelmator (mac) / $30
!
http://avocode.com (beta mode)
!
!
lifehacker.com/five-best-photoshop-alternatives-1483312519
10.02. 14
SITE SHACK WEB DESIGN
INTRODUCTION TO SQUARESPACE

21. • Welcome (Aviator template info page)
• The Work (page type = gallery / 3 products)
• Services (page type = folder / for use with sub-menu)
o Cabinets
o Furniture
• About Wood Works (page type = page w/various blocks)
• Our Blog (all posts)
• Tools Information (page type = page w. block type = summary and blog “tools”category)
• Our Shoppe (page type = products)
• Wood Working Events (page type = events)
• Contact Wood Works (page type = products)
!!!!
Website for a Woodworking Studio
Wood Works
10.02. 14
SITE SHACK WEB DESIGN
INTRODUCTION TO SQUARESPACE

22. 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:
o http://squarespace.com/templates
o Look at the Live Preview
o You’re not tied to an ecommerce template for your ecommerce website
!
http://www.squarespace.com/feature-index
http://help.squarespace.com/guides
10.02. 14
SITE SHACK WEB DESIGN
INTRODUCTION TO SQUARESPACE

23. Login
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
10.02. 14
SITE SHACK WEB DESIGN
INTRODUCTION TO SQUARESPACE