Squarespace Site Shack Training -11-05-2015

I N T R O D U C T I O N T O S Q U A R E S P A C E

1 1 . 0 5 . 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


1 1 . 0 5 . 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

L O O K AT 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 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

In this class

Anthony CasalenaLaunched 2004

SaaS (Software as a Service)Offers a Developer API

Has won lots of impressive awardsSquarespace 7 is the current Squarespace iteration


1 1 . 0 5 . 1 5


www.webbyawards.com/winners/?search=true&keyword=squarespace&pagenumber=1&filter=all&sort=date

C M S


1 1 . 0 5 . 1 5


1. Front end or theme/template

2. Administration area (requires login)

3. Database (holds the content - text, html etc.)

You host: WordPress.org

Drupal.orgJoomla.org

They host: Squarespace.comWordPress.com

Wix.comWeebly.com


1 1 . 0 5 . 1 5



1 1 . 0 5 . 1 5


0 15 30 45 60

0.8

5

6.6

58.6

WordPress Joomla Drupal Squarespace

2015 CMS % Market Share

http://w3techs.com/technologies/overview/content_management/all

Features


1 1 . 0 5 . 1 5


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.

Templates


1 1 . 0 5 . 1 5


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.


1 1 . 0 5 . 1 5


Blog (vs Page)


1 1 . 0 5 . 1 5


answers.squarespace.com/questions/24707/blog-page-vs-page

• A blog (“web log”) allows for a chronological listing of

(categorized and/or tagged) blog posts

• A commenting system that invites readers to participate in

the communication and leave behind comments.

• Blog posts can be presented and archived by author, date,

category, tags and sub-categories.

• RSS (Really Simple Syndication) feeds for posts and/or

comments for feed-readers like Feedly, etc.

Page Types


1 1 . 0 5 . 1 5


support.squarespace.com/hc/en-us/articles/205814778-Adding-pages-to-your-navigation

Within (most) page types, you place a content block, depending on the type of content you want to add.

Block Types


1 1 . 0 5 . 1 5


support.squarespace.com/hc/en-us/articles/206543757-What-are-blocks-

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, BloggerImport products: Etsy, Shopify, Big Cartel

Export: WordPressEvery annual account receives a free custom domain

Very good documentation and support


1 1 . 0 5 . 1 5


Why not?

No built-in emailNo forums

No membership sectionNo backup, exactly


1 1 . 0 5 . 1 5


NOTE: The following content items can't be restored:

Once text on a page or blog post is saved, any deleted text can't be recovered.

Content Blocks

Once the page is saved, deleted Content Blocks can't be recovered.

Gallery images, events, and album tracks

These collection items will ask you to confirm the removal before the item is deleted.Once confirmed, these items can't be recovered.

Pages, blog posts, and products deleted over 30 days ago. After 30 days, these pages and collection items cannot be recovered.


1 1 . 0 5 . 1 5


Backups?

Special Features

Announcements BarMobile Info BarCreate a logo -

www.squarespace.com/logo/SoundCloud collections

Pinterest button for imagesAndroid apps (2)

4 IOS apps (iphone - ipad) - Blog, Metrics, Portfolio, Notes


1 1 . 0 5 . 1 5


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


1 1 . 0 5 . 1 5


Blog Information

1 1 . 0 5 . 1 5



Ecommerce Information

www.squarespace.com/feature-index

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


1 1 . 0 5 . 1 5


support.squarespace.com/hc/en-us/categories/200204575

Training videos:

blog.squarespace.com

workshops.squarespace.com

Built-in Social Media in Squarespace


1 1 . 0 5 . 1 5


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

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)


1 1 . 0 5 . 1 5


Search Engine Optimization (SEO)


1 1 . 0 5 . 1 5


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

Cascading Style Sheets (CSS)


1 1 . 0 5 . 1 5


Website and CSS Training

The term “CSS” refers to 1 or more text files using the extension .css that contain a list of formatting attributes that may be assigned to all parts of a web page’s HTML tags.

For example: a paragraph of text in HTML is surrounded by an opening and closing paragraph tag:

www.lynda.com

http://www.w3schools.com/css/tryit.asp?filename=trycss_default

p { color: #red; font-family: "Times New Roman", Georgia, Serif; font-size: 12px; }

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>

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


1 1 . 0 5 . 1 5
