Squarespace website designers love seeing what other designers have created on the web publishing platform. That's what inspired the recent launch of the Squarespace Show and Tell, a monthly showcase of new Squarespace websites created by the designers and developers that read this blog. Today we sit down with a contributor, Alan Houser of Creative Component (and my co-host on the unofficial Squarespace podcast, Content, Structure & Style). Alan shares with us the recent experience of designing Pravassa.com.
Pravassa.com — a site by Creative Component
Why Did the Client Pick Squarespace for this Project?
Previous SiteThe client was already aware of Squarespace, and was happily using it for years. I think their previous site was set-up by a designer, because there were a few advanced tweaks to their blog I saw behind the scenes. But they were ready for a re-design.
What was the #1 Goal for This Website and How Did You Achieve this Objective?
The client's goal was primarily to re-organize their content and make it easier for visitors to find what they're looking for. They were using their previous site's blog for everything— new vacation listings, company news, specials and more. On Squarespace, it's quite possible to use one journal for all things, then to filter the appropriate content areas using Categories, there's a trade-off when it comes to keep things from getting cluttered.
The first step was to create a journal for each major "department". We considered internal News as its own department, then each of the following areas were segmented out on their own: Management, Staff, Products, Tips, Reviews, Press, etc. In all, there are ten journals on Pravassa.com. Only a few of them are styled as a blog, and the rest exist to better-manage posts and product lists.
What was Your Toughest Design Challenge for This Website and How Did You Overcome It?
The client specified that I build a graphical slider consisting of images from various posts, with post titles on roll-over and links to each respective post when clicked. To pull this off, we built the component using jQuery, JSON, HTML & CSS. A few points that were immediately obvious were:
1. The client would need to maintain the feature going-forward— managing it with no advanced HTML knowledge was a must.
2. Not every post will show-up. There must be a way to select the image to send it to the slider.
In non-technical terms, the client will make a post, then will upload a small image within the post, then assign a CSS class to the image. That's all they need to do. The small image isn't visible within the journal itself, and by adding this "alt" image, everything will just happen for them.
The next challenge to arise was the request that nine of the ten journals on the site would need to feed the slider. The solution I turned to was Yahoo Pipes— to combine all feeds into one. Crisis averted & calm-enhanced (it is a Yoga site, after all).
What was Your Favorite Part About Designing this Squarespace Website?
With every site I build I have the most fun when solving problems with simple solutions. If the solution lies within Squarespace— and maybe I have to hack some code behind the curtain to pull it off— if the client can maintain the site using standard Squarespace editing tools, then everyone's happy.
On the Vacation Pages, How Did You Add that Secondary Menu? (link)
On the site's Vacation pages, it was important to design a tabbed concept that would be functional. At the very least, "functional" should read 'easy to navigate' by a site visitor. Nice-to-haves would be: 'easy to manage' and 'should index well in search engines'. I was going back & forth between using separate pages -or- implementing a javascript solution to the one page that would show/hide content. I leaned towards building separate pages for each section.
This would make editing page content easier (using WYSIWYG) and creating new pages would be easier, since that functionality is built into Squarespace. From a usability perspective, the client now has stacks of pages that they can submit to prospective clients and on Twitter/Facebook. Additionally, extra linked pages with their own heading/content relationships will perform like a dream on search engines.
So basically, each Vacation's landing page is a journal post and all other sub-pages are stored in a hidden section. Then across the top of each page, lies the navigation bar to jump-between the group's pages.
Is There a Quick Design Tip You Can Share with Readers That You Implemented on This Website?
Sure! I added a little CSS magic to images that appear in a journal. You'll see how they have rounded corners, and a slight drop-shadow. This effect only appears on the page if the image is left or right aligned, using the built-in WYSIWYG editor. If the client doesn't want the effect on an image, they would select "inline" or "block" alignment within the editor.
Here's the CSS used for this (below). The rounded corners won't appear in some versions of IE, but they will in every great browser. (Ya, I said it.)
/***** Image Treatment throughout site - Adding Radius *****/
.full-image-float-left img, .full-image-float-right img { overflow: hidden; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 0 12px 8px -6px #999; -webkit-box-shadow: 0 12px 8px -6px #999; box-shadow: 0 12px 8px -6px #999; }
.full-image-float-left .thumbnail-caption, .full-image-float-right .thumbnail-caption { padding-left: 6px; }
.full-image-float-right { margin: 5px 5px 10px 15px; clear: right; }
.full-image-float-left { margin: 5px 15px 10px 5px; clear: left; }
Submit your recently designed Squarespace websites to the monthly Show and Tell by filling out the form in the Squarespace Resources section of the blog navigation. Special thanks to Alan Houser for sharing his talent and expertise!