Download as PDF, PPTX
Uploaded bySeth Familian
Awesomizing your Squarespace Website
The document discusses optimizing a Squarespace website by focusing on three areas: 1) Optimizing information architecture and navigation-driven site flow through organizing content and grouping it into 3-5 main sections and a footer. 2) Customizing template CSS and JavaScript beyond the style editor to fine-tune the design and add page-specific or site-wide customizations. 3) Embedding third-party tools like Typeform, Airtable and Mapbox using simple embed codes or JavaScript to enhance the site's functionality. The presentation takes questions at the end.
More Related Content
Similar to Awesomizing your Squarespace Website
Awesomizing your Squarespace Website
- 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 PLATFORMJOURNEY 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 COVERTONIGHT 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 OPTIMIZINGINFORMATION 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 HOWTO 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 ARCHITECTURE13 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 ARCHITECTURE14 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 ISYOUR 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.
- 18. PAGE-SPECIFIC CUSTOM CSS + JS! CUSTOMIZINGTEMPLATE CSS + JS 18
- 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 WEBTOOLS SIMPLE EMBED CODE 24 FOR IFRAME-CENTRIC TOOLS
- 25. EMBEDDING 3RD-PARTY WEBTOOLS SLIDESHARE 25 SLIDESHARE.NET FOR PRIVATE OR PUBLIC DECKS
- 26. EMBEDDING 3RD-PARTY WEBTOOLS MAPTIV8 26 FAMILIAN1.COM/MAPTIV8 FOR LARGE VISUAL LISTS
- 27. EMBEDDING 3RD-PARTY WEBTOOLS CHARTED 27 CHARTED.CO FOR SUPER SIMPLE CHARTS
- 28. EMBEDDING 3RD-PARTY WEBTOOLS TYPEFORM 28 TYPEFORM.COM FOR SUPER ELEGANT SURVEYS
- 29. EMBEDDING 3RD-PARTY WEBTOOLS AIRTABLE 29 AIRTABLE.COM FOR AWESOMSAUCE DATABASES
- 30. EMBEDDING 3RD-PARTY WEBTOOLS MAPBOX 30 MAPBOX.COM FOR GEOGRAPHIC DATA
- 31. EMBEDDING 3RD-PARTY WEBTOOLS MAP BOX 31 EMBEDDED VIA IFRAMES A SIMPLE EXAMPLE OF
- 32. EMBEDDING 3RD-PARTY WEBTOOLS MAP BOX 32 EMBEDDED VIA JAVASCRIPT A COMPLEX EXAMPLE OF
- 33. EMBEDDING 3RD-PARTY WEBTOOLS 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 KEEPIN TOUCH. 36 SETH@FAMILIAN1.COM · @SFAM · @MAPTIV8