Posts About Business and Startups

Foundation 5: Almost Here, and Sweet for Large Teams

Ghaida wrote this on November 20, 2013 in . It has 15 comments.

Foundation for Large Teams

Foundation 5 is upon us (like, tomorrow), and it is a faster, stronger, better Foundation. That's great for the millions of designers and developers using it in their workflow. More users mean more exposure to a different type of user — a type that is often overlooked by framework designers.

Larger teams have different needs from a lone designer or developer. There are a lot more variables for them to juggle: many people, each with their own goals; dealing with rigid business goals; and dealing with legacy code.

We're addressing those needs with Foundation 5 and beyond in several different ways, each focusing on a particular problem. We've kept Foundation true to its core value — to be a smarter way to code.

A Culture of Smart Coding

Create a culture of smart coding in your company. Foundation is mobile first, and coding the Foundation way will introduce your team to better coding practices resulting in leaner, meaner, code. We've seen this first-hand with larger teams and companies.

For example, we recently helped a client wireframe their entire application, some 50 unique screens, with Foundation. And that gave their development team a common starting point to build upon. The bonus: It helped them put together all the interactions and workflows within a short period of time. Which allowed them to focus on iteration and design problems rather than putting an interface together.

But it's not just our clients. We're seeing large organizations, such as the Washington Post, adopt Foundation. The Post uses Foundation to help them prototype and cut out day-to-day drudgery, such as not having to start from scratch each time they build a site. But it's also taught their front-end developers to write better code, Mobile Design Director Joey Marburger told us. Developers can work on shared code and trust that it'll work. It's allowed the paper to establish better development standards for both prototyping and building products.

How Foundation Fits Within ZURB

A framework, such as Foundation, is crucial for a company like ZURB. Why? Because it allows our business to build consistency in how we approach our development effort. Here are some ways it's helped us.

It gives us a framework to rapidly prototype our products and ensure they work across devices.


wired

Our team and volunteers using Foundation during this year's ZURBwired.

We use Foundation for our yearly 24-hour design marathon, ZURBwired. During the event, there's a cadre of volunteers that works alongside our team. Foundation becomes the common glue that allows us to quickly jump into pages and commit code. With the framework, we're able to move swiftly from sketch to prototype to production code without missing a beat.

Our consistent code base reduces our overhead so we don't have to maintain code for separate mobile and desktop sites.


We'll admit we're still moving to a mobile-first approach across our projects. While it's not always possible, the fact that Foundation plays nicely between screen sizes is huge for us. It's easy for us to switch between a mobile-first approach and designing from desktop down.

Finally, Foundation also brings standards in the way an organization QAs their products.


QA spreadsheet

Our QA spreadsheet for the Foundation 5 marketing site and docs

We battle test Foundation daily at ZURB on every client and internal project. From code to QA, we've been able to create consistency in our process. In fact, we're in the midst of that process right now as we work to get Foundation 5 out the door. When 10 people are working on QA, it makes it easier to understand the issues. For Foundation 5, we have a large spreadsheet that people can easily follow and contribute to (see above).

Those are some of the ways Foundation has helped us out. We'd love to hear how your organization is using Foundation and how it fits in your workflow. Hit us up at foundation@zurb.com. Stay tuned for the release — it's gonna be a blast!


We Feel the Need ... the Need, for Speed: What's Ahead for Foundation 5

Jonathan wrote this on November 13, 2013 in . It has 44 comments.

You've probably noticed that we're kind of big on responsive design here at ZURB — we've written about it, talked about, we wrote the first framework for it. On top of all that, we design responsively for just about all of our properties and clients. As big as we are on responsive, and as prevalent as responsive design has become recently, it's important to remember that responsive design isn't old.

Ethan Marcotte's article on Responsive Web Design for A List Apart is about three-and-a-half years old now and while that may seem like eons in Internet time, in real world terms that's not a whole lot of time. And certainly not for an entire industry to catch up. Responsive design is still catching on, and being explored while being defined to a large extent.

If you take a look at the top 20 worldwide sites according to Alexa, only one (Wordpress.com) is responsive. While some have mobile sites they direct you to, responsive, device-agnostic sites are not ubiquitous yet and that's okay. We still have some things to figure out.

Patterns, Practices and Patches.

We do have a lot more toys for responsive design than we used to. Frameworks have popped up (including our own — one of the first), pattern libraries have been created. Most of the technology has been put in place within industry specs and browsers to ensure that responsive design works well and solves real problems for developers and users.

