MINDSENSE

Designing our new blog

in Design

BlogDesignFoldedScaled

Over the last few months, it has become painfully clear how much our blog needed a facelift. For the last week, I have designed and developed our new blog. I made some intentional decisions during the design process, which I will elaborate on here.

The design we were using before we whipped up in a matter of hours. It was a sort of after-thought that went along with a redesign of the Mail Pilot microsite. It put a large emphasis on the first image of a post and a post’s headline. This design worked best for announcements, so that’s all we posted: our email announcements, slapped into the blog.

Besides the fact that that’s not what a blog is for, nor is it its best use case for a company, it showed its cracks with the design rather quickly. Graphics designed for our emails were confusing when used in our blog. Since graphics for emails have headlines in them, you end up with two headlines when you reuse the images for a blog post. This is cluttered and confusing.

Graphics designed for our emails were confusing when used in our blog. Since graphics in emails typically have headlines, reusing them in our blog meant each post appeared with two headlines. This was cluttered and confusing.

Graphics designed for our emails were confusing when used in our blog. Since graphics in emails typically have headlines, reusing them in our blog meant each post appeared with two headlines. This was cluttered and confusing.

The blog had a “flat” feel with a white background. This caused an unforeseen issue that emerged shortly after we posted the design. Our Mac app started taking up many of the posts, screenshots included. Our Mac app’s interface also has a white background, so any clipped screenshot became visually confusing.

The white background of the blog and the white background of the Mac app caused screenshots to become visually confusing. We posted the design a few weeks before we started posting screenshot of the Mac app. We didn't see the problem coming, but we noticed it quickly.

The white background of the blog and the white background of the Mac app caused screenshots to become visually confusing. We posted the design a few weeks before we started posting screenshot of the Mac app.

With these big white images, you could never tell when an image was part of an article, or starting a new one. That was a major design flaw.

A new design

With the old design, it was hard to tell what was where and why. I worked to address these issues when designing our new blog. I also wanted to craft a design that would inspire us to post more than just announcements (starting with this post about design!).

Clarity was the primary goal. Readers should be able to quickly differentiate article content from other content, and from other articles. The first solution is article text is in a serif typeface, while all other elements (captions, navigation, etc.) are in a sans-serif typeface.

The grey background behind an article helps emphasize and contain it. It draws your eyes in. And it helps show what is inside the article versus what is not.

The headline is not in the grey box, for stylistic reasons. Though since it is not in the grey box, the sidebar must appear below the top of the grey box, otherwise it commands as much attention as the headline. By moving the top of the sidebar to be just below the top of the article, your eyes can correctly flow from the headline to the article, and then sidebar.

Two earlier designs (left) next to the final design (right). While I thought the headline looked better outside of the grey article box, the side bar had to be moved below the top of the article box so that the readers eyes don't move from the headline to the sidebar, but rather from the headline to the article, then to the sidebar.

Two earlier designs (left) next to the final design (right). While I thought the headline looked better outside of the grey article box, the side bar had to be moved below the top of the article box so that the readers eyes don’t move from the headline to the sidebar, but rather from the headline to the article, then to the sidebar.

Images are bordered and captioned. They are wider than the text of the article, but still bounded by the article’s box. By making them wider, it (ironically) makes it visually clear that this image is a part of this article, flowing form top to bottom. On our previous design, an all white background where the text and images were the same width made it unclear if an image was associated with the text above or below, or if it started a new article altogether. The image’s borders and captions also help make this clear. Further, it is clear when a new article begins because of the article box, and because images that start an article are the only ones to take up the full width of the box.

The sidebar allows us to move any actionable items out of the articles. This way, the article can be just an article, and not a spam-like piece of marketing. It also allows us to ensure actionable items are always up-to-date. If someone lands on an old article, it may have an old link. Now that these items will be in the sidebar, they will always reflect the most up-to-date actionable items.

While developing this theme in WordPress, I made it enforce a few guidelines. It only allows for one level of sub-header in an article’s body, which will keep us from writing anything too complex. The goal is to tell stories; to tell our readers what’s going on here in Blacksburg. That should not need many levels of sub-headers.

Videos can be use instead of featured images to begin posts, which are also shown full-width (and are responsive; not a terribly easy trick). We will rule out having text in the featured images to avoid the ‘double headline’ issue. If a featured graphic has to appear with text, the text will appear in a sans-serif font, and to the left or right of other elements in the graphic (not above or below). This way, the text will be visually distinct from the article headline and content.

Left: A featured image with text above the graphic is visually confusing. Middle: A featured image with text to the side of a graphic in a sans-serif typeface is less confusing, and occasionally acceptable. Right: A featured image without any text is best.

Left: A featured image with text above the graphic is visually confusing. Middle: A featured image with text to the side of a graphic in a sans-serif typeface is less confusing, and occasionally acceptable. Right: A featured image without any text is best.

I developed the theme on top of Bootstrap. This helped me make it responsive with minimal effort. The theme also generates social sharing links for each post, showing them under articles. Finally, I hooked all the features of the design in to the WordPress post editor and admin pages. This allows us to take advantage of the design’s elements without having to memorize a ton of short codes.

I hope you enjoy our new blog design as much as I enjoyed creating it. It clears up a lot of the visual confusion that came with the old design. And I hope it encourages us to write posts like this one more often. Until next time.

Mail Pilot has landed on the Mac App Store

in Announcements

BlogHeader2

Mail Pilot has officially landed on the Mac App Store℠ with limited time introductory pricing. After months of beta testing with nearly 30,000 users, our testers have made it clear that this task-oriented email app is the future of email on the Mac.

Complete Your Messages

