Website Design

The Return of the Monthly Website Showcase

in

Launching a new or re-designed website is an important milestone for any company or individual. I believe it's an event worthy of fanfare and the attention of the Squarespace community each time a new domain sits atop our next generation web publishing platform. 

With that, I'm happy to announce the Squarespace Websites Showcase, our way of celebrating new additions to the Squarespace platform each month.​ 

Designers and website owners alike are invited to submit your fresh Squarespace website designs. Our monthly showcase will highlight each new site submitted (read: bookmark that URL for an easy way to send a bunch of eyeballs to your newest web creations). Plus, we'll add your creation to our ever-expanding list of the most Squarespace websites featured under one URL.

Explore 35 websites already in our collections, then be sure to add your own creations each month so we can showcase your latest work.​

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.

Now With More Benefits for Squarespace Web Designers

in

Are you a Squarespace web designer? Are you taking advantage of all the great Big Picture Web benefits available to our designer friends, such as networking, new website customers and more? Find out if you're missing out on all the perks.

The Squarespace Designer Directory: Now on Squarespace 6

Each month over 500 people visit our Squarespace Designers Directory in search of someone to build their new Squarespace website. I built this free resource to meet the demand from readers looking for someone to help them with their current Squarespace project. And since I'm a marketer, not a designer, I figured if I couldn't do something, why not feature those that could.

Today we proudly feature over 20 awesome Squarespace web designers! Together we've created a useful place for designers and customers to connect and build amazing new things on the web. And now this great resource is on Squarespace 6!

Check out the new Squarespace Designer Directory on Squarespace 6, and be sure to apply if you're not already listed.

Hang Out with Other Squarespace Web Designers

How often do you get to hang out with a group of other Squarespace web designers? Most times we're the odd one out trying to convince the people we're with of Squarespace's merits. Am I right? Let's put an end to that.

Join me on Tuesday, August 28 at 6:45pm CDT (7:45 ET/4:45 PT) as Big Picture Web hosts Squarespace web designers for Hanging Out and Talking Squarespace: Designing for Squarespace via a Google+ Hangout on Air.​ Space is limited, so you'll want to check your schedule and register right away.

Topics for the discussion will include:

  • ​Squarespace Design Strategies - When to modify existing templates and when to design and build a custom Squarespace website.
  • The Web Designer's Toolbox - A round-robin of designer resources including websites, tools, checklists, and more.
  • Designing for Squarespace 6 and v5 - Discuss the pro's and con's of designing for both versions of Squarespace.​

Recent Hanging Out and Talking Squarespace​:

Contribute Designer How-To's. Earn New Business.

Readers of this blog constantly ask for articles featuring Squarespace web design-related tips and tricks.​ I do what I can, but I know when I'm better off deferring to the experts to provide this type of information.

If you're a Squarespace designers/developer and want to share your tips with us, please let me know. I'd be happy to feature your business and knowledge if you're willing to share a tactic that educates the readers of Big Picture Web. 

Bottom line: I'm always looking to connect with excellent Squarespace web designers because marketing is one thing, but design is another thing entirely. I need your help to serve my audience. Participate in Big Picture Web's efforts to educate the Squarespace community and earn new business, recognition, and friends in the process.

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

in ,

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 Squareflair, photographer 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.