The Karelia Blog
Last week, Blueball Design completed their long-awaited "Trifecta" for Sandvox. This is quite a special design (or rather, designs, if you include the color variations). We caught up with Charlie Lockhart of Blueball to find out what makes this design special. Note: There are some technical answers to some of these questions that only will make sense to other CSS designers; don't worry if some of his answers don't make sense!
What's special about Trifecta?
Blueball: Trifecta is the first Sandvox design with a 3-column layout to be released. It also has an optional second custom image position in the top of the right hand column that average to advanced Sandvox users using the pro version of Sandvox can switch out using a couple of methods.
What made you decide to develop a 3-column Sandvox design like Trifecta?
Blueball: I was very curious to see why no one had ever developed a 3-column Sandvox design before, and wanted to see if it could be done. Doing a 3-column design with the current Sandvox design structure, turned out to be a real challenge and took almost 5 weeks to complete including a lot of testing and re-testing. I ended up redoing the design's css coding 3 times before I hit on a layout solution that worked in Firefox 3, Safari, AND IE6 and IE7.
What are some tricks that you did in order to achieve this design?
Blueball: Well I used the page-top section for the left hand column and included the logo, title, title paragraph (slogan) and vertical nav menu in it while dropping the banner image normally found in the page-top area due to the narrow fixed width used for it. I floated the sidebar-container div (right side column) to the right and placed all the sidebar content divs there. One of the trickiest layout positioning things I had to work around was how to position the page-content div and the main div within it so that the main div's content displayed within the outer left and right columns. I did this by relatively positioning the page-content div with a 200px top margin and a 180px left margin (to allow for the left outer column and the banner image to show). The I used a relative position for the main div within the page-content div and gave it a right margin of 230px to allow for the display of the outer right column and a -200px top margin to allow me the space to add the banner image into the top background area of the main div. The final trick was to figure out how to make sure all the content in all 3 columns would appear, even if one column's content was shorter than the rest. This was accomplished by first floating the page-bottom div and then clearing it making it always display below the 3 columns. I then placed the page's main background image into the page div which contains the above noted page layout divs and tiled the background image the full height of the page div. Finally a background image was added to the page-bottom div area to appear over the page div's background image to finish off the bottom of the Trifecta page layout.
Anything specific to the Sandvox 1.5 changes that allowed you to do this?
Blueball: Yes there was one big new 1.5 feature I used to make Trifecta work that was not possible in earlier pre 1.5 versions - the Custom Media Sizes function. First, I had to adjust all the default image resizing so images would fit in the non-standard width main content and sidebar (right column) areas. I did this by using Sandvox 1.5's new feature where you can add into the info.plist file a KTScaledImageTypes dictionary group that lets you specify various image's final rescaled sizes which allows you to override Sandvox's default rescaling sizes. This was a must for the Trifecta layout to work in Sandvox 1.5 and all the major browsers.
Second, because of this feature along with the new banner image sizing and banner div selector functions in 1.5, I could also place the banner image outside of the page-top area that in previous versions by default it had to stay within. I ended up placing the banner image into the main div as a background image positioned at the top of the div. I was thrilled to find that the built-in banner swap function worked correctly even though the image was outside the default specified page-top area. To make this happen I had to specify the css div element it was to be displayed within in the info.plist file's bannerCSSSelector string and specify the new sizing of the banner image.
How has the design been received since you announced it over the holiday weekend?
Blueball: So far the initial results have been very positive, and a lot of Sandvox users seem to be excited with the 3 column layout aspect of Trifecta. The email feedback from Sandvox users has also been encouraging, to the point we have decided we will be releasing more 3 column Sandvox designs in 2009.
What kinds of Sandvox users are attracted to your designs?
Blueball: The majority of our Sandvox designs have been used for business or corporate sites, although a surprising number have also been used for educational sites, or by professors and teachers posting curriculum or class information on their own sites, and for church sites. We have also had some Sandvox users develop youth and school team sports sites as well as personal sites.
But by far our Sandvox designs have been used the most for small business and corporate web sites.
Earlier today, we learned that Jumsoft — makers of a number of Mac applications and add-ons for Apple's applications — has joined the ranks of third-party design providers by releasing five beautiful designs for Sandvox.
The designs (or as Jumsoft calls them, “Themes”) are as follows (taking the description from Jumsoft's press release). [Hyperlinks open up a demo website for each design in a new window.]
Business: The background blends from a light color to white, enabling your visitors to keep their attention on the important information. The atmosphere of the Business theme is in between solid and fun, so neutrality is guaranteed.
Color Beauty: Three main colors prevail in Color Beauty theme - white, black, and a bright one that you will choose. Surprisingly, the loudness of the bright colors is not too intense. There are also sheets for the particular layouts so customer's Web site content will be noticed quickly.
Paradise: The Paradise theme has a solid atmosphere with a little bit of fun. The neutral background, which blends from black to grey, allows you to play with other colors without the fear of a too-loud color scheme.
Rainbow: Rainbow theme is vivacious and colorful, providing a bright contrast to white space. The theme is especially good for those who have a convivial outlook on life, but it is also great for anyone wanting to make documents more engaging.
Sensitive Steel (pictured here): This theme stands out against two different things art and steel. The unconventional and successful image of fancy steel lends a feeling of warmth, though the prevailing color in this theme is grey. Sensitive Steel does not work well for strong and serious business images, but it perfectly reveals your artistic spirit and provides a cozy atmosphere for your Web site.
Sandvox 1.5.3 is now available for downloading from our website. It's a maintenance release that you will want to get if you have an earlier version of our award-winning website builder.
The big news is that we have a special holiday coupon code for Sandvox. If you use the coupon code "SANTAVOX" on our online store, you will get a 20% discount off the regular or Pro edition.
New to our store is the ability to specify somebody else's name for the license, so you can now give Sandvox as a gift for family or friends.
Savings from Blueball Design
We've had great feedback from Sandvox users who've based their sites on designs from Blueball Designs. Charlie Lockhart and his team are now offering several design packages at attractive prices, including the new Quantum design. Quantum features three color schemes and is available in two widths, giving Sandvox users additional flexibility. The Quantum design package also features automatic rescaling of any image above the content area to fit the page's content area, detailed Readme files with tips on maximizing design features, and six Photoshop CS3 Image Files you can use to create custom banner images. Six designs for $10... it's a hard offer to pass up!
Even More Savings from our Hosting Partners
Extending your savings with Sandvox is simple thanks to Live Oak Hosting, Server Logistics, and A2 Hosting, all of whom offer discounts to Sandvox users:
Live Oak Hosting, based in Austin, Texas, is a small, family-run ISP that offers personal service. Hosting plans range from $10-$45 per month with greater savings when paid annually, as well as custom packages. Live Oak promises satisfaction or they will pay your costs to switch to another host. Use the coupon code “sandvox” when you sign up to get a 10 percent discount.
→ Visit Live Oak Hosting.
Server Logistics, based in Los Angeles, California, offers hosting in their secure 10,000 square foot carrier-class data center facility using rock-solid Apple Xserve technology. Prices range from $9.95/month to $69.95 per month with greater savings when paid annually. Server Logistics offers a 30 day money back guarantee. Use the coupon code “SANDVOX” for a 10 percent discount.
→ Visit Server Logistics.
A2 Hosting, based in Ann Arbor, Michigan, takes pride in its customer service, 99.99% uptime guarantee, and “green” business practices. Prices range from $4.95 to $7.95 a month for shared hosting, with dedicated, semi-dedicated, and virtual dedicated servers also available. A2 offers a 30 day money back guarantee. Use the coupon code “a2sandvox” for a 15% discount when signing up.
→ Visit A2 Hosting.
We hope that in these tight economic times, we are helping to provide you with a cost-effective way to build and deploy a beautiful website that suits your needs. Whatever your holidays may be, we at Karelia wish that they are happy and healthy.
From time to time we share sites created by Sandvox users that demonstrate certain features or suggest interesting solutions. In this blog post we're delighted to direct your attention to Neil Boyd's site, I Saw How.
Neil has been sharing his enthusiasm for Sandvox in exceptional ways, participating in our online forum and providing excellent feedback to our development team. For those of you who haven't had the benefit of Neil's advice, don't wait another day to visit I Saw How, his Sandvox solutions site filled with helpful tips, screencasts, and a growing bank of step-by-step instructions under the "HowTo" heading. Whether you're starting to experiment with the Code Injection feature of Sandvox Pro or are considering ways to extend the performance and capabilities of your Sandvox site, we encourage you to check in with Neil.