When you’re done with a message, simply change its status from Incomplete to Complete, just like a to-do list. Gone are the days of tricking your email client by marking as unread. Quickly check off messages that don’t require any action after reading them, and keep track of messages that still have outstanding tasks.

Complete your messages in Mail Pilot just like a to-do list.

Complete your messages in Mail Pilot just like a to-do list.

Set Reminders for Messages

Set a reminder for a message and Mail Pilot will prompt you when it’s time to deal with it. Free your inbox of messages you can’t yet tackle, and be reminded when deliveries are arriving, bills are due, meetings are coming up, and other due dates are approaching.

Reminders help you keep track of bills, deliveries, meetings, and other due dates by pushing a message to the top of your inbox on the day you set. The message is removed from your inbox until then to reduce clutter.

Reminders help you keep track of bills, deliveries, meetings, and other due dates by pushing a message to the top of your inbox on the day you set. The message is removed from your inbox until then to reduce clutter.

Organize Your Way

Become better organized with the flexibility to craft your own productive workflow. Organize based on message status as Incomplete, Complete or set for Reminder. Collect groups of related messages across all of your accounts using Lists. Folders and labels can be accessed and utilized anytime. Set Aside for Later Easily achieve Inbox Zero. Set Aside messages that can’t be organized immediately and drill through them when you have more time.

Simply Compatible with Your Email Accounts

All standard IMAP accounts are compatible, including Gmail, iCloud, Yahoo!, AOL, Rackspace, Outlook.com, and Google Apps. Mail Pilot remains securely synchronized with your email servers and other clients.

Secure & Private

Mail Pilot never stores, processes, or transmits your data through third-party servers. Your account details, passwords, and personal data are securely stored on your device. All communication occurs directly between your device and your email server.

Unveiling Mail Pilot for Mac: Task-oriented email comes to the Mac

in Announcements

After months of crafting and development, we’re excited to share what we’ve been up to. We’ve tailored Mail Pilot for Mac to be intuitive yet powerful. Mail Pilot beautifully complements your Mac desktop with its clean design and native functionality.

Crafting of Mail Pilot for Mac: A behind-the-scenes look

Experience intuitive email with a simple, task-oriented approach.

  • Complete Messages: When done with a message, simply change its status from Incomplete to Complete, just like a to-do list. Gone are the days of tricking email clients by toggling read/unread.
  • Set Reminders for Messages: Set a reminder for a message and Mail Pilot will prompt you when it’s time to deal with it. Free your inbox of messages you can’t yet tackle and never miss a due date again.
  • Organize Your Way:
    Organize based on message status as Incomplete, Complete or Set for Reminder.Collect groups of related messages across all of your accounts using Lists.Easily achieve Inbox Zero. Set Aside messages that can’t be organized immediately and drill through them when you have more time.Existing folders and labels can be accessed and utilized anytime.

Introducing Push to Mobile & Push to Desktop

Deal with email when you want to, where you want to. Make sure important messages are where you want them when you need them. Push meeting details to your phone so you can reference them on your way. Push the message requesting a PDF to your desktop, so you will remember to send it along next time you’re at work.

Keyboard Shortcuts

Keyboard shortcuts are a first-class feature in Mail Pilot for Mac. We’ve made it incredibly easy to drill through your inbox without touching a mouse. Keeping your inbox clean by completing your messages and setting reminders has never been easier.

Nested Threading

Find clarity in long conversations. Mail Pilot for Mac’s intuitive nested threading provides context within the chaos of a threaded message. Easily browse, filter, and navigate any thread.

Beta Kickoff

The beta is beginning this week! If you haven’t already signed up, sign up now.

Find out more at the new Mail Pilot website.

As always, feel free to Tweet It!

Mail Pilot for Mac Beta Sign Up

in Announcements

MacBeta4-blog

Mail Pilot, the email application that has seen major success for iPhone® and iPad® over the last 6 weeks, is officially coming to Mac®! We’ve spent months crafting an intuitively productive email experience for the desktop, and we can’t wait to reveal what we’ve been working on.

Public Beta Sign-ups Now Open

Be among the first to experience Mail Pilot for Mac by signing up for our public beta. We can’t wait to get your feedback on the tailored desktop experience and several new features debuting with Mail Pilot for Mac. We’ll let you know the moment it’s ready!

Mail Pilot launches in the AppStore

in Announcements

MailChimp-Header4b

Mail Pilot for iPhone + iPad introduces a new Mail Pilot experience without the third-party server, and without the subscription pricing. Mail Pilot for iPhone + iPad is the most stress-free, context-friendly, automated, and sensible email experience to ever hit a mobile device.

Complete & Incomplete – Clarity and control over your email

Email is action based. Mail Pilot turns your inbox into a to-do list. All new messages arrive as Incomplete. Once you finished any tasks, mark a message as Complete and Mail Pilot will archive it.

Review on a Date – A stress-free, automated email experience

If a message should be dealt with on a future date, assign it for review on that day. Mail Pilot will push the message to the top of your message list when you want to take care of it.

Lists – Focused & context-friendly without hassle

Collect related messages from multiple accounts in Lists. Easily manage all newsletters, combine social media notifications, or centralize messages regarding an upcoming event.

Security & Privacy – Experience better email, without compromise.

Your account information, passwords, messages, and contacts are securely stored on your device. All communication occurs directly between your device and your email service provider using the highest encryption provided by your email service. Mail Pilot never stores, processes, or accesses your information on any third party server.

Compatibility

Mail Pilot works seamlessly with all IMAP email service providers. You can always access and use existing folders. Mail Pilot stays in sync with your email servers and all of your devices.

Read more »