Archive

Archive for the ‘Site design’ Category

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

March 28, 2014 Leave a comment

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.

 

The Non-Photographer’s Guide to SmugMug

March 12, 2014 Leave a comment

SmugMug was born and bred by photography lovers, but this doesn’t mean that SmugMug can’t be great for everyone. SmugMug is an awesome place for people from all walks of life, and we feel strongly about photography being an essential part of your life — no matter what you do.

So what’s the benefit of a photo website for people who don’t “do” photography? Easy! A beautiful and safe place online to keep everything that’s important to you. Whether you’re a mom, a student, a lawyer, a small business owner or a chef, your photos (and videos) are how you get your message across to other people.

If you or someone you know didn’t think you were pro enough for SmugMug, here’s a list of reasons why we think we’d still be a perfect fit.

Spitfire Coffee in New Orleans, LA

1) You can show off big, beautiful photos.

From XS thumbnails to edge-to-edge huge, SmugMug is based on huge, gorgeous photos that show off every pixel of what you do. Even if you’re not a photographer, big pics have a place: as a background image on your homepage or in a sample gallery that shows off your cooking, your offices, your portfolio of what you do best. No matter what your profession or what you love to do, we’re pretty sure that it’ll look great in pictures.

2) Build completely custom pages for anything you want.

Custom web pages let you create anything you dream up on your new site: price sheets, About Me, directions to your storefront or anything else you want your visitors to know about you. Fun facts? Easy! Lists of your favorite vendors? It’s a snap. Here’s a little tutorial that shows you how to do this via our easy drag-and-drop design, so you can build any page you can imagine.

20×20 Studio‘s beautiful portfolio website

3) Automatically get easy-to-read URLs.

In addition to being able to grab your own custom domain, you can make sure any page on your website has an easy-to-read link. We call them NiceNames:  easy, readable, search-engine-friendly URLs that make it drop dead simple to tell someone where to find your website, even if  you’re not at your computer. Pssst: they look great on business cards!

  • Example: http://www.macaskillphotography.com/Newborn/Diego-4-Months/

Martin Sundstrom Design‘s beautifully branded website

4) Tie together every page with your brand.

Whether you’re the head of an internationally-reknowned restaurant or you just love the colors blue and green, your website should reflect your brand. SmugMug gives you dozens of one-click themes to match virtually any mood, and the ability to create your own if you don’t find what you love in the list. And if you’ve already got a logo designed for you, set it across all of your galleries and pages so your visitors know that you’ve got your act together.

Here’s a page that shows you how to do this, and you can take a look at some beautiful examples of uniquely branded sites right here.

5) Never have to worry again about site stability & bandwidth.

Once you’ve done all the work of building your new website, the last thing you need is for it to max out when too many people visit! Not at SmugMug – we’ve always offered unlimited bandwidth and traffic because we believe that photos are meant to be shared. We’re backed by Amazon and use the most cutting-edge technology to be sure that your pages load blazingly fast, no matter where you or your viewers are. Want proof? Our site status page is always open to you: http://status.smugmug.com

Example of a family genealogy site. Learn how to archive here!

6) Complete flexibility in how to structure your site.

You can create whatever kind of site you want, from simple to complex to deep. SmugMug’s flexible organization lets you nest folders inside folders up to 7 levels deep, meaning you can organize your photos, videos and pages in a million different ways. And you can create as many folders as you wish, with more folders or galleries inside each to make the nested hierarchy of your dreams. Perfect for perfectly organized family history, your children’s lifetime in photos or anything else you do. Best of all, you can easily manage them with a clean, beautiful drag-and-drop site-wide organizer.

So what do you think? If you’ve got a website for a non-photography lifestyle or business, we’d love to see it! And if you’re still not yet sold, check the sites above to get inspiration and see what you can build.

Happy customizing!

Link list:

9 Great SmugMug Sites We Fell in Love With (So Far)

February 14, 2014 9 comments

In the spirit of Valentine’s Day, we’ve curated a list of beautiful, functional SmugMug websites that caught our eye since we introduced the all-new look and feel. If you’ve recently joined SmugMug, perhaps these examples will spark some creativity in your next round of customization? (It sure did for us!)

So without further ado, here are 9 great sites we found and why they made our hearts skip a few beats.


Shooting Stars

Why we love it: Shooting Stars did a great job creating an airy, bright, simple canvas that shows off their photos. Their homepage provides everything you need: a simple slideshow, a clear welcome message, an easy way to contact them, a text navigation bar and three different services where the visitors can click to learn more. It’s navigation heaven! Best of all, they’ve included direct email and phone info in their footer, so it’s accessible from every page you’re viewing.


