hanging out and talking squarespace

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

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.

Squarespace 6 Review: Multiple Viewpoints on Moving to the New Platform [VIDEO]

Squarespace 6 has only been out for a few weeks, and curious Squarespace v5 users and potential new Squarespace converts alike are wondering if the next-generation web publishing platform is worth the hype.

Recently three friends/Squarespace users and I sat down to review Squarespace 6, its 50+ new and planned features, migration strategies, and more via a Google+ Hangout on Air I like to call Hanging Out and Talking Squarespace. Read the details or watch the entire episode to judge for yourself whether Squarespace 6 is right for you.

Squarespace 6

Hanging Out and Talking Squarespace: Squarespace 6 Reviewed

Squarespace 6 First Impressions

Hanging Out and Talking Squarespace is a Google+ Hangout series organized by Big Picture Web and hosted by yours truly. Guests of mine on July 31 included Alan Houser of Squareflairphotographer Nathan Smith, and Peter Slapnicher from Local Pigeon.

In the first part of the discussion, the group reviewed Squarespace 6 and gave their first impressions. As someone who uses Squarespace mostly as a consumer, Nathan and I voiced our strong approval for LayoutEngine and the 50+ other amazing new features. Peter designs Squarespace websites that typically leverage existing templates, and he tended to agree. The increased smoothness and sophistication of Squarespace 6 provide the ability to publish with greater ease than ever before.

Squarespace 6 and Developers

While Nathan, Peter, and I have been pleased with Squarespace 6 so far, Alan has had a slightly different experience as a developer of Squarespace websites. Alan creates completely custom Squarespace websites, and Squarespace is still in the beta testing stages of its developer platform. That said, Alan shared that he had yet to form an opinion on Squarespace 6 because the developer tools are still coming together.

Squarespace 6 developer platform is currently in beta.

Migrating from Squarespace v5 to Squarespace 6

For the most part, migration from Squarespace v5 to Squarespace 6 has been painless for those who have moved, but there is a big caveat in place. It seems like sites with the most amount of customization on v5 have the most difficulty importing to Squarespace 6.

Developers fall into this category as well. Alan shared that he'll be slowly migrating as developer tools become available.

Note: be sure to check out this handy guide if you're planning on moving from v5 to Squarespace 6.

A strategic move from Squarespace v5 to Squarespace 6 is best.

A strategic move from Squarespace v5 to Squarespace 6 is best.

The Future of Squarespace 6

So what does the future of Squarespace 6 involve? Our panel thinks two things: increased customization and rapid feature additions.

For customization, Alan theorized that developers will be able to customize every aspect of the Squarespace websites they build for their customers, including content types (e.g., photo gallery entries) and the types of add-ons you can use (e.g., ecommerce).

Squarespace 6 also promises to launch new features at a pace much faster than anything its customers have seen before. Squarespace founder Anthony Casalena has pointed to the platform's amazing new infrastructure as a major contributing factor to Squarespace 6's two-plus year development cycle and a source of great leverage going into the future.

You’re seeing the full engineering effort
of the org behind the live product. It’s a different world for us.
— Squarespace founder Anthony Casalena

Just how popular is Squarespace 6 so far? The search term has seen a 400%+ increase in popularity in Google in the few weeks since its release. Those numbers no doubt bode well for a company that has already been profitable since its first day in business.

Squarespace 6 has been trending as a very popular search in Google this summer.

Squarespace 6 has been trending as a very popular search in Google this summer.

What's your review of Squarespace 6? Have you had a chance to move to the new web publishing platform? Be sure to share your thoughts about Squarespace 6 with  me in the comments or on Facebook, Twitter or Google+. Also, contact me to be a part of the next Hanging Out and Talking Squarespace.

Squarespace 6: the Web's Next Big Publishing Platform is Here

Squarespace 6 released on 7/17After years of development, Squarespace 6 is finally here. The company announced their revolutionary new web publishing platform last week, which empowers anyone to build a high-quality website or blog with greater ease than ever before.

50 new features paired with cutting-edge web design technology like HTML5 and CSS3 position Squarespace 6 as a serious future contender in the website/blog building space. And if you take a look at their long-term plan, it's not hard to see why some think Squarespace 6 may even be poised to take on Wordpress.

Squarespace 6: An Interesting Hybrid Between Two Worlds

