Post on 07-Feb-2017
transcript
Seth Familian Founder + Principal, Familian&1
AWESOMIZING YOUR (SQUARESPACE) SITE
START HERE!
familian1.com/awesomizing
SETH FAMILIAN, FOUNDER + PRINCIPAL, FAMILIAN&1A BIT ABOUT ME 2
BUSINESS STRATEGY
GROWTH HACKING
PRODUCT MANAGEMENT WEB PRESENCE
TEACHING + EDUCATION PROCRAFTINATION
MY 7-YEAR PLATFORM JOURNEY 3
2015-Present2009-2011
+
OR
2012-2014
+
OR
Secure · Intuitive
Elegant · Affordable
Customizable · FAST
MY SQUARESPACE PORTFOLIO (SO FAR) 4
WHAT WE’LL COVER TONIGHT 5
‣Optimizing information architecture
‣Customizing template CSS & JS
‣Embedding 3rd party web tools
AWESOMIZING YOUR (SQUARESPACE) SITE
OPTIMIZING INFORMATION ARCHITECTURE
6
A.K.A. NAV-DRIVEN SITE FLOW
OPTIMIZING INFORMATION ARCHITECTURE 7LEVEL 1: LOAD HOME LEVEL 2: CLICK ITEM
OPTIMIZING INFORMATION ARCHITECTURE
A.K.A. NAV-DRIVEN SITE FLOW
8LEVEL 1: CLICK NAV LEVEL 2: CLICK ITEM
OPTIMIZING INFORMATION ARCHITECTURE
A.K.A. NAV-DRIVEN SITE FLOW
9LEVEL 1: CLICK NAV LEVEL 2: CLICK ITEM
OPTIMIZING INFORMATION ARCHITECTURE
A.K.A. NAV-DRIVEN SITE FLOW
10LEVEL 1: CLICK NAV LEVEL 2: CLICK ITEM
OPTIMIZING INFORMATION ARCHITECTURE
A.K.A. NAV-DRIVEN SITE FLOW
11LEVEL 1: CLICK NAV LEVEL 2: CLICK ITEM
OPTIMIZING INFORMATION ARCHITECTURE
HOW TO DO IT12
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
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 IT1. LIST CONTENT
ON POST-ITS
Follow on FB, etc.Join
Email List
Site Footer
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?
AWESOMIZING YOUR (SQUARESPACE) SITE
CUSTOMIZING TEMPLATE CSS + JS
15
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!
PAGE-SPECIFIC CUSTOM CSS
CUSTOMIZING TEMPLATE CSS + JS 17
PAGE-SPECIFIC CUSTOM CSS+ JS!
CUSTOMIZING TEMPLATE CSS + JS 18
PAGE-SPECIFIC CUSTOM CSS
CUSTOMIZING TEMPLATE CSS + JS 19
PAGE-SPECIFIC CUSTOM CSS + SITE-WIDE JS
CUSTOMIZING TEMPLATE CSS + JS 20
SITE-WIDE CSS + JS
CUSTOMIZING TEMPLATE CSS + JS 21
CUSTOMIZING TEMPLATE CSS + JS 22
COMMON QUESTIONS
‣ Why not use Developer Mode?
‣ What happens when I break my site?
‣ Should I be injecting jQuery?!
AWESOMIZING YOUR (SQUARESPACE) SITE
EMBEDDING 3RD-PARTY WEB TOOLS
23
EMBEDDING 3RD-PARTY WEB TOOLS
SIMPLE EMBED CODE
24
FOR IFRAME-CENTRIC TOOLS
EMBEDDING 3RD-PARTY WEB TOOLS
SLIDESHARE25
SLIDESHARE.NET
FOR PRIVATE OR PUBLIC DECKS
EMBEDDING 3RD-PARTY WEB TOOLS
MAPTIV826
FAMILIAN1.COM/MAPTIV8
FOR LARGE VISUAL LISTS
EMBEDDING 3RD-PARTY WEB TOOLS
MAP BOX
31
EMBEDDED VIA IFRAMES
A SIMPLE EXAMPLE OF
EMBEDDING 3RD-PARTY WEB TOOLS
MAP BOX
32
EMBEDDED VIA JAVASCRIPT
A COMPLEX EXAMPLE OF
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?
DISCUSSION TIMEAWESOMIZING YOUR (SQUARESPACE) WEBSITE 34
QUESTIONS · FEEDBACK · IDEAS · INSIGHTS
SURVEY TIME!AWESOMIZING YOUR (SQUARESPACE) WEBSITE 35
PLEASE VISIT FAMILIAN1.COM/AWESOMIZING