hangouts

Squarespace Design Tips, Tools, and To-Do's from the Experts

in
​Hanging Out and Talking Squarespace: Designing for Squarespace

Beautiful websites created quickly is Squarespace's strong suit. That said, the best websites on the platform are custom Squarespace design jobs created by professionals. 

A half a dozen Squarepace designers recently got together to share with you strategies for designing Squarespace websites professionally and list of over two dozen Squarespace design tools that you can start using today to become a better Squarespace web designer. Today we share their tips, tools, and to-do's.

Design Highlights from the Squarespace Google+ Hangout

Five Squarespace design experts joined me on ​Tuesday, August 28 via a Google+ Hangout to share their Squarespace wisdom. Alex Smith, Free Reyes, Jason Barone, Luke Abell, and Trevor Delaney all design and develop Squarespace websites, and had something helpful to say about working on their favorite web publishing platform.

Squarespace Design Strategies

Between the new features of the Squarespace 6 platform such as LayoutEngine and the tried-and-true reliability of Squarespace v5, it's hard to know which platform to utilize for web design. The experts said it depends on the project because each website is different.

For version five of Squarespace, the group decided the blank slate approach on a developer template is best. For Squarespace 6, the Peak template has emerged as the early designer favorite for all-purpose websites.

The Squarespace Designer Toolbox

Moving on, our humble hangout shifted focus to the design tools used most by Squarespace designers. Each of our panelists rushed to their bookmark bars to be the first to share what ended up being over 25 web design tools and utilities in the areas of color theory, HTML/CSS wrangling/processing, image management, and analytics (we may have gotten just a wee bit sidetracked on the analytics tools, but I left them in anyway).​

Here are all of them and a brief description of what makes them amazing:​

Color Theory and Management Tools​

  • Pochade - This color utility takes a color you provide it and allows you to find variations using a built-in color palette. Export your new colors via your clipboard.
  • Color Cop - What color is that? Find out quickly with Color Cop. Use their eyedropper utility on any screen or application to identify both the hex and RGB color values of just about anything.
  • Kuler - Looking for ideas for new colors  and color palettes? Kuler is both a stand-alone website and a Photoshop extension (Find it here: Window -> Extensions -> Kuler)​ that recommends color palettes or lets you create your own based on a provided color. 
  • Gradient - Create amazing CSS3 gradients with Gradient. Take two colors and then export the code to create amazing CSS3 website buttons.
​Adobe Kuler is a handy color palette ideation tool  and Photoshop extension for Squarespace web design pro's.

​Adobe Kuler is a handy color palette ideation tool  and Photoshop extension for Squarespace web design pro's.

HTML and CSS Utilities​ for Squarespace

  • ​ProCSSor - Take CSS from anywhere and clean it up with ProCSSor. Copy and paste lines of CSS from source pages or use ProCSSor on an entire page of Squarespace v5 to generate clean CSS every time. 
  • TextExpander - Assign keyboard macros to your most common blocks of HTML with TextExpander to make it easier to add common feature through copying and pasting in the LayoutEngine blocks in Squarespace 6 (at least until the "dynamic display" system of v5 is applied to Squarespace 6). 
  • CSS Hat - ​This paid Photoshop extension is one of the easiest ways to export CSS needed to support layers created in Photoshop. Just click on a layer and export the CSS, which is clean and works like a charm in Squarespace, even (mostly) with Internet Explorer up to version 8. 
  • Pictos Server - Pictos is an ingenious font server utility that enables you to upload your icons and reference them on your website as a font instead of as a bunch of images. Pictos saves on load time of your website with this handy image-as-a-font service.
  • CodeKit - CodeKit takes multiples files of code and combine them together into one, ​​minifying them, and thereby decreasing page load speed by lowering the total number of files that need to be downloaded in order to build your web page in a user's browser.
  • xScope - This handy utility is a toolbox in itself for measuring different objects on your screen, showing whether your designs are perfectly aligned, or displaying outlines for different web screen resolutions. It's one of those tools you're likely to use every day once you start using it.​
  • MeasureIt - ​Similar to xScope, the MeasureIt Chrome extension allows you to measure the dimensions of anything in a Chrome window.
  • Git - This is a code branch management tool that helps multiple developers work on the same websites without stepping on each other's toes.​
CSS Hat seems like a must-have for anyone creating Squarespace web assets within Photoshop.​

CSS Hat seems like a must-have for anyone creating Squarespace web assets within Photoshop.​

