Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
The 3-Hour Website
Next
Download to read offline and view in fullscreen.

1

Share

Download to read offline

Awesomizing your Squarespace Website

Download to read offline

A workshop at General Assembly, San Francisco

Related Books

Free with a 30 day trial from Scribd

See all

Awesomizing your Squarespace Website

  1. 1. Seth Familian Founder + Principal, Familian&1 AWESOMIZING YOUR (SQUARESPACE) SITE START HERE! familian1.com/awesomizing
  2. 2. SETH FAMILIAN, FOUNDER + PRINCIPAL, FAMILIAN&1 A BIT ABOUT ME 2 BUSINESS STRATEGY GROWTH HACKING PRODUCT MANAGEMENT WEB PRESENCE TEACHING + EDUCATION PROCRAFTINATION
  3. 3. MY 7-YEAR PLATFORM JOURNEY 3 2015-Present2009-2011 + OR 2012-2014 + OR Secure · Intuitive Elegant · Affordable Customizable · FAST
  4. 4. MY SQUARESPACE PORTFOLIO (SO FAR) 4
  5. 5. WHAT WE’LL COVER TONIGHT 5 ‣ Optimizing information architecture ‣ Customizing template CSS & JS ‣ Embedding 3rd party web tools
  6. 6. AWESOMIZING YOUR (SQUARESPACE) SITE OPTIMIZING INFORMATION ARCHITECTURE 6
  7. 7. A.K.A. 
 NAV-DRIVEN SITE FLOW OPTIMIZING INFORMATION ARCHITECTURE 7 LEVEL 1: LOAD HOME LEVEL 2: CLICK ITEM
  8. 8. OPTIMIZING INFORMATION ARCHITECTURE A.K.A. 
 NAV-DRIVEN SITE FLOW 8 LEVEL 1: CLICK NAV LEVEL 2: CLICK ITEM
  9. 9. OPTIMIZING INFORMATION ARCHITECTURE A.K.A. 
 NAV-DRIVEN SITE FLOW 9 LEVEL 1: CLICK NAV LEVEL 2: CLICK ITEM
  10. 10. OPTIMIZING INFORMATION ARCHITECTURE A.K.A. 
 NAV-DRIVEN SITE FLOW 10 LEVEL 1: CLICK NAV LEVEL 2: CLICK ITEM
  11. 11. OPTIMIZING INFORMATION ARCHITECTURE A.K.A. 
 NAV-DRIVEN SITE FLOW 11 LEVEL 1: CLICK NAV LEVEL 2: CLICK ITEM
  12. 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. 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. 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. 15. AWESOMIZING YOUR (SQUARESPACE) SITE CUSTOMIZING TEMPLATE CSS + JS 15
  16. 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. 17. PAGE-SPECIFIC CUSTOM CSS CUSTOMIZING TEMPLATE CSS + JS 17
  18. 18. PAGE-SPECIFIC CUSTOM CSS
 + JS! CUSTOMIZING TEMPLATE CSS + JS 18
  19. 19. PAGE-SPECIFIC CUSTOM CSS CUSTOMIZING TEMPLATE CSS + JS 19
  20. 20. PAGE-SPECIFIC CUSTOM CSS 
 + SITE-WIDE 
 JS CUSTOMIZING TEMPLATE CSS + JS 20
  21. 21. SITE-WIDE 
 CSS + JS CUSTOMIZING TEMPLATE CSS + JS 21
  22. 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. 23. AWESOMIZING YOUR (SQUARESPACE) SITE EMBEDDING 3RD-PARTY WEB TOOLS 23
  24. 24. EMBEDDING 3RD-PARTY WEB TOOLS SIMPLE 
 EMBED CODE 24 FOR IFRAME-CENTRIC TOOLS
  25. 25. EMBEDDING 3RD-PARTY WEB TOOLS SLIDESHARE 25 SLIDESHARE.NET FOR PRIVATE OR PUBLIC DECKS
  26. 26. EMBEDDING 3RD-PARTY WEB TOOLS MAPTIV8 26 FAMILIAN1.COM/MAPTIV8 FOR LARGE VISUAL LISTS
  27. 27. EMBEDDING 3RD-PARTY WEB TOOLS CHARTED 27 CHARTED.CO FOR SUPER SIMPLE CHARTS
  28. 28. EMBEDDING 3RD-PARTY WEB TOOLS TYPEFORM 28 TYPEFORM.COM FOR SUPER ELEGANT SURVEYS
  29. 29. EMBEDDING 3RD-PARTY WEB TOOLS AIRTABLE 29 AIRTABLE.COM FOR AWESOMSAUCE DATABASES
  30. 30. EMBEDDING 3RD-PARTY WEB TOOLS MAPBOX 30 MAPBOX.COM FOR GEOGRAPHIC DATA
  31. 31. EMBEDDING 3RD-PARTY WEB TOOLS MAP BOX 31 EMBEDDED VIA IFRAMES A SIMPLE EXAMPLE OF
  32. 32. EMBEDDING 3RD-PARTY WEB TOOLS MAP BOX 32 EMBEDDED VIA JAVASCRIPT A COMPLEX EXAMPLE OF
  33. 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. 34. DISCUSSION TIME AWESOMIZING YOUR (SQUARESPACE) WEBSITE 34 QUESTIONS · FEEDBACK · IDEAS · INSIGHTS
  35. 35. SURVEY TIME! AWESOMIZING YOUR (SQUARESPACE) WEBSITE 35 PLEASE VISIT FAMILIAN1.COM/AWESOMIZING
  36. 36. THANK YOU! LET’S KEEP IN TOUCH. 36 SETH@FAMILIAN1.COM · @SFAM · @MAPTIV8
  • niktallon

    Nov. 2, 2016

A workshop at General Assembly, San Francisco

Views

Total views

1,844

On Slideshare

0

From embeds

0

Number of embeds

163

Actions

Downloads

87

Shares

0

Comments

0

Likes

1

×