About Bobby Grace

I'm a designer at Trello Inc. Rounded corners, gradients, that kind of stuff. Follow me on Twitter here.

How We Made Our Landing Pages Fast: A Grand Journey

Screen Shot 2014-08-29 at 11.31.04 AM

We recently launched an overhaul to our landing and about pages. These are all the pages that aren’t part of the app, pages like Home, Business Class, Trello Gold, Tour, and Jobs. We call them the “meta” pages because we’re nerds and because it’s not just landing pages, but also things like log-in and sign-up. Take a minute to look around.

At the beginning of our Trelloic journey, we had very few meta pages. Because Trello is a single-page app, we just rolled the meta pages into the client code. That had some obvious problems. It meant you had to download all the JavaScript and CSS and templates for the app just to view something like the Trello Gold page. We made this a little nicer for some pages, but it was still a mess and wasn’t going to scale. Another problem was that these pages didn’t have a consistent look and feel. They were made at different times by different people with different motivations.

We couldn’t let this stand, so we set out to overhaul them. There were two parts of the project: separating the meta page code from the main app, and designing and developing the pages.

Project Metosis

Trello developer and all around good guy Daniel LeCheminant worked on the server component. I called this Project Metosis, a dividing of the “meta” pages, although nobody seemed to care about my clever codename as much as I did. *slumps in chair*

Metosis works like this: when you visit a page like https://trello.com/business-class, there is some server code, some middleware, that looks at the URL and sees if it matches something in the Meta project, which is in a place separate from the client code. If it finds a business-class.html, it short circuits and sends you static files from memory instead of loading the app.

Hold on. Serving static files from a file system? I know. It’s honestly only a little bit faster and fancier than uploading via FTP.

There are over 10,000 benefits to this method, but I’ll highlight the big ones.

  1. We can deploy changes in the Meta project without going through the client release pipeline. Nothing is tied up and we don’t have to release a whole new client just to add a job listing, which we plan to do often apply today for a good job yes.

  2. It’s mega-fast. These are small static files served directly. There’s very little DOM manipulation and the bare minimum CSS, so once it gets to the screen, it renders in a flash.

  3. We only have the HTML, CSS, and JavaScript we need for either the client or meta projects. That means we can cut lotsa code. Our CSS is now 202kb raw and 43.3kb compressed, down from 276kb raw and 58kb compressed. That’s Twenty-Nine Percent (29%) smaller. The reduction in JavaScript was a bit more modest: 443kb down to 410kb, about 8% smaller. Not bad.

  4. You know how nice it is to watch and listen to a quill swiftly write on fresh parchment? You know how it feels to bite into a hot, fresh-out-of-the-oven donut? For developers, safely cutting a bunch of code is better than both of those feelings. This doesn’t really need to be its own item, sorry.

  5. The code is isolated and we don’t have to worry about cascading rules running amok or extraneous scripts bogging down either project. For instance, we noticed that a wild CSS rule on one of our landing pages was causing filtering to be incredibly slow. There should be less of that now.

So Daniel had the “load it fast” part down. Now I needed to make the pages.

Project Marquee

Screen Shot 2014-08-29 at 11.47.54 AM

I called the designing and making of these pages Project Marquee. The name is not as good as Metosis and no one really cared anyway, but whatever. I’m still going to use codenames.

Here’s what I wanted out of the design. I wanted a simple, mobile-friendly layout. I wanted consistent typography. I wanted to use words, but not waste them. I wanted everything up front and visible, nothing buried. Just about the only things you click are links that take you to new pages where you get more information you want. I wanted to show a big screenshot of exactly what Trello looks like so people get it quickly.

Here’s what I didn’t want. I didn’t want any dizzying and confusing scroll effects, images carousels people wouldn’t click through, tabs or hover effects people would miss, or expensive videos people wouldn’t finish. I consider these big, whizz-bang ornaments that obscure the message.

Above all, I wanted to explain what Trello can do for you, convey what people love about it and explain why you might love it, too. I figured I could do that quickly and effectively with some concise words, a few images, and without all the doodads.

The straightforward design made it easy to develop. It wasn’t long before it was ready to ship.

Shipping

Just before our big announcement, Michael Pryor, CEO of Trello, said if there was anything we wanted to get out we should get it out now. So we wrapped up the last of the project and launched. Then Michael said “No, switch the home page back to the old one” and we were like ”Michael, you just told us to launch” and he said “What if less people sign up with the new page? Better the devil you know…” and we were like “Well. Okay.”

So we converted the old home page to the new meta project, added a bunch of analytics, and A/B tested it. 50% of new people saw the old version, 50% saw the new version, and we recorded which one get more people to sign-up. We found the new page had a sign-up rate of 14% while the old page was around 11%. And it was statistically significant. Great!

It was worth the hassle of setting up the test in the end. We have much better analytics and we are in a better place to test changes in the future. Maybe we’ll test something really out there. Be sure to tell all you friends about trello.com and ask them if they see something cool on the homepage or sign up if you haven’t! (Ed. note: I hope this plan works.)

Why does it get more people to sign up? There’s no way to be 100% sure. It could be because it’s faster. It could be because the pages are better at explaining the product and piquing their interest. Thankfully, we can test more things and get a better sense. Hey, what if we made the pages slower? Think that would get more people to sign up? Who knows…

Really there are two parts of this: getting people to sign up for Trello and then making them happy, active users. The new landing pages get more people into Trello (✓). Now we need to make sure new users have everything they need to be happy and active and get the most out of Trello (without being overly helpful). That’s something we’re working on.