Sharon Lee Studio

Why we love it: In addition to Sharon Lee’s work being beautiful in and of itself, we love that she used SmugMug to house a business that wasn’t rooted in photography. Both Sharon’s artwork and wallpaper business websites are clean, simple and show off the fine patterns in her work. They also provide you with a personal background and a list of locations where you can see her work for yourself.


Nkosi Hamilton

Why we love it: From the second you land on Nkosi Hamilton’s portfolio site you notice the photography. With the dark sidebar and understated logo, you can easily click your way around but the photos always come first. This is uncomplicated at its finest, demonstrating how a clean and neutral website sets the stage for photos that pop!


Chronicles Photography

Why we love it: While Chronicles Photography’s homepage is simplicity at its best, we were particularly drawn to Dawn’s completely custom “Me & My Style” page. Her use of creative and fun photos paired with vital booking information clearly give her business an edge and a delightfully personal touch. Great job!



Lukasz M. Czajkowski

Why we love it: Lukasz Czajkowski had us at “food.” Really, do you need anything more than delicious, juicy photos covering nearly every inch of your homepage? Maybe not, but Lukasz knew how to get us hooked and his website did this right from the start.


Collecting Visas

Why we love it: When you travel as much as Milan Brown of Collecting Visas, your #1 goal is to leave a tempting photo-trail of the highlights of your trip. That’s why we love this SUPER simple portfolio site, an impressive stream of locations in beautifully balanced layout. It’s pure and uncluttered so the story shines through.


Todd Kawasaki Photography

Why we love it: Hawaiian fine art photographer Todd Kawasaki really knows how to highlight what he does best: that is, show the world how beautiful his photos look in print. We absolutely loved the custom graphics he created just for that homepage slideshow and you feel relaxed and warm looking at the soft background pic. If that wasn’t already enough, we’ve scarcely ever seen another site with a “Products” page as nice as his, which we think is essential for landing the sale.


Lost On Mars Photography

Why we love it: Aside from the intriguing name, we loved how Lost On Mars used a little customization-fu to create floating, rounded thumbnails that make their colorful images look like they’re literally leaping off the screen. It’s photos, photos, photos and a neatly organized way of showing them off.


Gilmore Gang

Why we love it: Photographs and growing families were made to go together, so it was a no-brainer for us to fall in love with the Gilmore Gang family website. What a fantastic example of a family archive, organized by year! We also liked the simple navigation bar that separates out the family’s most popular photos, undoubtedly what grandma and faraway families want to see first.


So what about you? We hope that these inspired you to think about all the different ways you can customize your own SmugMug site.

Our Show Us Your SmugMug contest may be over but our virtual door is always open for anyone who wants to show off and share a link. Tell us in the comments below!

New! Checkout with PayPal on Print Sales

January 13, 2014 43 comments

At SmugMug, we love helping ambitious photographers grow their businesses and make their hobbies into a successful way of life. From our two pro-level accounts to the advanced pricing and marketing tools designed with your clients in mind, we try every day to help you hook more sales.

Today, you’ll find that PayPal is now a checkout option in your shopping cart, so you and your biggest fans can print more and click less.

PayPal as a second payment option

That’s right! One of the web’s most popular online payment options is now available by default in the SmugMug shopping cart. So you don’t need to get up, hunt for your wallet and pull out your credit card just to place an order.

And for pros: Your customers won’t have to hunt for their credit cards, either. Making money is that much easier.

How does it work?

Once you (or your customer) add prints and products to your shopping cart and begin the checkout process, you’ll see the option to pay via PayPal in addition to the traditional credit card method. Click the new yellow button and we’ll send you over to PayPal to log in and confirm your purchase.

Finally, PayPal will send you back to your SmugMug shopping cart so you can select a shipping method and complete the sale.

Is PayPal available on my account type?

The new PayPal button will appear in the SmugMug shopping cart across all SmugMug accounts from Basic to Business, and for all fans and clients who buy prints from your site. No action needed on your part. Period.

I’m a Pro who offers Coupons. Can my clients use them when they pay with PayPal?

Yes! If you’ve created Coupons on your SmugMug site then your clients can enter it during checkout as usual. The PayPal total will reflect their discount.

Does this mean I can pay for my SmugMug subscription with PayPal, too?

Sorry, it doesn’t. But we love this idea! If this is something you’d really like to see – or if you have any other ideas or feedback –  let us know in the comments below. Or simply write an email to our Support Heroes and we’ll tally your responses for our Product Development team.