Squarespace CEO and founder Anthony Casalena recently gave TechCrunch a look into his long-term strategy for Squarespace 6. He calls it, "an interesting hybrid between two worlds." Squarespace 6 is a product that is made for both developers and consumers.

Web publishing on Squarespace 6Developers have access to a highly complex and customizable layer of Squarespace 6, while end-users are greeted with an intuitive and simple set of tools to facilitate everyday web building tasks. "We think of it as kind of a first," he said.

And Tuesday's announcement was just the beginning. The $38.5 M in funding Squarespace received back in 2010 not only allowed them to build what they released last week in Squarespace 6, but also set the stage for the evolution of the product into the future.

"[The investment] set the company on a trajectory to go for what we wanted to make, which was stuff like this platform, and a lot of other things we can't talk about right now but will come out on the heels of this platform." - Squarespace founder Anthony Casalena

Squarespace 6 will likely evolve quickly and through the help of the highly talented pool of Squarespace designer/developer enthusiasts. And the company itself hints at frequent feature releases and powerful new features such as ecommerce on the horizon

Squarespace 5 vs. Squarespace 6

Squarespace v5 has served its users well for a half a decade, but it started to feel like an eternity in Internet years to its passionate customer base. Squarespace 6 will no doubt soothe the masses who have been frothy for the new platform since first getting a taste of the beta program last year. 

Squarespace 6 is completely different from version 5. Existing customers will need to build a new website on Squarespace 6 and then shut down their current v5 site. There are pretty decent import tools in Squarespace 6, but the products really are too different to map things over one-to-one. 

At first glance, this might strike some as inconvenient. Not me though. I'm using the transition as an opportunity to clean up my website content and prune some sections that are currently just adding clutter. A streamlined site and the new structure and benefits of Squarespace 6 will make the effort of migration worthwhile. 

Hanging Out and Talking Squarespace 6

Hangout and talk about Squarespace 6Are you a current customer of Squarespace using v5 and looking to transition? Are you looking to builld a new website and Squarespace 6 caught your eye? Hang out with Squarespace experts and novices alike on Tuesday, July 31 at 6:45pm CDT for Big Picture Web's Hanging Out and Talking Squarespace through a Google+ Hangout. (Space is extremely limited so register now if you'd like to be a part of the event.)

Have you tried Squarespace 6? What features do you like so far? If you're still waiting to try the new version of Squarespace, what features are important to you in a new web publishing platform? Share your thoughts with me.

Squarespace SEO Philosophies

Squarespace SEO Hangout on AirLast week four Squarespace enthusiasts — designer/developer Alan Houser, author of Squarespace for Dummies Kris Black, non-profit podcaster Ed Lucas and yours truly — opined about search engine optimization (SEO) strategies for Squarespace in areas such as indexation, social media SEO, and SEO keyword selection using the new Google+ Hangouts on Air. Today, you can catch all the important details or watch the re-broadcast.

If you have the time, you can watch the entire episode on our YouTube channel (don't forget to subscribe). Or, catch the highlights below. Also, contact me if you'd like to be a part of the next Hanging Out and Talking Squarespace on Thursday, July 26th. Our topic will be "quick and dirty design tips."

Highlights from Squarespace and SEO Hangout

The Hangout on Thursday, June 28th was full of perspective due to a dynamic group composition consisting of a non-profit expert and podcaster, a two developer designers, and marketer. The differing viewpoints provided for a rich conversation around several important topics:

  • Indexing on Squarespace - The group discussed the SEO implications of using Squarespace's built-in search engine indexation options, as well as the ever-popular SEO issues that can result from having an active yourusername.squarespace.com subdomain in addition to your custom domain.
  • Social Media and SEO on Squarespace - Next up the quad covered using extra HTML snippets for social media sharing buttons on Squarespace and what Squarespace will likely do around social sharing as a part of the upcoming Squarespace 6. They also talked about using Schema.org microformating to control the image and text snippet that is shared on social networks such as Facebook and Google+ in status updates.
  • Keyword Selection and SEO - Perhaps the most interested portion of the Hangout was the discussion around SEO keyword selection on Squarespace websites. Spoiler alert: a good publication also makes for a solid user experience and supports a major chunk of any solid long-term SEO strategy.

Contact me if you'd like to be a part of the next Hanging Out and Talking Squarespace on Thursday, July 26th. Our topic will be "quick and dirty design tips."