A workshop at General Assembly, San Francisco

1. Seth Familian
Founder + Principal, Familian&1
AWESOMIZING
YOUR (SQUARESPACE) SITE
START HERE!
familian1.com/awesomizing

2. SETH FAMILIAN, FOUNDER + PRINCIPAL, FAMILIAN&1
A BIT ABOUT ME 2
BUSINESS STRATEGY
GROWTH HACKING
PRODUCT MANAGEMENT WEB PRESENCE
TEACHING + EDUCATION PROCRAFTINATION

3. MY 7-YEAR PLATFORM JOURNEY 3
2015-Present2009-2011
+
OR
2012-2014
+
OR
Secure · Intuitive
Elegant · Affordable
Customizable · FAST

4. MY SQUARESPACE PORTFOLIO (SO FAR) 4

5. WHAT WE’LL COVER TONIGHT 5
‣ Optimizing information architecture
‣ Customizing template CSS & JS
‣ Embedding 3rd party web tools

6. AWESOMIZING YOUR (SQUARESPACE) SITE
OPTIMIZING
INFORMATION
ARCHITECTURE
6

7. A.K.A.
NAV-DRIVEN
SITE FLOW
OPTIMIZING INFORMATION ARCHITECTURE 7
LEVEL 1: LOAD HOME LEVEL 2: CLICK ITEM

8. OPTIMIZING INFORMATION ARCHITECTURE
A.K.A.
NAV-DRIVEN
SITE FLOW
8
LEVEL 1: CLICK NAV LEVEL 2: CLICK ITEM

9. OPTIMIZING INFORMATION ARCHITECTURE
A.K.A.
NAV-DRIVEN
SITE FLOW
9
LEVEL 1: CLICK NAV LEVEL 2: CLICK ITEM

10. OPTIMIZING INFORMATION ARCHITECTURE
A.K.A.
NAV-DRIVEN
SITE FLOW
10
LEVEL 1: CLICK NAV LEVEL 2: CLICK ITEM

11. OPTIMIZING INFORMATION ARCHITECTURE
A.K.A.
NAV-DRIVEN
SITE FLOW
11
LEVEL 1: CLICK NAV LEVEL 2: CLICK ITEM

12. OPTIMIZING INFORMATION ARCHITECTURE
HOW TO DO IT
12
Current
Exhibits
Gallery
Events
Gallery
Directory
Private
Events
Leasing
Space
Bergamot
History
Contact
Us
Join
Email List
Google
Map
Follow on
FB, etc.
1. LIST CONTENT
ON POST-ITS

13. OPTIMIZING INFORMATION ARCHITECTURE 13
2. GROUP POST-ITS
INTO 3-5 ITEMS
+ A FOOTER
Current
Exhibits
On View
Gallery
Events
Events
Gallery
Directory
Explore
Google
Map
Visit
Private
Events
Leasing
Space
Bergamot
History
Contact
Us
Learn
More
HOW TO DO IT
1. LIST CONTENT
ON POST-ITS
Follow on
FB, etc.Join
Email List
Site
Footer

14. OPTIMIZING INFORMATION ARCHITECTURE 14
COMMON QUESTIONS
‣ Can I have more than 5 nav items?
‣ What about dropdown menus?
‣ How do I plan for future site sections?
‣ What about hidden site pages?

15. AWESOMIZING YOUR (SQUARESPACE) SITE
CUSTOMIZING
TEMPLATE CSS + JS
15

16. CUSTOM CSS
IS YOUR FRIEND!
CUSTOMIZING TEMPLATE CSS + JS 16
‣ Customize beyond the “style editor”
‣ Use responsive rules to adjust mobile layouts
‣ Fine-tune any element on your Squarespace site!

17. PAGE-SPECIFIC
CUSTOM CSS
CUSTOMIZING TEMPLATE CSS + JS 17

18. PAGE-SPECIFIC
CUSTOM CSS
+ JS!
CUSTOMIZING TEMPLATE CSS + JS 18

19. PAGE-SPECIFIC
CUSTOM CSS
CUSTOMIZING TEMPLATE CSS + JS 19

20. PAGE-SPECIFIC
CUSTOM CSS
+ SITE-WIDE
JS
CUSTOMIZING TEMPLATE CSS + JS 20

21. SITE-WIDE
CSS + JS
CUSTOMIZING TEMPLATE CSS + JS 21

22. CUSTOMIZING TEMPLATE CSS + JS 22
COMMON QUESTIONS
‣ Why not use Developer Mode?
‣ What happens when I break my site?
‣ Should I be injecting jQuery?!

23. AWESOMIZING YOUR (SQUARESPACE) SITE
EMBEDDING
3RD-PARTY
WEB TOOLS
23

24. EMBEDDING 3RD-PARTY WEB TOOLS
SIMPLE
EMBED CODE
24
FOR IFRAME-CENTRIC TOOLS

25. EMBEDDING 3RD-PARTY WEB TOOLS
SLIDESHARE
25
SLIDESHARE.NET
FOR PRIVATE OR PUBLIC DECKS

26. EMBEDDING 3RD-PARTY WEB TOOLS
MAPTIV8
26
FAMILIAN1.COM/MAPTIV8
FOR LARGE VISUAL LISTS

27. EMBEDDING 3RD-PARTY WEB TOOLS
CHARTED
27
CHARTED.CO
FOR SUPER SIMPLE CHARTS

28. EMBEDDING 3RD-PARTY WEB TOOLS
TYPEFORM
28
TYPEFORM.COM
FOR SUPER ELEGANT SURVEYS

29. EMBEDDING 3RD-PARTY WEB TOOLS
AIRTABLE
29
AIRTABLE.COM
FOR AWESOMSAUCE DATABASES

30. EMBEDDING 3RD-PARTY WEB TOOLS
MAPBOX
30
MAPBOX.COM
FOR GEOGRAPHIC DATA

31. EMBEDDING 3RD-PARTY WEB TOOLS
MAP BOX
31
EMBEDDED VIA IFRAMES
A SIMPLE EXAMPLE OF

32. EMBEDDING 3RD-PARTY WEB TOOLS
MAP BOX
32
EMBEDDED VIA JAVASCRIPT
A COMPLEX EXAMPLE OF

33. EMBEDDING 3RD-PARTY WEB TOOLS 33
COMMON QUESTIONS
‣ Are these tools really that much better than
what’s already in Squarespace?
‣ What are the risks of using 3rd-party tools?
‣ Where can I find a list of the best tools?

34. DISCUSSION TIME
AWESOMIZING YOUR (SQUARESPACE) WEBSITE 34
QUESTIONS · FEEDBACK · IDEAS · INSIGHTS

35. SURVEY TIME!
AWESOMIZING YOUR (SQUARESPACE) WEBSITE 35
PLEASE VISIT FAMILIAN1.COM/AWESOMIZING

36. THANK YOU!
LET’S KEEP IN TOUCH.
36
SETH@FAMILIAN1.COM · @SFAM · @MAPTIV8