Images Management​ Tools

  • ​Sprite Cow - Sprites improve load time on your website by replacing many frequently used images on your Squarespace site (e.g., icons) with a single sprite that contains them all. Sprite Cow takes your sprite image and provides you with the CSS necessary to reference each image within your sprite.
  • SpriteMe.org - SpriteMe.org provides you with a bookmarklet that you can use to create a sprite from the images on any web page. Use SpriteMe.org and Sprite Cow together to sprite-ify your Squarespace sites and speed them up.
  • ​TinyPNG.org - Transparent .PNG files are great, but they can often slow down your website. TinyPNG.org calculates and discards unused colors from your .PNGs, allowing you to shrink them considerably (e.g., from 57 kb to 16 kb). 
  • ​iDeveloper - iDeveloper is a smart utility that allows you to create a glossy, app-like icon using your existing favicon and a few lines of code for anyone who bookmarks your website.
​Sprite Cow is a utility that helps Squarespace designers generate flawless CSS using a sprite. Use in conjunction with SpriteMe.org to master sprites.

​Sprite Cow is a utility that helps Squarespace designers generate flawless CSS using a sprite. Use in conjunction with SpriteMe.org to master sprites.

Analytics Tool Preview​

  • ​Google Analytics - Still the king of all the web analytics platforms because a) it's free, b) it's powerful, and c) it's the most used. Other tools provide niche insights, but GA is the main tool I use (even above Squarespace's onboard analytics) at the end of the day.
  • Google Analytics URL Builder​ - Track website traffic from each of your campaigns using Google Analytics' built-in URL tracking capabilities. Know which campaigns are the best using measurement.
  • Google Analytics Content Experiments​ - Always be testing is what they say, and Content Experiments is the easiest way to test different pages on your website. For example, build two versions of your home page and measure which one has a greater impact on new sales.
  • GoSquared​ - GoSquared is a realtime web analytics platform that can be used in conjunction with Squarespace. Developers enjoy GoSquared because they provide an API for developers can be used.
  • Chartbeat​ - Charbeast is another realtime web analytics platform that utilizes your web log files to measure what people are looking at on your site.
  • olark​ - This light-weight click-to-chat tool allows prospective customers to chat with you while they're on your website from $15/month.
  • CloudFlare​ - Cloudflare is a all-around web performance and security company, but they provide services in the area of analytics, web monitoring, and content delivery networks.
  • Quantcast​ - If you're a publisher, then Quantcast's estimate of your website's traffic is important, as it drives the amount of ad revenue you can expect to earn. You can register your website with Quantcast to become "quantified" to provide a more accurate measurement to potential advertisers.
  • Comscore​ - Like Quantcast, Comscore is another website that externally monitors and estimates traffic to websites across the Internet. 
  • Hello Bar​ - Do you have a critical business goal? Use Hello Bar to A/B test out your most important offer you on your website and see what your visitors respond to best.
Hello Bar allows you to A/B test offers quickly on your Squarespace website.​

Hello Bar allows you to A/B test offers quickly on your Squarespace website.​

Designing for Squarespace 6 vs.  Designing for Squarespace 5

The final topic of the Hangout was about preference: is it better to design for Squarespace 6 or Squarespace version 5? While many designers still prefer Squarespace v5 for its incredible level of HTML/CSS control and flexibility, but increasingly designers are shifting to Squarespace 6. Both Jason Barone and Trevor Delaney sangs the praises of the Peak template on Squarespace 6 for its utility and ability to turn a side bar on and off at will.​

The one drawback with Squarespace 6 comes from the current inability to selectively display blocks and sidebars like you can do in v5. "It's all about the sidebar, the blocks, and the permissions," said Delaney. ​

Once these features are added in to Squarespace 6, more and more designers will be able to bring their visions to life. And let's not forget that there's a whole Squarespace designer platform currently underway.

Hangout and Talk Squarespace with Me

Thanks a lot to Alex, Free, Jason, Luke and Trevor for using their wisdom and Squarespace design experience to make our Hanging Out and Talking Squarespace a success.​

I hope you'll decide to join us for the next Hanging Out and Talking Squarespace, scheduled for Tuesday, September 25th at 6:45pm CDT. The topic for the evening will be Web Analytics and Squarespace and we'll be talking about how to track things in Squarespace, how to install third-party analytics platforms and which tools to use, and much more.

Experts and novices alike are what make these Squarespace Hangouts so much fun, so register now and save your spot.

What's your favorite web design tool, tip or website?  Help me make the ultimate list in the comments by adding your suggestions.