The journey is far from over, but we are in a much better place now. Our landing pages are mega-fast, looking nice and consistent, we can push out updates faster, we can test changes more easily, and the code is cleaner, more maintainable and less error-prone. On to the next adventure!

A Note About Notifications

Screen Shot 2014-08-25 at 10.02.30 AM

We often hear from people that notifications in Trello are noisy and complicated, which ultimately lessens their value. We want notifications to really matter, so we trimmed down the quantity and centered the system around the notification that everyone agreed mattered the most: being mentioned on a comment.

You won’t get some of the old notifications, like checklist item completes or description changes. So if you want to let someone know that something is important, mention them in a comment and they will be sure to be notified. We’ve been making notifying members easier with a more visible “mention members” button when commenting, a new reply button on comments in the activity feed, and @-style autocomplete.

So what triggers notifications now?

When subscribed to a card, you’ll get notifications for…

  • All comments
  • Adding, changing, and upcoming due dates
  • Card moves and archives

When subscribed to a list or board

  • You’ll get the same notifications listed above, but for all cards in a list or board.
  • You’ll also get notifications for all newly created cards

And at any time, you’ll get notifications when…

  • You are mentioned in a comment.
  • You are added to a card, board, or organization.
  • You are mentioned in a checklist item.
  • One of your boards is closed.
  • When someone makes you an admin of a board or organization.

Update: when we originally launched with this change, board and list subscribe worked differently and didn’t give you notifications about card details like comments and due dates. We’ve made a change based on your feedback. Now subscribing to a board or list is exactly like subscribing to all the cards in that board or list.

There’s another slight change regarding email notifications. Previously, the default was to batch notifications together and send a summary email about every hour. We did it this way because the notifications were so abundant and overwhelming. Now that there are fewer, the new default is set to instant. Combined with the ability to reply via email, we think it will allow for quicker and more seamless discussions. If you want to change your notifications setting to instant, you can do that on your settings page under “Notifications” > “Change Notification Email Frequency”.

We have a lot of respect for your time and attention. When we buzz your phone, desktop, email app, or watch, we hope it’s for something that really matters.


In a rare, behind-the-scenes moment, there’s another piece of the notifications puzzle that we’re working on: reminders. Currently, due date notifications arrive 24 hours before the due date. It’s not a time that works for everyone and there is no way to change it. We want to split up due date notifications into a feature called reminders. You can set a reminder independent of a due date, so that you can simply say, “give me a notification about this card at such and such time”. When you set a due date, it would automatically set a reminder, but it will be editable. Reminders will be per-member. Setting a due date will add a reminder for everyone on the card, but they will be able to change or remove their own reminders. Warning, though: the details of this may change and we don’t have a timeline for the release. Let us know what you think on the Trello Development board!

Hello, Saved Searches

Saved Searches

When we introduced the new search back in May, people from around the world were astonished by the speed and flexibility of Trello search. By that I mean it was no longer slow and broken. Some time passed. The cheering we heard in our heads calmed to an excited murmur. We stepped back and thought, “What else we can do with search?”

The new search operators with autocomplete are one of the nicest things in new search. With operators like “@me”, “-list:done”, “due:week”, and “-has:members”, you can create highly tailored lists for all kinds of purposes. You can answer, “What’s due this week which has no one assigned to it?” and “What do I need to do today?” and “What cards have stickers, covers, have ‘Garfield’ in the title and were edited in the last 24 hours?”.

Wouldn’t it be awesome if you could easily get back to searches you use frequently?

I think you know what I’m getting at.

You can now save searches. It’s easy: just start searching, maybe add an operator or two, then click the “Save This Search” link in the top right and give it a name. Now whenever you click the search box, your saved searches will be at the top. You can rearrange them by dragging and dropping and you can delete them at will.

This is a feature for people with Trello Gold and Business Class. We think it’s something people managing lots of cards and boards will find useful. Remember, you can get Trello Gold for free just by recommending Trello to people!

Now go find those cards.

Hello, Quick Card Editor

quick-card-editor

Have you ever noticed a typo in your card name and wanted to change it without opening the card, clicking the card title, editing, etc. and when you realized you couldn’t you threw your hands up in the air in frustration, walked out of the room and onto your 300ft luxury yacht and sailed to Bermuda?

Well come back home! Now you can edit card names without opening the card.

It works like this: when you hover over a card, you’ll see an edit icon in the top right corner. Click it and you’ll start editing the card in place. You’ll also be able to edit labels, members, stickers, and the like.

“Excuse me. I don’t use mice. Is there a keyboard shortcut? If there isn’t, I swear I’ll climb into SS Magnificence and you won’t hear from me for three weeks AT LEAST.” *does a 180 and heads for the door*

Whoa whoa whoa, come back! There is a shortcut. It’s the “e” button.

The quick card editor is available today on trello.com. Go try it out.

Hey, does your boat have wifi?

Trello And The Heartbleed OpenSSL Vulnerability

On April 7th, a serious security issue called “heartbleed” was reported in the OpenSSL library. The library is used to encrypt private traffic on a majority of services on the Internet, including Trello. The issue could allow others to access private data from an affected server.

In order to eliminate the vulnerability, all of our systems have been patched and all of our SSL certificates have been replaced. As of now, we are no longer affected.

We are not aware of any malicious behavior, but due to the nature of the vulnerability, it can be difficult to determine. As a precaution, we’ve logged out all sessions. That means you’ll need to log back in, which is an inconvenient but necessary step. We’re sorry for the trouble. We also recommend resetting your password and removing app tokens via trello.com/my/account.

Because OpenSSL is used in so many places, we recommend checking to see if your other online services are affected before logging into them again. We recommend resetting your password on those services, too.