Happy printing!

Links you’ll love:

An Organizer Worth Migrating For

January 10, 2014 27 comments

One of the requests we’ve heard time and time again from you over the years was the ability to visually organize all of your photos and galleries from one screen. So that’s what we did in the New SmugMug, and we keep hearing from Smuggers using the new site-wide organizer just how essential it is to their everyday workflow.

Whether or not you believe in making resolutions at the New Year, we think it’s worth it to try and be more organized, no matter when. More time, less digging, easier path to your favorite memories – What’s not to love?

New SmugMug gives you 5 layers of organization, too, which means you can sort your photo up to 7 layers deep. That’s a lot of trips! (and weddings, and soccer games, and…)

Without further ado, here are the 4 best reasons why you should try out the Organizer and how it’s a ginormous step up over the Legacy way of doing things. And since we’re intent on sharing tips, there’s a few of those thrown in to help you find your way around, too.

Read the complete tutorial >>

P.S. Are you still using Legacy SmugMug and want to try the new Organizer? Get started now by migrating your account, or read our FAQ for answers to the most common questions longtime SmugMuggers have asked.

Categories: Site design, SmugMug

Your Favorite Smug Tips of 2013

December 23, 2013 2 comments

In the last year we’ve put out a lot of posts on this blog: product announcements, tutorials on taking better photos, tips to make more moolah and articles on how to get the most out of SmugMug.

So in case you weren’t glued to every moment we typed here, we’re sharing one last chance to catch your top 5 favorite articles that you may not have seen:

Festive photo by Rachel McFarlin Photography

1) 5 Lies Your Camera Likes to Tell

Think your camera is your best friend? Think again! Keep these tips close so that you get the perfect picture in even the trickiest situation. Read more >>

2) How to Make a Photo Blog

The new SmugMug’s powerful customization options makes it a snap for Power, Portfolio and Business account holders to create their own completely custom Pages… perfect for bloggers. Read more >>

3) The Save Photo Reminder

Scared that people are stealing your full-resolution photos out of your gallery? Don’t worry, we show you how you can tell if it’s happening or not… and what you can do to stop it. Read more >> 

4) 5 Killer Locations for Your Portrait Sessions

Bored of the same old look? Try these ideas for fresher, fun family portraits, or with your next photo shoot with any client. The best locations may be hiding right under your nose. Read more >>

5) Guide Your Guests to the Gold

Why confuse your site visitors? We picked some of the best examples of beautiful, easy-to-navigate sites on SmugMug and show you just why they work so well. Read more >>

And since we’re talking about recaps, it only makes sense to share the “top” five of the more subtle articles that deserve a second round in the spotlight! Here they are:

Beautiful Boudoir portraits by Je Revele Fine Art Photography

1) How to Succeed in the Business of Love

Our friends at Je Revele Fine Art Portraiture explain their secrets behind building – and maintaining – a happy client base. Perfect for planning your 2014 portrait and wedding schedule! Read more >>

2) Why Events Are Best for Your Business

If you’re a pro with a Business account, Events are our #1 favorite tool that you probably don’t know about. Here’s why they work, what your customer will see, and some tried-and-true suggestions for integrating them into your portrait and wedding workflow. Read more >>

3) 5 Things Your Client Needs to Hear

Are your subjects happy? Confused? Confident in your ability to get the shot? Here are our pros’ top tips on what to tell your models so that you have a successful photo shoot… and they have a great time, too. Read more >>

4) How to Make your Visitors Feel at Home

Having a great website is more than just throwing some photos up on the web. Here are our suggestions for creating a helpful, pleasant experience for the people who browse your site. Clients, too! Read more >>

5) How to Organize a Photo Walk

Our photo-fiend-friend Scott Jarvie is known for his ability to rally local photographers to get up and get out shooting! If you’d like to take action and inspire your photo-neighbors to go snapping with you, here’s a few planning tips to get you on your way. Read more >>

We hope you have a safe, warm, happy and thoroughly joyous holiday!

Did Someone Order a Full-Screen Homepage Slideshow?

December 19, 2013 21 comments

Many of you told us that the full-screen homepage slideshow was essential to your website. We’ve got something new we think you’ll love: A full-screen slideshow for your pages and galleries!

How does it work?

We’ve added a brand-new background tab to your site customization, which means you can easily add a single image, a series of single images or a slideshow as the background of your homepage.

