Our blog
Reason #3 to Switch to Version 2.8
Reason #3: More Social & Sharing Tools
With some trepidation, one of our expert developers, Warren, waded into the sea of "Social" to spearhead this part of the work for Sandvox 2.8. Keep in mind—at the time, he didn't really consider himself a "social media maven."
What did the team think of that, you ask? All the better. We wanted the Sandvox social tools to be smooth and easy to use. Who better to figure out what needed to be done than someone with an unclouded perspective.
So, since a good first step to solving any problem is really understanding it, Warren figured he'd have to "get social."
He fired up Sandvox and created a bunch of new websites for testing. After adding dozens of social buttons, feeds, plugins, and boxes all over them, he shared. Posts to Twitter, pages to Facebook, tweets to Google+: hashtags, pins, activities, recommendations, feeds, and +1s went to everybody! Eventually it all started to make sense. It was time to get to work.
Twitter was the first thing to update. Sandvox's original Tweet button tweeted just fine, but that's all it did. Twitter's since added some cool new buttons with different capabilities and we wanted to be sure our customers had those.
So we added “mentions” to refer to other Twitter users, hashtags for topics, and a follow button so people can easily follow you on Twitter.
Warren thought it was looking pretty good, but the team pointed out lots of places where it was unclear or complicated or difficult to use. Back to the drawing board for another round of design, coding and testing. Better, but still not good enough. A few more rounds and we got there — Twitter not only worked, it worked really well and was super simple to use.
Facebook followed Twitter, and turned out to be the biggest challenge. Facebook changes constantly: they never stop moving. (In fact, since 2.8 was released, they’ve changed a few more things! Look for an update, probably around v2.8.2.)
Before Sandvox 2.8, our Facebook button simply let visitors "Like" pages on your Sandvox website. Now it can Recommend, Send, and Follow as well. We also support Facebook’s new larger “box” size and show likes, recommendations and other activities all together. A few more cycles of design, code, test and things were looking pretty sharp.
The new Like boxes show a lot of info and fit better in the main content area — though you can also squeeze them into the sidebar. The Like Box shows people who liked your page, with an option to see their posts, along with a Like button to add their Likes as well.
The Recommendations Box is a little more complicated. It shows a site visitor other visitors' recommendations of your site. If a visitor also happens to be logged in to Facebook, it prioritizes the recommendations made by people they already know.
The Activity Feed is similar, but shows a wider variety of activities. To take advantage of all the new Facebook capabilities, you’ll need to register your site with Facebook and get an 'App ID'. It may sound complicated, but we've written really simple instructions for how to set this up.
Google+ was mostly about simplifying. There were TONS of options to sift through and address. We landed on a set that allows good flexibility, but remains simple to use.
Next up was support for Pinterest. The Pinterest button lets visitors easily pin your pages to their pin boards. Because Pinterest requires an image to share, we integrated our media system so that a page's "main image" is what gets pinned.
For LinkedIn, Sandvox now offers two (quite different) button options. The share button lets visitors share your page with their professional social group. The “member profile” lets you show your current "résumé" as posted on LinkedIn.
To wrap it all up, we introduced the Sharing Bar. We wanted to make it convenient for Sandvox customers to combine a variety of these buttons and tools, instead of having to place each one individually. The Sharing Bar is a collection of sharing buttons that can appear on any or all of your pages, including individual blog posts. You can globally choose which services to show and change the order that they appear. As visitors peruse your website, they can instantly like or share your pages with multiple services!
We mixed all that up, along with the Retina changes, beautiful new designs, and tons of improvements under the hood and baked it all into Sandvox 2.8. We think we've got the social functions that will make most Sandvox users happy!
Reason #2 to Switch to Version 2.8
Reason #2: New Designs!
As we were putting every effort into making Sandvox 2.8 Retina-ready, watching photos and design elements come alive on our Retina displays, we realized we really wanted do everything we could to showcase the Retina capabilities we were carefully building into Sandvox.
While looking through "Sandvox Sites", our customer-submitted collection of websites built with Sandvox, we noticed that some really cool photography sites were using designs from our friends at Behind the Rabbit. In particular, their designs developed specifically for Sandvox 2: Hydrogen and Krypton.
Both of them are simple, clean designs with very modern looks that we thought worked especially well for displaying photo galleries and photos.
Hmmm.... How might something like these look in a Retina-ready Sandvox?
We contacted Behind the Rabbit to see if we could work with them on designs inspired by Hydrogen and Krypton.
After talking, we decided that the ideal situation would be to simply include a Retina-ready version of Hydrogen and a streamlined, Retina-ready version of Krypton directly in Sandvox. This would make Retina-ready versions of these great designs available to all Sandvox customers.
Behind the Rabbit really knows CSS and how to stretch Sandvox designs to do amazing new things. Some of that requires code injection to make additional CSS tweaks to support more custom features. Krypton, especially, has expert-level customizations that exist outside of simply picking that design in the Design Chooser.
So, we worked with Behind the Rabbit to get Hydrogen and Krypton Retina-ready, AND created a streamlined version of Krypton (called Kryptonite) that is more suitable for non-experts, but can still be extended if desired.
The end result? Hydrogen and Kryptonite now ship as part of Sandvox, beginning with version 2.8.
Behind the Rabbit retains the rights to further develop its original Krypton design and may have additional announcements in the future. We also plan to exchange improvements with each other as we go forward.
We'd like to encourage you to visit Behind the Rabbit's new site, whose development was spurred on by our plans for this Sandvox update, to check out the all of the Sandvox tips, tricks, and designs that they have to offer.
We're extremely pleased to include Hydrogen and Kryptonite in Sandvox.
We hope you like them as much as we do!
Reason #1 to Switch to Version 2.8 of Sandvox
We're particularly proud of the new 2.8 version of Sandvox that we just released today. We've been working on the nuts and bolts behind it for a long time. There are many reasons to switch to this version of Sandvox, and over the next few days we'll cover some of the them in a little more depth here.
Reason #1: Retina-readiness!
We saw the need for Sandvox to support the capabilities of Retina displays shortly after the third-generation iPad was released in Spring 2012, followed by the Retina MacBook Pro in June.
While it was pretty easy to get the internal icons and graphics of Sandvox itself updated to include Retina-quality graphics, our bigger goal was to make the websites that Sandvox creates look sharp on Retina displays.
So, we started the process of updating Sandvox's internal handling of graphics to no longer be tied to the one-point-equals-one-pixel model.
There were a few challenges to overcome, which is why it took a while to make it happen. HTML itself isn't quite ready for Retina displays, so we had to come up with a solution that would carefully balance the needs of viewers on classic and Retina displays, different browser capabilities, and even search engines — all while keeping bandwidth demands for the images down.
We looked at a number of different approaches to providing Retina images, and settled on a lightweight solution that uses JavaScript to determine which kind of image should be served based on the viewer's screen resolution. (And, in the case of Javascript being disabled, a standard-resolution will be served.)
Along the way, we found that there were many cases in which we actually didn't want to provide both a regular and Retina-quality image. It turns out that one can get away with a much tighter image compression on the larger, double-resolution images; and doing so means that the high-resolution image is not that much bigger in file size (and transfer bandwidth) than the standard image.
By letting the browser scale down the image to fit, we get a great image no matter what the display. (Still, we use the two-image JavaScript technique for larger images and PNGs.)
We also found that we needed to upgrade some of our third-party libraries to look good. Our "photo gallery" and "slide show" displays, for instance, needed high-resolution controls.
That said, most of the changes were under the hood, so that all of Sandvox's image processing would be aware of the different image sizing. Before, a 300 x 200 image meant 300 pixels by 200 pixels. But factoring in retina display devices, Sandvox would need a 600 x 400 pixel image to fit in the 300 x 200 point area.
This paradigm shift had to be propagated throughout Sandvox — not just incorporated into the context of photos on a page, but thumbnail images, banners, and so forth. Plus, several plug-ins needed to be updated to deliver Retina graphics. Now, when you put a "Created with Sandvox" on your Sandvox website or link to Amazon.com products, visitors to your website will see the sharpest graphics possible on their display.
All of these features can be activated on existing Sandvox-built sites by checking the "Optimize for Retina Displays" checkbox in the Site inspector.
And the great thing is that you don't need to have a Retina display yourself to take advantage. Just mark the checkbox, publish your website, and any of your visitors who have a Retina (or any other kind of high-resolution) display will be able to see the sharper images.