Treat Yourself This Halloween with More Smug Friends

This is a favorite time of the year for lots of us who love to have fun with friends and family, dress up, and watch the leaves change on the trees. Remember pooling your trick-or-treating candy and swapping and sharing with friends? We hope that at SmugMug, you’ll still be able to do this in the spirit of the holiday.

No Tricks, Just Treats at SmugMug

20% credit is a sweet, sweet reward for every friend you bring over to join us. Remember that when you share the secret of beautiful online galleries with friends using your unique referral link, you earn a percentage of their account value back into yours. And they get a discount off their first year, too, just for knowing you.

Why would they join? Great memories start with friends, and everyone needs a safe place to put them. Whether they love to document the kids’ adorable costumes year after year or are famous for throwing wickedly delicious Halloween parties, there’s room for it all in SmugMug’s unlimited galleries.

SmugMug’s “Spooky” theme
Try our festive “Pumpkins” theme.

Let’s not forget that every account comes bundled with dozens of gorgeous one-click themes (like “Spooky” and “Pumpkins”), so your Halloween galleries will look appropriately festive… even if their personality’s sunny and warm.

And if the party gets a little too crazy, we’ve got powerful privacy features to boot.

So what are you waiting for? Your friends are waiting!

Kudos to September’s Winner: Chip Jones

Congrats to Chip Jones, our most recent winner of our monthly Refer-a-Friend contest! Chip takes gorgeous Fine Art, Landscape, and Architectural Photographs, and we’re pleased to be able to add a GoPro Hero 3+ Black Edition camera to his lineup of photo tools.

Chip Jones Photography

Time’s running out on our contest, so if you’re looking to win one of your own, don’t forget to check out the contest and prize details, and start sharing SmugMug with your circle of friends.

Have a safe and happy Halloween!

Links to love:

Behind the Build: SmugMug’s Color Picker and Why It Works So Well For You

Have you ever wondered about how a particular feature at SmugMug came to be built? Thousands of happy photo lovers log in and tweak their websites every day, but there’s more to the site than just the buttons you hit. So we’re going to take you behind the scenes and shed a bit of light on how we dreamt up – and sweat over – the details that you’re probably using every day.

Today we’ll take a closer look at the color picker – that little box that pops up when you’re tweaking your Themes, font colors and other hues in your personal palette. Think it’s just a clear-cut click and run? No way!

The Impulse

Ye olde Easy Customizer on legacy SmugMug

Years ago, back when the “easiest” option to personalize your site was the Easy Customizer, our lead engineer had an idea: What if we could shorten the amount of time people spent picking colors that matched? What if we built a system that automatically knew the best complements to the hues you liked?

Best of all, what if we could just make it visual, easy process instead of forcing people to squint at code, risk mistakes and break their websites?

This is how you customized color in legacy SmugMug

We wanted to take the work out of customization and make it fun for you to create something beautiful. So we coded up something bigger, better, and a whole lot smarter.

The Idea

The color picker is more than just a pretty swatch:

Custom themes in the New SmugMug: Just click once

You’ll find it any time you open up and edit a Theme. Take a closer look and notice that when you click on any point in the square, we’ll automatically pick a contrast color, text color and any other subtle elements that show up best based on the color you’ve chosen.

Whether you love dark or light, you don’t have to stress about choosing the best tones that will catch the eye. Text is automatically easily readable, and you probably won’t even notice that we’ve picked almost a dozen other elements as highlights. The amount of contrast needed on these secondary colors should be just perfect to avoid your viewers getting jabbed in the eye by something too dark, too bright, or too loud.

Example of a dark theme and light accent colors
Example of a light theme and dark accent colors

How it Works

When you pick a color on the swatch, we consider that a mid tone and map out similar colors both brighter and darker than that, with just the right amount of contrast between each. We’ll then assign numbers to different parts of your SmugMug site (like your text, the background, your buttons, the border colors around your images, etc) from 1 to 30, and so on.

As a result, your SmugMug site becomes a big paint-by-number, and each spot gets filled in with the colors we’ve calculated. The best part is that in doing this, we’re automatically writing the CSS in the background for it all, so you don’t have to.

If you’re the codey type and want full control, you can always override our choices by clicking on the color choice box and choosing your own. Or by using your own CSS, of course. But it’s definitely not required – just let our systems do the heavy lifting for you!

Unique Challenges to Overcome

While the above theory sounds great on paper, it required quite a bit of tweaking before we shipped it onto your sites. So we spent time adjusting the algorithm to be sure that everything looks good 100% of the time… no matter what color you pick!

Here were the two biggest challenges we encountered:

  • Users choosing medium-tone saturated hues from the color picker resulted in themes that looked garishly bright and super contrasty. Why? Choosing bright colors like kelly green throws off our calculations of complementary colors. We had to temper this and build special algorithms to deal with bright hues like that.
  • The art of calculating complementary shades is not the same when working with dark themes as it is for light themes. As you go from black to light, there’s a point in the middle where the math flips. Case in point: A light border shows up nicely on a dark background, but dark borders look best on light backgrounds. So how do we anticipate where in the spectrum that happens? This took additional tweaking to fix.

See It in Action

So we invite you all to go and play with your Themes, click around and watch what happens when you choose your favorite colors in the picker. Because Power, Portfolio and Business accounts all have the ability to create (and edit) as many themes as you wish, we encourage everyone to get playing and witness all the beautiful, effortless possibilities our color picker creates for you.