Additionally, Power, Portfolio and Business users can add unique backgrounds to other  pages on their site: Folders, Galleries and Pages. This background sits behind the other content blocks that you’ve added on the page, exactly the same way that a color, texture, or graphic added from the Theme tab currently does.

How do I get started?

1) Open up your Customization and look for the new “Background” tab in the Customize panel.

null

2) Choose where your new background will show. By default, your ‘background’ will be inherited from your entire site  but you can display something across every page on your entire site, have it live just on your homepage, or make it appear on every single Folder or gallery page.

3) Choose the background type. To add a full-screen slideshow to your homepage, open up the drop down menu to choose the Slideshow option.  Be sure the “Homepage” location is selected, too:

Note: Choosing “None” will evert your background to whatever is set in your Theme.

4) Save your new goodies by Publishing your changes. That’s it!

Can I customize those slideshow options?

Of course! You can set:

  • your images
  • playback speed
  • transition type and speed
  • a splash image to be used to entertain your viewers while the full slideshow loads

What else can I do with the new Background tab?

You’re not just limited to slideshows. Choose the “Photo” option to add an edge-to-edge photo to the background. We recommend setting it so that your visitors see a new image each time they visit your site!

To do this, create a gallery of background images, or select photos from several different galleries on your site. Opting to change the photo “every visit” gives your site a fresh new look each time your fan comes back.

Tip: Be sure that your selection of images play well with your text colors!

Is there anything I should watch out for?

These background images sit behind all of the content blocks on the pages to which that you add them. They will lie under your navigation menus, Galleries Blocks, Text Blocks, and so on. To avoid a completely cluttered experience, we recommend that you remove existing content blocks from your page if the slideshow is the focus of that page.

Is it available on MY SmugMug account?

Yes! Once again, all SmugMug users will be able to add background images or slideshows to their homepage. Power, Portfolio and Business accounts (levels that include additional customization options) will also be able to change the background content on any page on their site.

Where can I learn more about the new Background options?

If you still have questions about this feature, our brand new help page is there to help you. So are our Support Heroes!

So sit back, enjoy the (slide)show, and let us know what you think in the comments below. Don’t forget to share what you’re designing, too, as part of our ongoing Show Us Your SmugMug contest. :)

Using PhantomJS at scale

December 17, 2013 8 comments

SmugMug:

Did you know that SmugMug has a separate Sorcery blog? From time to time our Engineers will take you behind-the-scenes of something we’ve just built, or share some of the valuable insights we’ve had while investigating a particularly tricky fix. If you’re interested in the technical nuts and bolts of what powers our site or if you just want to hear what’s making our hearts beat a little faster, check it out! Their latest post deep-dives into The Phantom Renderer, or “how to make sure SEO works in the new SmugMug.”

Originally posted on SmugMug Sorcery:

About a year ago SmugMug had a dilemma. Our upcoming site-wide redesign and refactor  (aka the new SmugMug) moved all of our rendering code into client-side JavaScript using YUI. We had a problem; SEO is critical for our customers and search engines couldn’t index the new site.

Possible solutions were thrown around: do we duplicate our code in PHP? Use an artificial DOM? What about PhantomJS? Duplicating code would be a monumental effort and a continued burden when writing new features. Initial tests of fake/artificial DOMs proved unreliable. A small prototype Node.js web server that hooked into PhantomJS proved promising. Node.js’ async model would be perfect for handling things that wait for I/O like rendering webpages. We came up with the project name ‘The Phantom Renderer’ soon after.

The prototype

I spent a few days whipping up a prototype proxy server to test with that worked like so:

  • Node.js web server accepts a…

View original 1,168 more words

Categories: Images, Site design, SmugMug

Spooky Storytelling by Todd Atteberry

October 31, 2013 Leave a comment

Halloween is upon us! What better time to announce our latest inspiring Success Story with Todd Atteberry from History Trekker? Todd’s beautiful, haunting photos of historic northeast locations echo classic, timeless Dutch paintings. He talked to us about how he got into the art of photographing haunted buildings and how his SmugMug website helped him find a firm foothold in the historic community.

SmugMug inspiration: History Trekker

Todd is also the man behind Green Man Studio, one of SmugMug’s Certified Customizers. You can tell that his creative skills reach well beyond simply digital art in his beautiful and thoughtful website designs.

SmugMug inspiration: Photos by History Trekker

SmugMug inspiration by History Trekker

Read the full interview with Todd, and don’t be surprised if you hear something go bump in the night. ;)

Have a safe, happy and haunting Halloween!

Follow

Get every new post delivered to your Inbox.

Join 2,600 other followers

%d bloggers like this: