Posts About Sparks sticker Sparks
Sparks sticker
Posts About Sparks

Make a Flipbook with Pure CSS

Danny wrote this on October 02, 2015 in . 492 reactions

Just admit it, we've all done it. As designers working on responsive websites, we all grab the edge of our browser window and shrink it down to see how designs change and collapse. We thought it would be cool to add a bit of whimsy to this common interaction, or at least a little surprise and delight. We call it the CSS Flipbook!

Using some Sass and a tiny bit of HTML we recreate the feel of a flipbook. Grab the edge of your browser window and pull it back and forth for a nifty little animation, no JS necessary!

Check out the example in the Playground, download the code and start having some fun. There's all kinds of fun uses for this snippet and we'd love to see how creative you can get, so feel free to share yours with us in the comments! Who knows, we just might send you a special gift from the team!

Make a Flipbook

How The Next Web Redesign Puts Content First

Danny wrote this on July 30, 2015 in . 448 reactions

Boris and Alex of The Next Web

(From left to right: CEO and Co-founder Boris Veldhuijzen and Lead Designer Alexander Griffioen)

It's always thrilling to find others who share our passion for design and aren't afraid to take risks. We've worked relentlessly since 1998 to establish ourselves as leaders in the industry and are constantly looking for new ways to improve and take design further. Our Foundation family of open source frameworks has helped push the web forward, University has trained thousands of designers around the globe, 300 of the most innovative companies in the world have partnered with us to build better websites, products and services through our Studios business, and our design platform Notable has helped our team and others create better products. In order to maintain this level of quality and innovation, we're always on the lookout for new inspiration which is why we were so eager to dive into The Next Web's bold new redesign.

Through several conversations and a Notable annotated set of screens, we asked Co-Founder and CEO Boris Veldhuijzen van Zanten and Lead Designer Alexander Griffioen some tough questions about why they made specific decisions, what kind of data was influencing their design and how the new design was helping them achieve their goals.

Bringing the Homepage Back from the Dead

Ironically, the thing that makes sites like The Next Web so much fun to read, constantly fresh content, is also one of their biggest problems. With new content coming in on a regular basis, sometimes by the hour, great articles were getting pushed off the front page and away from the eyes of readers.

We wanted to show more posts on the front page and have the option to move things around a bit and keep posts promoted for hours or even days. - Boris
Notable Annotations Set of The Next Web Redesign

(Click on the image above to view the Notable Annotation set and see the conversation between our Design Principal Alina Senderzon and The Next Web Design Lead Alex Griffioen)

For many publishers, the homepage is dead as most traffic goes directly to articles from social sharing and other sources. The team at TNW viewed this problem as an opportunity, the perfect place to try some new ideas and address some longstanding issues.

We feel having a single news stream with all content pouring in chronologically no longer makes sense. Tech has become too ubiquitous for a single stream to be relevant to everyone, so we split our front page news stream up into categories. - Alex

One of the first parts of the redesign that Boris and Alex started sketching out was the cover, an area that is so dynamic in traditional print but ironically stagnant on the web.

We found it striking that somehow newspaper publishers can completely overhaul their front pages every single day, yet us tech-savvy new media guys seem to be stuck with a single template. When Facebook acquired WhatsApp for $ 19 billion, didn't that merit a full-page announcement for at least a couple of hours? We wanted that freedom. - Alex

Boris, an ideas man, dreamed out loud of 'a Minority Report-esque interface that the editor-in-chief would resize and rearrange stories as they develop.' This novel idea inspired Alex and an elegant and versatile solution was born, the cover editor. Consisting of 6 pre-designed layouts, the cover editor gives editors the freedom to pick a layout that works best for the current news offering and fill the slots by dropping posts from the editor right into the cover.

Illustration of all of the different cover image styles

(The six predesigned layouts in the cover editor)

The cover/hero section doesn't necessarily display our latest content. It could be stuff that we feel deserves more 'frontpage time' than it would otherwise get. - Alex

The New Navigation Situation

Notable Annotations Set of The Next Web Redesign

The Next Web is more than just a tech blog, they've got a wide range of other offerings that need to be easily accessible yet clearly differentiated to the user. The solution? A well labeled dropdown under the TNW logo.

The Next Web Navigation

In addition to that main navigation component, all of The Next Web's articles are now divided into 9 categories, the naming of which are guided by two simple criteria:

  1. The name has to be short, yet leave no doubt as to what type of content to expect there.
  2. Each section should have no or minimal overlap with the other sections

Nav is always a contentious subject, and this was no different for the The Next Web team.

This selection was actually months in the making and is probably the most updated Google Spreadsheet in the project. - Alex

Content is King

Notable Annotations Set of The Next Web Redesign

Ditching the content stream synonymous with the blog format, The Next Web divides their articles by subject and places them in neat rows they call 'shelves.'

Boris came up with the bookshelf metaphor; a horizontal list of latest stories. The irregular heights of the cards, akin to actual books on bookshelf, make for a 'pleasantly messy' UI. - Alex

Changes have also been made to the content in posts themselves. Instead of purely longform articles with the conventional title, image and body of text, posts can now consist of videos, galleries, columns, deals, quotes, etc., all represented with a distinct design that helps identify their nature.

Other design changes include a slick new sharing feature that automatically reduces the URL length and improved related article suggestions, but Alex is especially proud of of the updates in typography.

A typeface, to me, is like a voice narrating your content. The typeface determines whether the same words sound deep and masculine like George Clooney, or witty and quirky like Michael Cera. - Alex

Alex looked high and low for the perfect typeface, but the inspiration came from the strangest place. While riding past a Dutch employment agency, Alex spotted this window and fell in love. He snapped this pic and sent it to Boris immediately.

Window that inspired The Next Web's font choice

Serendipitously, the typeface is ARS Maquette by ARS Type, a one-man foundry situated a few streets away from TNW HQ.

I'm pleased to say our content now sounds like Bill Murray; witty, charming, and not without a sense of humor. - Alex

This passion for typography is shared among the team. Boris told us this hilarious story about a disagreement he had with the team about font size.

I remember I pushed hard for bigger font size on one part of the site, and after much heated debate I decided a certain font size really had to be 18pt and not 16pt. Alex hated it so much he talked to Laura and they made the changes as I wanted them but then every day from that moment on decreased that font size with 0.1pt. It was so subtle I didn't notice, but after 20 days it was at 16pt and we ended up launching the new site with that. They only recently told me about that and I thought it was hilarious and also very cool they really fought for what they thought was the better solution. - Boris

Ads That Can Be Confused With Art

Notable Annotations Set of The Next Web Redesign

A major challenge for any site collecting ad revenue are the size, location and behavior of ads. It's no secret that click through rates are dropping as people develop 'ad blindness' and use of adblockers rises every year. But more prominent or flashy ads take away from the user experience and can irritate users. There needed to be a way to increase the effectiveness of ads without being obnoxious. Boris was determined to figure out a solution that benefited everyone.

I challenged the team to think about an ad solution that was so cool that some readers would forget about the article they wanted to read because they were distracted by the beauty and interaction with the ad. If they would go so far as to even tweet about the ad we would've reached that goal. - Boris

With that challenge issued and the goals coming clearly into focus, Alex and his team jumped into action. The solution is one of the coolest parts of the the redesign, a bold concept they call 'Canvas Ads.' These gorgeous images typically incorporate bold photography and occupy the whole background of the article. Many slide the article to the right to give the ad full attention. Each canvas ad has 4 triggers that bring back the content for users, giving it an interactive feel. An interesting detail are the social sharing buttons directly on the ad itself. We know what you're probably thinking, 'Share buttons on an ad!?!' But according to Boris and Alex, it's working. The trick is the ingenious way the ads are selected. The ads don't always display commercial ads; about half contain art and portfolios from artists The Next Web team chooses. There are a few reasons behind this:

This has three advantages: the first advantage is for those artists we promote. They see their traffic grow and suddenly reach millions of readers around the world. The second advantage is for our readers. They see beautiful art works instead of ads. The third advantage is that it encourages our advertisers to produce really good looking ads. They compete with artwork so their ads better be works of art as well. - Boris

So the ads look nice and all, but are they performing? We pressed Alex for some numbers.

The results of the first series of canvas ads are well beyond everyone's expectations. Whereas the industry average CTR for display ads (i.e. rectangles, leaderboards) is around 0.2%, our canvas ads are doing between 4% and 8%. Our best performing ad so far had a 15% CTR. - Alex

Shaping the Future

All said and done, the redesign took about 8 months. No change was made lightly, as the team debated over even the smallest details like the number of milliseconds for the transition of canvas ads. The redesign is bold and in many ways bucks conventions, forging a new path for online media. This thinking, to leave no stone unturned and not be limited by status quo was intentional.

Once you decide you are free to do what you want you can challenge everything and things like 'but that's just how it's done' provoke only laughter. We constantly challenge ourselves and our industry to forget the old rules and really think about the best solution for everyone. It can be daunting and scary to not being able to rely on the past, but it also means you get to shape the future. - Boris

A bold design backed by solid data, The Next Web redesign does a great job of balancing business needs with a solid user experience and puts content front and center. We want to thank Boris and Alex for taking the time to chat with us about their redesign and all of the insights they provided.

Holy Changes, Batman! Surviving Negative Feedback

Danny wrote this on April 22, 2015 in . 205 reactions

zurb signal

The Batman comic series has one of the most passionate fandoms in history, and never was this more apparent than in the summer of 2006 when it was officially announced that Heath Ledger had been cast as the film's iconic villain, the Joker.

The internet exploded as fanboys and fangirls largely panned the decision. Vitriol spewed from forums all over the web.

This guy couldn't act his way out of a paper bag.
I am NOT seeing this movie if he's in it.
Probably the worst casting of all time.

Believe it or not, there are a few lessons designers can learn from this story that can help us stay on track and focused as we develop new products.

Big Changes Can Spark Big Reactions


Director Christopher Nolan was tasked with completely revitalizing a damaged brand, and almost every part had to be refreshed to bring it back on track. As designers we are sometimes asked to completely refresh a product, fix a broken interface or improve an interaction. Our changes may be exceptional and undeniably better solutions than what existed previously, but we have something working against us. Science has proven that people don't like change. Whether we're aware of it or not, we all have a bias for the familiar. When we see something really different or unexpected like, say, the star of "10 Things I Hate About You" being cast as one of the greatest villains of all time, we tend to be negative.

Recently we had two members of the Rdio design team, Geoff Koops and Mike Towber, over for one of our Soapbox events. In the Fall of last year, Rdio underwent a drastic redesign that included bold use of album art, typography and image blur. It caught many people by surprise. Some users expressed frustration over some of the interface changes and were quick to voice their criticism on social networks.

Strong Opinions = Users Who Care

Nolan's unexpected casting decision prompted such a strong reaction because fans have an incredibly personal connection to the Batman mythos. In the same vein, Rdio's passionate users have a deep connection with music and the way they consume it.

"We are blessed with passionate users," Geoff said half-jokingly. While we all chuckled a bit, Mike was quick to expand on Geoff's thought, "It always feels great to have people care enough to say something." They touched on something that everyone who has created anything should understand: If people have strong opinions, even negative ones, it means they care. They care enough to voice their opinion. They're engaged with your product. These are the kind of users you want to have!

Keep Calm and Carry On

keep calm superhero

After launching our product or redesign, negative feedback can make us feel threatened, causing us to panic. There's a biological reason for this, our fight or flight response kicking in.

Recent neuroscience research has shown that our brains and bodies can respond to certain interpersonal situations the same way we react to literal threats to our physical safety.

Harvard Business Review

In the face of less-than-flattering feedback, our brains tell us we're in danger. We make hasty decisions as if our lives depend on it. These knee-jerk reactions can harm us in the long run. The solution? Stay calm and try to delay your response if possible.

Be Prepared to Fight for Your Ideas

At ZURB, we're not afraid to explore crazy or outlandish ideas. When we first dive into a project, we try to explore all kinds of things, because even bad ideas can lead to great ones. Riskier ideas require more support through the process, but that risk can often pay off in big ways.

Sometimes we need to step up to the plate and defend an idea to prevent others from trampling over it. Nolan's risky decision was based off of data he had gathered and long conversations with Heath about the direction he wanted to take the character and the story in general. He defended his choice to the media and had the data to back up his decision. The Rdio team did data gathering as well, through a custom tool built to test new ideas amongst different customer categories based on their behavior.

"It was ugly," joked Mike Towber, "but we tested tons of users. It helped us." The data this tool yielded influenced and validated their designs, making it possible for them to be confident in their choices.

In the End, Good Will Prevail

Good will prevail superhero

"The Dark Knight" was released in North America on July 18, 2008 to nearly unanimous acclaim. Nolan's epic crime drama captivated critics and audiences alike. Much of the buzz revolved around Heath's mesmerizing performance, which immediately spurred Oscar talk. Forums everywhere espoused Nolan's 'genius' casting choice, vindicating the director.

Rdio too, is enjoying an uptick in traffic due to their innovative redesign. Music is now exactly where it should be, front and center. Users are finding it easier than ever to discover and listen to music on their own terms, the main goal of the redesign.

There's much we can learn from both Christopher Nolan and the Rdio design team:

Stay calm: Don't take things personally. Passionate users are users who care. They're connected with our product on a deep level. Stay calm during that first wave of criticism and try not make any rash decisions. We should welcome feedback of all kinds and look for ways to improve, but hasty changes will hurt more than help us in the long run.

Make decisions with data: Nolan had several deep conversations and knew he had found someone with the talent and understanding to execute his vision. The Rdio team went to great lengths to understand their wide spectrum of users, analyzing listening styles and behaviors to find out what people value most.

Be prepared to defend your choices: If we've done our homework and feel strongly about our choices, be prepared to explain them to others. Truly great ideas need advocates, especially if they're a little crazy. Some of the biggest advancements in history came because people were willing to take risks, and design is no different.

We want to thank Geoff Koops and Mike Towber of Rdio for coming down and sharing their insights at our last Soapbox event. We're incredibly excited to sit down with our next guest, Tim Van Damme of Dropbox at noon PST April 24!

Don't Miss Out on Our Next Soapbox

Your Brand is Like a Television Show

Ryan wrote this on April 16, 2015 in . 145 reactions

"The ZURB sitcom," proclaimed our Chief Instigator about a year or so ago. A sitcom? What did he mean by that? At the time, we were considering how exactly we were communicating our story on the blog and our approach to content creation. But our Chief Instigator sparked an idea in us. There's a reason people love sitcoms ... well, television in general. There's something familiar in it, something that keeps the audience coming back again and again.

I Love Lucy TV

Now, he wasn't suggesting that we abandon design and start filming our own weekly show. But television is the perfect model for writing a brand story. A lot of television shows are brands in themselves. With that, we took a hard long look at what made certain shows successful — "Star Trek," "Friends," "I Love Lucy" and a few others.

Shows have an addictive quality to their premises, worlds and characters. These three crucial ingredients make up any episode in any show. Take your pick: "Star Trek" or "Mad Men" or "Breaking Bad." And these elements are something that any brand or piece of content can ape. When talking about brand, most start with voice and tone. And for good reason, because what you stand for as a company is very important to creating that tone and voice. But to create that voice and to understand that tone, we can look to the magical ingredients television has to offer. Which is precisely what we did.

The World, the Situation and the Characters

Let's break it down a bit more. Any television show has these three elements:

  • There are characters who get into adventures and misadventures.
  • There's a world that they inhabit, where they interact and where those escapades take place.
  • There's a situation — a premise — in each episode.

And every show has a pitch line. For instance:

  • "I Love Lucy": Lucy Ricardo is a New York housewife who always tries to get one over on her husband, nightclub singer Ricky Ricardo.
  • "Friends": Six friends living in New York navigate the turbulent single scene.
  • "Star Trek": A group of intrepid explorers venture into the depths of space on a five-year mission to seek out new life and civilizations.

The pitch is very important when it comes to television. Survive the pitch and you get to make a pilot (think of it of a prototype of what the show will be). When it comes to brand, you'll want to survive at least past the pilot to become something that airs from week to week for a long run.

Brand as a Television Show Pitch

coke commercial on TV

A'right, time to put on those showrunner hats. We're going to show you how to walk into a pitch meeting and sell your "show" (read: product) so you can get the green light to make your pilot. First, let's take a look at a huge successful brand story — Coca-Cola. This is a brand that's got its story down. The story has evolved over the decades yet stayed so familiar. Coca-Cola is still about a shared experience.

If you were to pitch the show that is Coke to a room full of studio execs, you would say:

People around the world who share their time with each other over a Coke.

And that's the story they've worked hard to tell for more than 100 years. Coke is about sharing happiness with another person. As Bill Backer, creative director of the "I'd like to buy the world a Coke" ad, once said:

I began to see the familiar words, 'Let's have a Coke,' as a subtle way of saying, 'Let's keep each other company for a little while.

So let's go back a second to the world of Coke. It's the entire world, sure. But there's a mission in there as well: "sharing and togetherness." It informs their characters and the situation of their brand. And it gives them a unique voice that enables storytelling.

Through storytelling, Coke is able to create an emotional connection. They've evolved to be about happiness — but the mission remains the same, as do the characters and the situation. And with that, Coke has created a unique voice and brand that resonates.

Crafting a Better Brand Pitch

Star Trek on TV

OK, Coke was easy. What about something with more opportunity craft a better story ' the Internal Revenue Service, or the good ol' IRS. Yes, folks, it's tax season for those of us in the States. And if there's a bigger brand than Coke, it has to be the IRS because only two things are certain in life: death and taxes. The IRS actually predates Coke by a mere 24 years, but the IRS has a bad rep, one that it's been unable to shake. The IRS has a reputation of poor customer service, where folks wait hours on end in lines or get the so-called courtesy disconnect (read: they hang up on you on purpose). And that's sent taxpayers on a flame war against the governmental agency.

But as John Oliver points out on his Late Night show, is it really their fault? After all, the IRS budget and workforce has been slashed amid scandals of overspending and wasted efforts, like a "Star Trek" parody that boldly went nowhere. But the most cardinal sin of all is that the IRS just comes across as plain boring, which John Oliver is also quick to point out. As a governmental body, they're all facts and no personality. Just check out this tweet:

Money and parting with it can spur strong emotions. But there's no emotional connection from the IRS. Where's the soul? There doesn't seem to be an understanding of the world they live in, or who their characters are in their story. They don't seem to be aware of the emotions that money can stir. What they need is a better brand pitch.

How would you pitch the IRS? First, lets define the world. It's certainly not the cold government buildings the IRS occupies. It's a bit broader than that. It's all 50 states, from sea to shining sea. The characters are the taxpayers, of course. Now the situation. Well, that's tricky because we've vilified the agency with a nefarious purpose. But our taxes pay for things that keep the country ticking. Yet is that a situation that speaks to people? Not really. A situation that relates more to their investment. You've got to speak more on a dollar to dollar basis, like:

Say what? $1 of tax enforcement yields $6! Now that's a pitch. You mean to say that the money that goes into the system has a return? Now let's pitch the heck out of this to our Studio execs. Here we go:

The safest investment for your money that yields $6 for every dollar spent on tax enforcement.

Get to Make Your Pilot

Friends on TV

A pitch can help your brand create a stronger story that is consistent, and tells a compelling yarn that customers will want to be part of. And by figuring out what your world is, what is the situation in that world, and who your characters are, you can create your unique voice. And tell your story. More importantly, you'll survive the pilot season and get to make your show ... um, product.

Don't Hoard Those Boxes of Old, Rusty Skills

Shawna wrote this on April 13, 2015 in . 88 reactions

welcome to the new job

Congratulations, you've arrived. Maybe you're a clean slate, tabula rasa, and this is your first job. Or not. After all, the dynamic is changing among the new generation of workers, where it's more common to leave one job for another. Whichever it is, you've done the work to get your new job. You've impressed people. You've hobnobbed with the hiring folks, the company's leadership and its team. Let's face it, you basically assembled the shrine of the silver monkey and got that new job. But now what?

Because you'll come to see that the job is not exactly like your last gig. We've learned over the years at ZURB that a degree of unlearning has to happen. Why? Because the educational system shoves us through memory and rote learning, thereby possibility killing our ability to be creative. And that's something we carry into the workforce where we strive for the "A," wanting everything laid out in front of us so we can pass. But in design and knowledge work, that's rarely the case. There is no clear point-by-point path or crib notes.

Unpacking Your Previous Knowledge

moving in

The "A" mentality of education can be detrimental to a learning organization, where answers aren't always apparent and can't be gleaned from a textbook. We've worked hard to create a learning environment that encourages not only learning new skills, but also encourages unlearning stagnant ways of doing things.

Why? Because what's needed these days isn't someone who's skilled in just one thing, but someone that has a deep knowledge and is able to work across many disciplines. Google calls this polymath a full-stack employee. We call it T-shaped. Regardless of what it's called, he or she is simply a person who's willing to unlearn one way of doing things and not be confined solely by past experiences.

It's important to be open to letting go of the previous way you've done things. Think of it as moving into a new, tiny apartment — an empty studio at first, and it's up to you to transform it into a swank place to live. You'll have to unpack what you need and box the rest.

Storing Your Past Experience … Until You Need It

messy horder

Now, we aren't saying your past experiences don't matter or that you should denounce what got you here. They are still important because they got you hired make you valuable to your new team and show the potential of what you can do next. It's just that your new team does things a little differently is all.

The value of your past comes from applying previous situations to new ones. For example, if you learned how to solve problems a particular way at your last company, and the solutions still work, then keep using them. But be prepared to learn other ways to solve the same problem that might be even better or help you out even more.

And this is where systems thinking comes into play, where you're thinking less about how solving problems affect you and more how they impact the whole of an organization. As Peter Senge, writer of "The Fifth Discipline" puts it:

We learn best from our experience, but we never directly experience the consequences of many of our most important decisions.

At ZURB, we're a learning organization that helps foster learning. But learning for the sake of learning isn't enough. Personal mastery doesn't always equate to organizational learning. So while your experience is important, when you're part of a new organization you'll have to figure out how that fits into the larger whole.

Don't Sell Off Those Old Skills Just Yet

garage sale

Let's get one thing straight, however. We're not saying to garage sale your past experiences. You'll want to hold on to those experiences even if you're not practicing them now — you'll never know when the need will pop up. For example, I've had a total of five different roles through my career from face-to-face customer service to training to HR. I have all those skills, some I proudly display for all to see. Others I only bring out during special occasions like ZURBmas.

Inevitably, you will have ways of doing things that you'll have to put into a storage closet for later. Or you'll have to work a different way than you're used to. For some of our newer designers, it can be quite a shock at first doing visuals they way we do them at ZURB. We don't just make a solitary designer create visuals for a project. We have two other designers also come up with visuals. We're don't just pit designer against designer here. We're actually passing along knowledge. A designer who might not be as strong in visuals can learn from someone who is. Of course, the skills that the new designer has in visual design still comes into play, but now she or he can reframe how they actually work.

Don't worry too much if you can't figure out which past skills are relevant. It'll take a while to figure out how they apply to the new ones you'll gain. It'll take you some time to sort out what you'll keep and what you'll store in your brain attic. You won't have all the answers on your first day. There will be a moment when you might feel like you're trapped in limbo between old job and new job. Stop. Breathe. It'll pass.

putting it away

Learn All That is Learnable

Be a sponge in the first few weeks. That'll help you get over any apprehension. Learn all that is learnable at your new organization. And that takes a certain amount of unlearning, while you're adapting and moving away from the past toward tomorrow.

Wherever you go in life, you'll need to keep learning. Your job will change and your skills will need to evolve too. There is always more you can learn. After all, it's not like after 8th grade you say, "this is all the science I need," and stop learning new things about science. Even if a new skill is similar to something you've done already — learn what's different about it.

One thing that occasionally challenges our new designers is the art of writing an email that drives action. Here's where unlearning becomes crucial because we've all picked up nasty email habits over the years, where their emails have no clear objectives, tend to ramble and have no clear call to action. New designers have to purge themselves of those habits in order to write client and internal emails that are clear and directive. This is where they have to unlearn something in order to learn it anew.

You can't be opposed to acquiring new knowledge. It might take a lot of upfront effort on your part. It's hard to admit that you don't know something. But saying something as simple as "I don't know, but I'll find out" shows you're human and committed to finding the answer.

Learning is also symbiotic within an organization. There's institutional knowledge — like writing emails — that can be passed down or learned through osmosis. And there is an obligation to coach newbies in an organization. But there's also an obligation for someone to better themselves and pass some of those skills on to others.

In order to be really good at your job or what you're working on, you have to work on learning how. Think about your new, tiny studio apartment again. If you were told to decorate it, you could just tape up some posters of your favorite band. Or you could go the extra mile and learn how to create art of your own to put up. And the latter will certainly be more fulfilling than just sticking a few posters on the wall.

Stories Not Screens

Danny wrote this on March 26, 2015 in . 286 reactions

paper to pixel

It's no secret that web design has its roots in print. In the early days of the web, the influence of print on web design was pretty inescapable. Websites were essentially virtual brochures, static pages with little or no interactivity. Designers were still learning the potential of this new medium and the technology had to mature. Slowly but surely, the differences between print design and web design became evident. But many designers are still thinking of their designs in terms of screens and images.

At one of our recent Soapbox events, Braden Kowitz, Design Partner at Google Ventures summed it up perfectly:

When you look at how people use products, they don't look at the screen, they don't look at the feature. They take this pathway through all your screens and features' So what you really need to design is that experience and that story.

Thinking of themselves as storytellers might be a new concept for many designers, but it's a fitting analogy. Unlike print designs, which serve a singular purpose and are meant to be viewed, design work on the web is entirely interactive. Users take various pathways through websites and apps as they try to accomplish a variety of things. Designers gently guide their users around obstacles, shepherding them to desired outcomes.

Put Yourself in Your User's Shoes

In order to become a successful storyteller, designers need to develop empathy. Empathy is the ability to understand and share the feelings of others, to put yourself in their shoes. Designers need to know their users. They need to understand exactly what the user is trying to accomplish and care about their experience through the entire process. Even with the best planning, there will always be problems you didn't think of, interactions you didn't anticipate or things you didn't take into consideration. The only way to discover these issues is by trying a design yourself.

Braden and his team do this through sketches, a process he calls "story-centered design." He describes these mockups and their purpose like this:

Designers present every sentence the customer reads, every action they take, and every screen that system generates in response. The designs follow a customer from an initial trigger all the way through completing a goal, and they show how the design supports every step in that flow.

Like any good author, designers need to know exactly how their stories end so they can guide their users most effectively, knowing exactly which routes are available and designing the most pleasant experience.

Storytelling is in Our Blood

At ZURB, we've always thought of product design as storytelling, and we've been using Progressive Design to sharpen our storytelling skills and create amazing experiences. Our process has many steps that ensure we keep the user in mind at all times, because we design for people.


As with most anything at ZURB, it all starts with sketching. Like Braden and his team, we sketch out each screen and map out every workflow. Even at this very lo-fi level, we begin to define the paths users will take to achieve their goals. The next step is scanning these sketch sheets into clickable prototypes using Solidify. This tool in the Notable Platform helps us to interact with our designs as close to how the end user will as possible, exposing anything we left out and helping us refine our work.

The Progressive Design process involves constant iteration and feedback. We share our work with the rest of the team, inviting them to respond with any questions or concerns. If we're working with a client for our Studios business, we walk them through each workflow, using user personas to explain how different customers will interact with the product or website. If anything isn't working along the way, we step back, ideate more solutions, and test again. At times we use surveys to gather information about how real people interact with our work. This data helps us improve our stories.

Only when the workflows and paths within our products are complete do we focus on on polishing our visuals and refining our interactions. This user-centered approach helps us to eliminate problems early, prioritize the workflows and help our users accomplish their goals.

A Shared Story

It was great to hear how Braden and his team agree that designers need to be storytellers, a sentiment that many of our Soapbox guests have touched on as well. We'd like to thank Braden for taking time out and sharing his insights with us and our audience.

We're looking forward to our next event with Geoff Koops and Mike Towber of Rdio, amazing designers who have been telling some engaging stories with their users. We hope you can join us at the next Soapbox!

Don't Miss Out on Our Next Soapbox

Shoppers Don't Want Your M-Dot Site

Ryan wrote this on February 25, 2015 in . 139 reactions

ecommerce mobile

Imagine for a sec that you're an ecommerce retailer. It's Black Friday, the day after Thanksgiving in the United States and the cornerstone sales day of brick-and-mortar stores. But you get a huge spike of traffic and someone snags a $25,000 clutch from a mobile device. Which is exactly what happened one Black Friday for One King's Lane.

That one incident pushed One King's Lane to focus on perfecting their mobile shopping experience. As Doug Mack, then-CEO of One King's Lane, said:

Your business model either leans on mobile or it doesn't.

At the time, 30% of One King's Lane traffic came from a mobile device, most of that from a tablet. Sales from mobile make up one-third of One King's Lane sales. So the retailer worked furiously on releasing a universal iOS app, but haven't done a responsive site. Instead, they have a server-side adaptive site. A lot of brick-and-mortar retailers have followed similar paths, jumping on mobile but not going responsive.

87% of Retailers Aren't Responsive ... Say What?

RWD vs. Mdot

Traffic for online shopping is huge, many retailers split their traffic roughly 50/50 between mobile and desktop, such as Amazon and Target. Yet, surprisingly, 87% of the top 100 retailers aren't responsive, shuffling shoppers to an m-dot site which can be a nightmare for shoppers.

Why's that? Show me the numbers, Mrs. Landingham.

Not everything is available on an m-dot site and the shopping experience is, well ' less. M-dots take longer to load — more than 4.8 seconds and 40% of shoppers will bolt or throw their phones in frustration if it takes more than three seconds to load. And nearly six times as many mobile shoppers would rather ditch the m-dot site for the full-blown site even if it's a horrid mobile experience.

When it comes to performance, responsive web sites are in a dead heat with m-dots and, in some cases, can slightly edge out their m-dot cousins.

Too Many Codes to Maintain When a Single Codebase Will Do

M-dots have another disadvantage. It means having an entire other codebase to maintain. Twice the work and twice the team to manage those separate code bases or using a server-side solution — one that takes your existing site and serves up another, entirely separate mobile site for the shoppers on the go.

responsive ecommerce

Responsive sites allow retailers to have a single codebase that can be maintained by a single team. It also helps retailers find life beyond the app store. With more and more tools, such as Foundation for Apps, there isn't any real reason for ecommerce to turn to m-dots rather than a responsive site. And there are certainly code blocks — such as responsive pricing tables, masonry grids and product listings — to help retailers make the leap easier.

M-Dots Are the Way of the Dinosaur

If most mobile shopper prefer the full site, then they obviously want parity when it comes to the buying things from their phones or tablets. And they bounce right out of an m-dot, so why are retailers still clinging to it? Having one codebase, one site can allow them more parity and give their shoppers everything they're looking for.

Mesmerize Users With Something Unexpected

Danny wrote this on February 19, 2015 in . 147 reactions


You're out on the town with friends and you decide to find a place to eat. Whipping out your cell phone, you launch the Yelp app and scroll through nearby restaurants. Suddenly, you see it peeking at you from behind the menu — a hamster. You begin pulling the menu down to set it free only to watch the hamster jump into a rocket and blast off!

Did this funny easter egg help you accomplish your task? No. But did it bring a little joy or excitement to the experience? Definitely.

This kind of unexpected detail is an example of "Surprise and Delight," a design trigger that can make any experience more exciting and keep users engaged. Two talented designers recently came through ZURB HQ to get on their Soapboxes with different perspectives about surprise and delight and the role it plays in their designs.

Marissa Louie, of Yahoo, brought up the word "enchantment" again and again when describing her designs. Her goal as a designer is not just to provide a solid, usable interface, but to create an experience that connects with users emotionally. To accomplish this, she employs surprise and delight to create "sticky experiences" that keep users engaged and coming back for more.

On the other hand, Wesley Yun of Lytro was hesitant about devoting too much attention to unnecessary visual details. For Wesley, a designer's main focus should be making sure the product accomplishes its purpose. He warned that too much attention on extra details can actually harm the design, rendering it less effective.

So when should designers use this trigger, and how can they use it effectively?

Surprise and Delight Right

Surprise and delight increases satisfaction and makes experiences more exciting, but as with any tool, it needs to be used properly to be effective. Here are a few things to keep in mind:

Visuals Will Only Take You So Far

No amount of visual appeal can make up for a product that doesn't work right. That's why sketching is so important to us here at ZURB. Before we even write one line of code or draw one graphic, we focus on creating solid, useable and useful designs with Sharpies and paper. If something isn't working or doesn't feel right, we scrap the idea and move on.

If something is really working at that lo-fi level, we know it will be amazing once we add all the visual polish. It's only at that point where we start thinking of embellishing the designs with some surprise and delight.

Keep in Mind the Context

Meaningful surprises can make user experiences more engaging, fostering brand loyalty and encouraging customers to dig deeper into a site. But if you're not careful, surprises can disrupt the normal flow of activity, irritating users rather than delighting them.

Mint, a personal finance website and app, does a good job of employing surprise and delight at just the right moments. It's typically a disheartening experience stumbling across a 404 page, but Mint softens the blow with this unique and humorous image:

mint 404

Introducing some surprising element while a user was connecting their bank account or entering some important financial information would probably not be a welcome addition and have undesirable consequences.

The product itself may determine if it's appropriate to include surprise and delight, and to what degree. The customers that Wesley is designing for are in many cases using the Lytro cameras for work and have an expectation of reliability. For photographers, nothing can get in the way of capturing the perfect moment. Wesley called this the "can't fail" moment. In this application, a user would definitely not want any surprises. Distractions would be detrimental to the product accomplishing its purpose.

Marissa uses surprise and delight in Yahoo News Digest, an app designed to inform and entertain users. In this context, there is greater freedom to surprise users with unexpected details that turn an otherwise predictable experience into an exciting one.

Find the Right Frequency

Surprises by their definition do not occur at regular or predictable intervals. If the unexpected is expected, it loses its meaning and effectiveness. Experiment with the amount of surprises you include to determine what the right balance is. Sometimes less is more.

One site that breaks this rule is Flickr. Every time you log in you'll be greeted in a different language. While the greeting is expected, it's always delightful seeing it in a new language. Bonjour, Flickr!


It's Not All Visual

The amount of appropriate surprise and delight will vary according to the product and so will the format. Sometimes something as small as some playful copy or unexpected interaction element can come as a surprise.

Normally, website footers are straightforward and stale, but Campaign Monitor catches us off guard with a bit of humor in their heading:


Surprise and delight doesn't have to be aggressive or blatant to be effective, subtle touches can be just as compelling.

As Always, Go With Your Gut

Ultimately, there are no hard and fast rules and it's up to designers to use their good judgement. The amount and kind of surprise and delight that will be effective largely depends on the product, the user and the goals of the project.

We want to extend a special thank you to Marissa Louie and Wesley Yun for sharing their insights with us at their Soapboxes. We're looking forward to our next guest, Braden Kowitz, Design Partner at Google Ventures, tomorrow at noon. We hope you can join us for what is sure to be another exciting Soapbox!

Don't Miss Out on Our Next Soapbox

Design Collaboration is Lonely

Ryan wrote this on January 22, 2014 in . 107 reactions

A designer works alone on sketches.

When it comes to collaboration, you need two or more to tango. You can't collaborate all by your lonesome. Well, you could, but then you'd be Edward Norton in "Fight Club" conspiring with Tyler Durden. But to get the most out of a collaboration you have to do design work upfront. And that can be a lonely effort, even in an open-office environment that encourages collaboration.

Let's define design collaboration first. It's Design Thinking in action. When you have a creative team with fantastic ideas, sometimes things can get a bit fuzzy. After doing work, you need a second opinion because you're too close to your ideas. Collaboration allows you to get feedback on those ideas. You might find new sparks in that collaboration, or you might find that your ideas aren't quite cooked. It's easier to collaborate when you don't have a physical barrier between you and another designer.

Check out any startup and you'll find an open floor plan. A German team conceived of an office not shackled with walls and room in the 1950s. (An aside: Frank Lloyd Wright considered an enclosed office to be fascist.) Offices without walls have been around for quite some time as newsrooms everywhere before they were all the rage in Silicon Valley. Steelcase, the office furniture company that once bought design firm IDEO, is a big proponent of an open office. Why the appeal? Because an open-floor plan removes the barriers, literally, and encourages collaboration. Which is why our office at ZURB HQ is open.

The Cost of an Open Office?

The startup world assumes that open floors are great for ideas, and they are. Sparks fly quickly around ZURB. But there's also a cost associated with having an open office space. There is a barrage of distractions that could increase your blood-pressure and stress. Not everyone is a fan of them. 37 Signals imposes "library rules" to keep things pretty quiet in their open office.

Jason Fried, 37 Signals co-founder, is big into remote working, saying the office is the worst place to get work done. However, presence is crucial in collaboration. You can't balance collecting feedback and presenting those ideas if you're not in the office. Working remotely, you're siloed. Collaboration can't happen in a vacuum.

Doing Your Homework

Design is collaborative by nature. And working jointly is a handshake with your team, customers and potential customers that you're out for the best answer, not just an answer. And it gets you through the Design Feedback Loop, where you do work, present it, get feedback and iterate on it.

Our Design Feedback Loop at ZURB.

But the vast majority of the time is spent doing work, and that's what designers think is more valuable. Why does it take a long time? Design work takes long periods of time executing by yourself. Because if you're going to seek feedback, you have to be iterative and think through problems on your own first — from hypothesis to sketching to wireframing to layout. And it's hard to collaborate when you're doing work because the tools are often solitary. You have to commit to your ideas with homework before you collaborate. That's where most companies go wrong, wanting to get consensus before committing to any work. It's a one to 10 ratio when it comes to collaboration to doing work alone. The valuable part often is the collaboration, where you can get feedback.

Let's look at how many hours one of our designer logged on a recent client project. He worked 148 hours out of the 180 total project hours. That roughly breaks down to 21 hour per week. Out of those 21 hours, two hours were on calls with the client. An even smaller amount of time, another hour or so, was spent getting feedback from the project's lead. Doing rough math, the designer worked 17 hours on his own before collaborating. When there was collaboration, either with the lead and copywriter (me) on the project, the designer was able to get feedback so he could iterate. What was really valuable, however, was spending that time with his other teammates after a client call. The lead was able to help decipher their clients feedback, which gave the designer the confidence to push forward. The smaller amount of time ended up creating greater impact on his work.

But you can't just get feedback without putting in the work. And that sort of collaboration can't happen if you're miles away from the office.

What's Ahead in 2014 for Responsive Web Design?

Jonathan wrote this on December 31, 2013 in . 203 reactions


2013 was a big year for responsive design. In fact, if you read around the Web a bit you might hear that 2013 was the "Year of Responsive Design". That might be true — around the turn of last year, there were major sites coming out with responsive designs, like Time Magazine or Mashable (and frankly, thousands of others). If nothing else, 2013 was the year of responsive design going mainstream, even becoming something designers and consumers just expect to see. That's pretty hot.

2013 was also a big year for responsive tools: Foundation 4 came out in February, Bootstrap 3 came out in August and Foundation 5 came out just a few weeks ago. Yahoo! got in the game in May with the release of Pure, and the team at Thoughtbot has continued to push Bourbon Neat. There were new plugins, polyfills and practices that became popular in 2013. In general, building responsive sites has never been easier or had more powerful tools.

So let's prognosticate a bit: what should we expect to see in 2014 in responsive Web design?

Smarter Responsive Design

2014 will be a year full of a much better and deeper understanding about how we build and optimize sites for any device. Responsive sites have always suffered from varying degrees of optimization issues, but we're getting a bit better about the tools now, and best practices are starting to emerge and standardize. Things like the now ubiquitous "hamburger" nav icon and off-canvas panels are becoming relatively common and genuinely work well responsively.

Device capability detection, selective loading of assets and media, better optimization for device speed and hardware. These are all going to be better explained and much easier to implement with new tools and plugins.

Greater Device Agnosticism

Device classes have always been hard to pin down, but the stereotypical mobile-tablet-desktop paradigm is going to completely fall apart in 2014. We already have devices that fall neatly between what we commonly consider to be a phone and a tablet, or tablet and desktop. But now we also have wearable computing (watches, heads up displays ... who knows, maybe we'll see the long-rumored Apple watch). There's also smart TVs and other home media appliances that are Web-enabled.

We'll see responsive design move even further into truly device-agnostic design. That means we can plan for devices that don't exist yet more cleanly, as well as take better advantage of specific capabilities and constraints.

Fancier Frameworks

It would hardly be us if we didn't talk about what's to come for frameworks, like Foundation. The area we see with lots of opportunity in 2014 are complex tools with many components and means of input, as well as trickier data models to display. So far responsive design has been used in large part for marketing or content sites, not complex apps. To get the ball rolling, we're rebuilding all of our Product Design Apps to be responsive and built on Foundation. Our plans include placing a number of Web-app centric components and plugins in Foundation. That will make building a complex app as straight-forward as creating a marketing site or simple content page.

2014 is going to be a big year in responsive design. So with that, we want to welcome you to the New Year!