Responsive design has even driven interaction patterns that have become common for responsive and even non-responsive sites. Things like off-canvas navigation and the now common "hamburger" icon were either developed for, or popularized by, responsive design and sites using that paradigm. So what's next? What's missing?

Speed, Baby. Speed.

Everyone likes fast stuff. Well, almost everyone. And responsive design, for all its awesome qualities, does suffer from a speed problem — and not just speed of delivery to users. Responsive design does have speed of delivery (read: optimization) issues that are starting to be solved, and we'll talk about those, but we're also talking about speed of development and speed of responsive design education.

The rate of advancement on the Web is accelerating (in stride with the pace of the Web) and in order for us to keep up we need to pick up the pace in all aspects of what we do. We need to discover new tech faster, get it built quicker, and get it to users sooner. That's part of why we built Foundation; to learn responsive design faster and to build things faster. How else were we going to hook our clients up with some sweet device-agnostic sites? Foundation was, and is, a way to standardize around a consistent, effective codebase — something we and others, given the framework's popularity, needed.

Foundation 5, the latest version of our responsive front-end framework, comes out next week — and with this release, speed was the name of the game.

The Fastest Foundation.

Foundation 5 is fast. In all the ways we've been talking about. Check it.

Faster to Learn

For 5, we've worked hard to make Foundation as fast and easy to learn as we could. Starting with the most obvious learning component of any open-source tool, we rewrote the documentation for Foundation with an all-new style and template. There's new and more detailed code examples with entirely new sections that you can browse through and just take it all in.

We also wrote a new "Getting Started" guide that'll take you from having nothing set up to having a complete Foundation environment to build or hack on. We've always had a "Getting Started" guide; but this one ought to help you really get started. Crazy right?

If you have questions about Foundation we're also finishing up a brand new Foundation Forum where you'll be able to post questions, get help, and provide help to the entire Foundation community. We'll be on there, too, answering questions and posting funny cat gifs.

Finally, if you really need to get going in a hurry, we now offer training courses on Foundation as part of our ZURB University. Foundation Basics, Advanced Foundation and Sass are all courses you can take to learn all about how to build with Foundation, right from the horses mouth (the ZURB team that built the framework, including yours truly). And it's an act we'll be taking around the world soon. It's pretty rad.

Faster to Code

While we enjoyed making Foundation faster to learn, we have to write a whole lot of Foundation code here at ZURB. That means making it faster to write was pretty near and dear to our hearts so we bet you'll like it too.

We've added new or updated components that remove some of the manual work you had to do before, including a medium grid (which won't require you to use custom breakpoints and media queries for that) and semantic breakpoints (much easier and faster to use visibility classes and mixins).

We also built all new templates for Foundation 5 so you have a speedy starting point for your projects, if you like that sort of thing. They're all mobile-first, all documented and totally easy to change.

Finally, for the nerd in all of you, we've built a new command line tool that will let you spin up Foundation projects preposterously fast, and those projects will now use Libsass, a back-end Sass compiling library that will dramatically speed up how long it takes for your SCSS changes to take effect while you work.

Faster for Users

If we're writing a lot of Foundation code (and you are too), just imagine how much that code is being delivered to users. Foundation powers hundreds of thousands of sites, and the time and bandwidth required for that in aggregate is pretty extreme. We worked diligently in this release to try and streamline the framework as much as possible, and to give you the tools to optimize your sites like you never have before.

Interchange, our responsive images plugin, has been augmented in Foundation 5 to allow for a whole new level of responsive delivery. In addition to delivering just the right image, you can now use Interchange to deliver entirely different sections of the page to different devices. Just create some different HTML partials and have Interchange swap them in for the right type of device. Want to deliver an interactive but heavy-load Google map to desktops, and a small, optimized image to everyone else? No problem with the new Interchange.

On top of that (and that's a big that) we've also added a ton of support in Foundation for hardware acceleration wherever possible. Smoother animations and transitions across the board that use less power on devices and feel dramatically faster for users. That's a win.

We even redid Foundation's visual style to be simpler, cleaner, sexier and faster to restyle — all with fewer CSS rules and effects to burden devices or the style sheet.

Must Go Faster, Must Go Faster.

There's a lot more to Foundation 5 than speedy things alone, but that was a big focus of ours. Speed is the next great opportunity for responsive design: speed of education, speed of development, and speed of delivery / use.

Many of the most popular sites in the world are not responsive, in fact many have no consideration for mobile at all. Responsive design is, in a lot of places, still ill-understood, slow to learn, cumbersome to write and challenging to test.

Beyond the challenge of just creating responsive site, consider this: the average mobile broadband speed in the US is only 2.8Mbps, compared to a little over 8Mbps on wired or fixed devices. While the US is certainly not the fastest country around for mobile or other broadband speeds, it's still in the top 10. In fact, the global average connection speed is 3.3Mbps, just a bit faster than the average mobile speed in the US.

If Foundation 5, along with other responsive frameworks, can help speed up education for this style of design, we're making serious progress. This will speed up development for small and large businesses and help users get better tailored, readily available, and better designed sites — which sounds like a win to us. Stay tuned for Foundation 5 next week, we hope you like it.


Introducing Ink: Our New Responsive Email Framework

Eric wrote this on November 07, 2013 in . It has 13 comments.

Illustration of Ink's mascot: Inky the octopus

We've been taking about the importance of responsive emails for awhile now. With over 40% of emails opened on a mobile device, we knew ensuring our emails looked good on any device was imperative. Iterating and improving our emails is something we've been working on since last year. And we've been teasing that a new solution was coming. Well, today's the day! Ink, our brand-new responsive framework, is finally here.

What We Learned Building a Responsive Email Framework

Ink's development started when we released our responsive email templates last year. We were spurred by our growing mobile readership. Originally, we didn't support Outlook in our templates, but we realized we were cutting off the second largest email client market share. Let's delve deeper into the lessons we learned whilst building Ink.

1. Flexibility is Key

Ink is a framework, not a template. Templates are the most popular approach to responsive emails, but they're not very flexible and have many limitations. We didn't want those constraints. We needed flexibility and a framework provides that. Ink uses a 12-column grid for maximum divisibility — you can divide the grid into one, two, three or four columns. Originally we planned to use a four-column grid, but found it hampered our flexibility. To give folks further flexibility, we also included UI elements — buttons and panels — that designers use frequently. But they're completely customizable to suit any design needs.

But Ink is more than a framework. It's a process that creates conventions for organizations and developers to adopt that creates consistency in the way emails are developed.

Illustration of email fish swimming towards the outlook logo. No, really.

2. Outlook Still Matters

Outlook still has significant market share, and people kept asking when we we would to support the second-most email client. Technically, Outlook is the most limiting email client — it doesn't support max-width: 100%, for instance. Focusing on the client's constraints forced us to consider the hard questions early in the design process. It had us designing Outlook First before enhancing the mobile experience by layering in media queries. And Ink allows you to reasonably support Outlook with fixed-width, as opposed to fluid, desktop layouts and media queries to target small screens. (Of course, you'd want to test it in a service like Litmus to make sure it looks swank on various clients and devices before sending it out.)

3. Media Queries are the Future

We struggled with ways to best support Gmail mobile. We ended up offering a non-media query solution, i.e. block grid, though the media query approach is still preferred. This caused a lot of headaches, so we built our own inliner to let you place CSS inline for better Gmail compatibility. As we move forward as a community, things will move toward better media query support.

Email Anywhere. On Any Device. On Any Client, Even Outlook.

Ink allows you to create emails that work across devices and email clients, even Outlook. Our responsive framework has a 12-column grid that blends flexibility and stability so you readers can view your application updates and newsletter from wherever they may be. There's five easy steps to get started with Ink:

  1. Test in Outlook — Outlook is your best, worst enemy when it comes to responsive emails. Make sure it looks great there before moving on.
  2. Add your responsive styles — Include any responsive styles you want to include.
  3. Bring your styles inline — Include everything looks great in Outlook, bring your style inline using Inky's inliner.
  4. Test your email — Don't ship just yet. Use a testing tool like Litmus to test on a number of devices.
  5. Send it out — Your email is ready. Sally forth with it into the world.

So what's in Ink? Let's delve a little deeper into it's features:

  • Ink uses a 12-column, media-query-based grid with a 580px wrapper. On mobile devices, under 580px, columns become full width and stack vertically.
  • There are UI elements like buttons and panels for rapid development.

We also provide templates to get you started, such as:

  • Basic — perfect for sending out basic but good looking emails
  • Hero — allows you to put a snazzy hero image in your email
  • Sidebar — includes a sidebar area for a list of links
  • Sidebar Hero — this combines the sidebar and hero templates
  • Newsletter — create newsletters with ease

Even though we include templates to get started, you can build your own using Ink as the framework. The best part? Ink works across all the major email clients:

Client/Browser Supported Issues
Apple Mail (Desktop)
Apple Mail (iOS)
Outlook (2000, 2002, 2003)
Outlook (2007, 2010, 2013)
Outlook (2011)
Thunderbird
Android
Gmail (Desktop)
Gmail (Mobile Web, iOS, Android) Since Gmail doesn't support media queries, users will be presented with the desktop view. If mobile Gmail is a large part of your audience, we'd suggest using a layout based on the block-grid.
AOL Mail
Hotmail
Outlook.com

Send Out Responsive Emails With Ink!

Ink is open source, and will serve as a collection of best practices as the community develops it. Our responsive email framework gives your templates a very robust base that's tested across the major platforms/clients.

Check out Ink


Responsive Email: Building a Framework in a Template World

Eric wrote this on November 06, 2013 in . It has 1 comment.

lego framework

We've written before about the importance of responsive design for email. With over 40% of emails being opened on mobile and 80% of mobile users saying they'll delete an email if it doesn't look good on opening, it's pretty evident that mobile can't be ignored, even in the table-ladden pain in the butt that is email.

There are two main methods of creating responsive emails (other than hand-coding each one individually): templates and frameworks. Both offer the advantages of making your content available to audiences on a number of different platforms and clients, but take very different approaches.

Templates: Attack of the Clones

Templates are by far the most popular approach, with many options out there to choose from. They're quick to implement, require little technical know-how to set up and can lead to decent results with minimal effort. Because templates only have to accommodate a single layout, they're not very flexible, but do their one job fairly well.

One-off templates have many limitations. Templates, by nature of their construction, don't necessarily allow for a lot of customization. As a result, their lock-in cost is fairly high (good luck trying to turn your two-column template into three), and cookie-cutter templates tend to make everybody's emails look the same. The numerous tradeoffs involved with using templates are why we chose frameworks as our current responsive method of choice.

Frameworks: A New Hope

"Framework" is a rather broad term, and one which people often used somewhat ambiguously. As we define them, frameworks are collections of reusable code and design patterns that give users a solid, tested base on which to build. Ideally, frameworks should speed up the initial coding of a design without forcing the user to use one particular layout or visual style.

In addition to laying out what a framework is, it's pretty important to establish what a framework isn't. A framework isn't "design in a box" or a quick fix. You can't just bolt one on top of an existing design and expect responsive, pretty results. Frameworks also don't have to completely depart from your current style (though they're a good way to get a fresh start). A good framework should be flexible enough that you can recreate (or come close to) an existing layout or visual style.

Why Frameworks are Right for Us

While frameworks require more up-front work than simply modifying a template, we feel strongly that they're the right approach. We've invested a lot of time and effort into what we see as a long-term play. Consistent code structure and styling will make modifying our layouts easier in the long run.

Not only does consistent code style make jumping into a framework easier, but basing it on a framework's functional principles, rather than an opinionated style guide, makes its code much more intuitive. This intuitive consistency makes it much easier to collaborate on our code, even when we bring in new team members. On top of that, when we want to experiment with new layouts, we know that we have a solid base behavior and consistent rendering on all clients, instead of having to reinvent the grid every time.

Building Our Own Framework

Ready to fully buy into the idea of building our emails on a framework, we excitedly rushed to the internet, only to find that … well … there aren't any responsive email frameworks that live up to our expectations. We wanted something that was fully responsive (obviously), easy to understand, flexible to build with and looked great on the latest, greatest retina screen iOS devices, without sacrificing support for our email subscribers who use Microsoft Outlook (or other, ahem, limited email clients).

Disappointed yet determined, we decided to build our own, and are all the happier for it. We're a group of passionate experts who live, breathe and design responsive. We have a strong track record of building and supporting great open source frameworks. Building on top of our previous success in responsive emails, we're excited to announce our brand new, super-duper responsive email framework, affectionately known as Ink, which launches soon (like soon).

Don't Just Build — Create

Ink is the first responsive email framework of its kind, and will make it easier than ever to build beautiful, functional emails that look great on any client (even Outlook). This framework is a bit more work to build a layout on top of Ink than to just drop your content into a pre-made template, but Ink offers a level of flexibility and code consistency that is unmatched by any template. Ink lets you focus on designing the best experience for your users and creating meaningful, engaging content, instead of spending all your time perfecting your low-level implementation details.

Get Ink Updates


Over 40% of Emails are Opened on a Mobile Device

Ryan wrote this on November 04, 2013 in . It has 6 comments.

A little over a year ago, we started to notice that more and more people were reading our monthly email newsletter on their mobile devices. With a growing audience of readers on-the-go, we made our email newsletters responsive. And that mobile readership has only grown since then — now nearly 50% of our readers open our emails on a smartphone or tablet.

checking email

We took what we learned and released a series of responsive email templates, but they didn't get along with Outlook. Now we're poised to release a new responsive email framework that's Outlook-ready. But why all the fuss with email newsletters that work across devices? Well, the facts are just too hard to ignore. Let's take a look at a few of them:

Marketing platform Knotice conducted a study that revealed: more than 20% of emails sent in the first six months of 2011 were opened on a mobile device. The same study also found that since the fourth quarter of last year, mobile shares of email open rates increased by 51%.

Knotice wasn't the only ones to notice (pun fully intended) the trend. Return Path, another email service, predicted that mobile would leave web and desktop email client usage in the dust by July 2012. But it happened a heckuv a lot sooner and they found that 35.6% of all Campaign Monitor emails were opened on an iOS device.

So mobile is a thing. And it ain't going away. Our audience is mobile and we need to be as well.

Mobile Triage is a Myth

It's a myth that people use their phones or tablets to triage their email. Litmus, which allows you to preview your email campaigns, found that 2 to 3% of emails are opened on two different platforms. They also found that fewer people tap through on mobile, but open rates are high — 55% compared to 43% on desktop.

But there's good news. When it comes to checking their emails, 43% of mobile email users do so four or more times a day. And a stunning 43% of all email opens occur all on mobile devices, quickly overshadowing desktop.

We Need a Framework, Not a Template

Since we launched our templates last year, we've worked hard to develop the content that goes into an email newsletter. We realize that marketers need to worry less about technical gotchas and more on the content. A responsive email framework helps with that more than a template could. Ink, which will be released soon, is a framework, not a series of templates. Think of it as Foundation for emails.

A responsive email framework is imperative. More and more of our audience is mobile, and that's only going to grow with the proliferation of devices. Consider this last thought: emails have led to more conversions than Facebook and Twitter by 7%. That's something we can't pass up. And this is how we have to think about emails now.


What Your Footer Says About Your Business

Alina wrote this on April 12, 2013 in . It has 3 comments.

You can tell a lot about the health of a business from its footer. Sounds crazy? But it isn't. Our footer has and continues to evolve along with our business.

Think about it. Your footer is the last stop on your page, where you can snare the attention of visitors before they bounce somewhere else. What goes into it says a lot about how you want to connect with your viewers, or how you want them to connect with you. And as you grow and change, so must your footer. Here's how we've changed our footer over the years to meet the needs of our evolving business.

Reflecting Changes

Our footer didn't change too much from 2008 to 2012. We were in a good place and we felt comfortable about who we were at the time. Check out our footer from 2008:

It's very basic. We emphasized our contact information: phone, email and signup for the newsletter. At the time, we were focused on perfecting our design process, and this footer was all about brining in business. But we were also poised to expand our reach.

We charted a course into product in 2009 with Notable, our first app. It was early days and we were going through the expected growing pains of launching a first product. However, our longevity helping other companies and startups put us in a good place to overcome them.

Evolution came as we launched other products, such as Solidify and Verify. We were now putting together a product suite. Our footer had to reflect that, because we weren't just trying to validate our product — we were really putting an emphasis on marketing them. Below is a footer from Notable where we first talked about a suite of apps:

Telling A Story

Footers must also match your business goals. Early 2012, we relaunched ZURB.com with a brand new look and a splashy footer. Content-wise it was mostly the same — still largely geared toward generating leads for our services — but with more emphasis on personality. After the success of proving ourselves with our own products, we wanted the world to know what it was like to work with us.

But by that time we were so much more than that. Foundation was gaining speed as were the improvements to our product suite. Our educational and training channel, Expo, was growing with new materials. We thought about our ever-growing property tally and our future. How was this all tying together? What was the story being told?

Tying It All Together

We spent many months last year figuring out who we've grown to be and how we can clearly tell the story that had emerged. Here's what we came up with:

We've pared down the top of the footer to the essentials about the properties and the most vital links. Plus a means to get help. It really covers the gamut of what users need without being too verbose, too heavy footed. The bottom is devoted to ZURB, who we are as a whole, and lets visitors into the rest of our awesomeness. And it's something you'll start seeing live on the site really soon.

With our snazzy new footer, we've developed a pattern that tells our story and works across our property spectrum. We've come a long way and we're doing big things. We were taking a stand, marking the four pillars of ZURB: Services, Foundation, Products and Expo.

Footloose and Fancy Free

A footer says a lot about your business. It says much more than the health of your company. It says who you are. And it must evolve as you do.


4 Pitfalls That Stifle Good Product Design Talent

Ryan wrote this on April 11, 2013 in . It has 4 comments.

It's been a couple of weeks since we released our Job Board out into the wild. We learned some valuable lessons on hiring product designers from it. And we continue to learn more as we go. We mentioned during our launch that we did a survey asking designers what they did not want in a job. Today, we want to share our final findings.

We've worked with many designers over the past 15 years, learning what drove them. But we dug deeper whilst putting together our Job Board. We did an initial survey on what they were exactly looking for in a job and found the following made them happy:

  1. Passionate co-workers.
  2. The type of projects they worked on.
  3. A strong company culture.
  4. A flexible work schedule.
  5. A company with vision and goals.

We followed up with another survey of 80 designers. And they gave us what turned them off in a job. Here's what we they said.

1. Designers Don't Want to Be Micromanaged

41% of designers said they don't like meddling mangers. We've found over the years that designers like some autonomy in decision making, the ability to solve problems on their own. They like to have breathing room to make mistakes, to fail fast, so they can quickly achieve wins. It gives them a sense of ownership about their work. Too much bureaucracy can kill passion for a project. But this doesn't mean that designers should be left adrift, rudderless in a sea of work.

Designers need feedback in order to become successful. What's needed isn't a tyrant telling them what they did wrong, but a coach who asks questions and challenges assumptions. A micromanager is the opposite, someone who gets their hands on everything because they don't have a clear sense of objective. A good coach can rally a designer far better than a dictator by providing clarity on expectations.

2. Designers Want to Avoid Places with Dispassionate Workers

Another 41% of designers wanted to avoid jobs where their co-workers were apathetic to their work. It probably goes without saying, but might be worth repeating, designers like to be engaged with their work and those they work with. Dispassionate co-workers can quickly poison morale, their attitude spreading like a zombie virus.

No one wants to work anywhere where there's no clear vision, no shared goal. Everyone wants something to muster behind. Without that, companies can falter and bled away any passion in their workers, much like Yahoo during Brad Garlinghouse's tenure when he wrote his Peanut Butter memo. A focused, cohesive vision can be preventative medicine for apathy.

3. Designers Don't Like Cold, Sterile Workplaces

40% of designers disliked bland, corporate environments. Collaboration and creativity can evaporate in the shackles that come with cubical dwelling. Designers, and other workers, would much prefer environments where they contribute to a community, which allows them to act naturally. And that's a boon for creativity.

Our own offices are open with large windows that allow natural light to flow through. It encourages collaboration because we aren't separated by artificial barriers. Chance conversations can lead to solutions to complicated design problems. But those can't happen in environments lacking any personality.

4. Designers Don't Care for Office Politics

39% of designers despised politicking at the office. We avoid this by having a frictionless environment with a flat-structure where everyone can contribute and aren't bound by bureaucracy or overrun by middle management. And that also boils down to ...

Having a Strong Culture

Our culture is our glue. It's what binds us and allows us to be willing to have each others backs. Each of us are T-shaped with strong core skills but able to work across the business to help solve difficult problems and achieve wins for one another. These four pitfalls can be avoided by creating and sustaining a strong culture. One that allows for autonomy, for passion to be expressed, for collaboration to happen and for everyone to work as a solid team. Create that and awesome things will emerge.


6 Ways to Recreate Your App in an Email

Kelsey wrote this on March 27, 2013 in . It has 1 comment.

We've been having a lot of conversations lately at ZURB HQ about mobile. Occasionally, our conversations come back around to Email. Sure, when it comes to the internet, we hang out in various apps and sites like Facebook or Twitter, but where is it we actually live? Email.

Which is why we realized that we have to provide a valuable email experience for people. We have to offer a pleasant interaction. At the same time, we have to be able to create an actual extension of our products. We had to ensure that email is the first service our apps are efficiently integrated with, particularly when it came to Notable.

Here at ZURB, we set out to give our customers a reason to love their email notifications from our app, Notable. So what determines an effective email experience for people using your apps and what really are the best ways to make that happen? Here's what we've learned:

1. Design Mobile First

First, you have to think about what your user is doing when they open their email. A customer could be anywhere from sitting at their desk or waiting in line at the grocery story when a notification hits. We've found that at least 30% of our customers were opening their Notable newsletters on a mobile device. Knowing this, it's crucial to design emails Mobile First. Check out how we put together our Mobile First emails for Notable:

There's one important thing we've found and try to remember. When working from a mobile device, people really just want to stay at their home base and don't want to be forced to hop around from one app to another.

2. Make the Content Count

Every single email that goes out should have one, very clear call to action but still allow for the user to decide what they want to do. This allows us to create compelling content while still allowing the user to remain on the same screen. The shot below showcases this. It shows the exact note left on Notable with the clear action of "view and reply." But now the Notable customer can determine if they need to responde to the newest comment or let it wait.

Essentially, we want to give people enough information so the decision to take any in-app action is directly placed in their own hands. Showing users as much information as possible in one place is how we achieve this. When it comes to creating an email, we wanted to:

  • Clearly show the reader what type of update they're getting
  • What item the update is referencing
  • All of the available comments and/or notes that are relavant at the time

Once the email has been read, the user has all the information they need and can decide where to go from there. Forcing a click over to the app could actually curtail engagement if someone isn't able to see what they're even looking for in the first place. Or even if they just don't have the time.

3. Write Clear Subject Lines

Another thing to keep in mind is the actual audience of your emails. A clear subject line is more likely to engage someone than an elusive one that just makes mention of your app. By doing so, you'll also allow people to create and apply organizational filters. In other words, you'll be fitting into their workflow rather than imposing upon it.

Additionally, grouping similar updates under the same subject can be a huge benefit. Many email clients will automatically group emails by subjet or by custom configuration, making it so much easier to manage multiple updates. One last thing to note, especially since there are still some email clients that remain text only, you should also include a plain text option, even if only to say "Hey, there's an update!"

4. Let Them Control the Frequency

Lastly, limit emails to one per task. This actually lets people use their emails as task items for later review. For those who don't need this feature, they should have the option to filter or even shut off these emails. Notable lets each account holder to determine the frequency of their notifications, which is great because everyone ha different preferences and means of organizing their emails.

5. Take Note of How Others Do It

There are other apps that have done a great job of integrating their emails — take a look at your notifications from Facebook and LinkedIn, for example. You get the valued information that you need regarding a specific update that occurred. However, they both still encourage a click over rather than letting you decide if you need to click over and take a look.

And if you don't have the time what's the most likely reaction? You're just going to read the email notification, delete it and then (probably) forget about it. This is exactly what we don't want to happen for our Notable users and, again, why we were so adamant on creating an unbeatable email experience for them. An experience that extends the app and keeps the entire procedure as fluid as possible.

6. Recreate the App Experience

As we said, forcing someone to click over can seem rather forceful, not necessarily creating a positive interaction. And what we've been saying throughout our tips is that you really have to replicate the same experience on email as your customer would have with the app. Recreating the app experience in an email allows you to provide valuable content and not just drop an alert in someone's inbox.

If you're able to provide all the value from an update in an email, then you should do it. Just like when we read our mail at home, we have the option to pay that bill now or come back to it later. After all, why shouldn't we have that same luxury when it comes to our email inbox regardless of where we are.


4 Lessons Learned on Hiring Product Designers From Launching Our Job Board

Ryan wrote this on March 22, 2013 in . It has 1 comment.

Today, we're excited to finally unleash our Job Board out into the wild. For the past year-and-a-half, we've talked to folks about how incredibly hard it is to hire great product design talent. It's thrilling to be able to finally launch our Job Board and expose companies to our network of 450,000 product designers, including those on Forrst and Pattern Tap.

With our listings viewed over 6 million times, we knew it was time to flip the switch and let this puppy loose. But we needed the private release to figure out what it really took to hire a product designer or engineer. We learned some valuable lessons and we wanted to share those with you.

1. Designers Want to Work With Passionate Co-Workers

We really looked into what entices a potential candidate during our private release. After all, we'd been on the hiring side when it came to brining on new ZURBians. What makes a candidate passionate about working for a company? What draws them in? More than that, what will sustain them when their workload is heavy and they have pressing deadlines?

We knew from experience what drove our designers. But does every designer think the same? Is it something that was universal? We decided we needed more data and surveyed some 120 designers. We asked what were the top five workplace factors that contributed to their happiness. The numbers were very telling and validate a lot of what we've long believed. We found they valued their culture, their co-workers and the projects they work on. Let's take a look at the top five:

  1. Passionate co-workers: 46.7% of those surveyed wanted their cohorts to have passion in what they do.
  2. Projects: 42.7% said the types of projects they work on contribues to their happiness.
  3. Company culture : 39.2% felt a strong company culture made all the difference.
  4. Flexible working schedule: 32.5% said being able to take time off when needed was important.
  5. Company vision and goals: 28.3% valued a company's vision and goals.

Knowing what designers want, what is important to them is crucial no matter the size of the company or what industry you work in. These are the things we take into consideration when looking for candidates and something that has driven our approach on our Job Board.

2. Designers Want to Avoid Companies With Dispassionate Co-Workers

We recently looked into what designers weren't looking for in a job. Although our data is still preliminary, here's what we've found so far. And some of the results were very much the anti-matter version of the top five factors that made work enjoyable. Let's take a look at the top three so far:

  1. Co-workers without passion: 42.4% said they didn't like it when their co-workers were apathetic.
  2. Office politics: 40.7% didn't like when politicking goes on.
  3. Micromanaging: 39% dislike being micormanaged.

We're still in the throes of conducting the survey and we'll follow up with the final results soon.

3. Videos Help Increase Engagement

Our friends from Inflection participated in our private release, posting a job and while it did fairly well they decided to repost it. This time they made one change — they added a video about their culture. Less than week later, something amazing happened, something that made us go, "whoa!"

The time potential candidates spent reading the listing skyrocketed. They spent 3:04 minutes reading the listing, 53 seconds more than before. Not only that, but the bounce rate dropped, from 83% to 74%. But it wasn't just that they slapped a video up and called it a day. Inflection spent the time giving folks something of value, a video that really highlighted their company culture and outlining exactly what the company's vision is. It was the perfect compliment to the listing, giving potential candidates a real sense of where they'll be working and who they'll be working with.

4. No, Really ... Well-Written Posts Entice Potential Candidates

We've seen a lot of job postings elsewhere that lacked any spark and didn't seem to be interested in connecting with potential candidates. We found them a bit lackluster. Which is why we worked to tailor all job posts to fit our audience and the Design community. Here's what we learned from the editorial process:

  • Don't start off with the job right out of the gate. You've got to start off with an introduction. Tell potential candidates a bit about who you are, what your mission and vision is. Most of all, highlight how you're going to work together.
  • Don't be photo shy. Photos are a great way to illustrate your work environment and culture.
  • What do you bring to the table.Just as important as the job requirements is telling a future employee how they'll be rewarded for their hard work.

We even put together a Notable post to help show companies what goes into making a great listing. A well-written post can make all the difference in the world. If a potential candidate isn't snagged in the first few lines, they may never apply. We even took our own medicine and rewrite our own job listing for a Designer.

Final Thought

It's tough to find great talent. But keeping in mind who your potential candidates are and crafting job listings that appeal to them will go a long way in bridging the gulf between companies and hiring great talent. Which is why we've launched our Job Board. We're in a unique position to bring companies closer to our audience of passionate designers and engineers.

Check Out Our Job Board »


YouSendIt's Brad Garlinghouse: Don't Buy Into Your Own Hype, Just Build a Product

Ryan wrote this on March 20, 2013 in . It has 1 comment.

We had a lot of fun when our neighbor Brad Garlinghouse, CEO of YouSendIt, dropped by and got on his Soapbox earlier this month. You might remember Brad from his days at Yahoo, where he wrote the now famous Peanut Butter Manifesto. While it was great hearing the story behind the memo, one thing that really stuck with us was when Brad talked about startups buying into their own hype.

Don't Be Another Groupon

Before Brad got on his soapbox, he chatted with Forbes about whether we were living in a second Dot Com Bubble. He said to the magazine that sometimes he doesn't know how certain startups will make money or even "live up to their private market valuations." He added:

There is something unhealthy happening in Silicon Valley where people are most focused on the hype cycle than building a great experience for their customers.

We asked Brad to elaborate on his comment during his Soapbox. He said we touched a nerve, but in a good way. It's a topic that Brad is passionate about. He sees a problem where some startups are more focused on getting their round of financing than actually building a product, or at the very least a prototype. As he put it:

[The] product they've built is around Series A financing and they built all this hype around financing. Put all that hype and energy around building something beautiful and usable that serves a need and solves a real problem.

We live in a very select bubble where there are a group of companies that are the "cool kids," said Brad. He even wagered that some of them won't be as successful as we thought. Case in point, Groupon.

Groupon was once hot stuff. It was valued at more than $12 billion before going public. However, the company's stock continues to plummet and the valuation is now around $3 billion. Behind the scenes, things remain turbulent for Groupon. CEO Andrew Mason recently got the boot and his duties were split between two board members.

Brad said two years ago everyone was itching to work at Groupon. So much so that Brad was worried he might lose employees. Yet, as Brad said:

Now here we are. Who wants to work at Groupon?

What Brad is really getting at is that you can't focus too much on the hype. What's important is building the best product and service you can, one that serves a need and solves a problem. Hype can only get you so far before it bursts in your face like a soap bubble.

Get More Great Insights From Brad's Soapbox »



Get a job, nerd!

via Job Board from ZURB