Posts About Studios
Posts About Studios
Foundation for Emails 2 modernized email design by taking some of the best practices of modern web development and bringing them to email. For web developers, it was a godsend, they could finally use the tools and workflows they were used to. But for many others, seeing things like Npm and Gulp is intimidating and doesn't help make email development any easier to tackle. We think everyone can and should be able to create responsive HTML emails, even if they don't have a strong web background. That's why we've built Slinky, a new way to build emails right in your browser.
Slinky makes it easy to code up a custom responsive email using just your web browser and our lightning-fast Inky Templating language. With CodePen's slick interface, all you have to do is write up your markup in either Inky or vanilla HTML and then inline. This code takes the Inky language and makes it into one slick HTML file you can import into any email service! No terminal commands, nothing to install, and no uploading. You'll be slinging beautiful, responsive, HTML emails in the cloud in no time.
Using the power of Foundation for Emails 2 and the Inky templating language, Slinky makes it easy to dive into the world of HTML email development. Check it out on the Playground page and sling some responsive emails!
You Want A Phone, But You Don't
When my son started middle school, he asked my wife and me for a phone. Since he was going to be walking to school, Lisa and I decided yes to this luxury. Our reasoning was not because he was now older or more responsible but because we wanted to be able to contact him! When I offered him one of my old Nokia handsets, which is still a great phone, he nearly lost his life. 'That's a dinosaur Dad! It's as useless as a flip phone!'
For a kid, having the ability to contact your parents is not the reason to ask for a phone. My old Nokia or StarTac handsets were cool phones in their time. Call quality was great but let's face it, predictive text? That's an alien concept to anyone whose baseline is a smartphone. Who remembers trying to text, while waiting and hoping for a 28.8 kbps internet connection handshake to happen? Hmm...do you want to go back?
Some very successful people still rock the flip phone! But let's face it, this is not a product or a fashion accessory that will come back into vogue for the masses. It's not what people want when they ask for a phone today.
Enter the Experience Era
Experiences like this get me thinking about what makes us use one product vs. another. And, how has our appreciation of innovation changed from an end user perspective?
Mobile phones are now multi-use devices. We don't say 'where's my entertainment, communication, and personal or business computing device?' What we want is a device that delivers all these needs wrapped in best experience possible. Yes, most of us have morphed into needy people. We need to be productive, efficient, entertained. We expect things to work. We expect and from a consumer perspective, demand a great experience in the process.
How Did We Get Here?
Hardware engineering and companies like Fairchild Semiconductors started off the Valley ecosystem. Mike Markkula, an angel investor and the second CEO of Apple, made his mark at Fairchild and Intel. He worked in marketing, but he had a degree in electrical engineering. Historically, product leadership in companies such as Fairchild and Intel centered around Hardware Engineers. Having engineers as the Product Managers' made sense due to the complexity of their products and the innovation they were driving. Building a chip requires a level of experience that's lost on many from a software programming perspective.
The rise of the business and then the home computer started to bring software into its own. The ascension of the Software Engineer and their leadership era began. Companies like Microsoft and Netscape began to shift the pendulum. Bill Gates may have started off as a programmer, but it was his business focus and leadership that made Microsoft.
When the internet made its way into our homes, MBA's got into the product leadership act to try to sell us more stuff. The big portals like AltaVista, Yahoo, and others introduced more aggressive digital marketing systems. Ads were everywhere! The 'business person' now drove the product definition with more and more ad units.
But then we saw the revenge of the nerds. Google was born, and data accumulation with better algorithmic search became king. With targeted ads and more efficient algorithms, the programmers returned with their analytical efficiency. Organize the data, sell more ads. Computer Science grads become the new ad men and also the Product Leads. In 2001, Larry Page tried to fire all managers with technical reports. The reason? Engineers should not be supervised by people with limited technical knowledge.
Next came a kid in a hoodie. Mark Zuckerberg was a program engineer but he also heralded in the concept of a company being a product. Facebook had learned from all the waves and companies that have come before it. Engineering was not enough. Ship product enhancements that focus on connecting people through news and experiences.
Lastly, no timeline about consumer product cannot refer Apple; the former outlier turned golden child. There's no denying that Apple makes great products. Their first foray was not a success, and it was Microsoft who rescued them with a $150m cash injection. Apple is, however, a great product design company. Their products are easy to use and reflect their focus on the user first, not as an afterthought. No product manuals needed. In many ways, Apple took engineering, design, and marketing to another level. Apple Product Leads understand the overall package and convey the experience to be created. It's a formula that worked, and many try to emulate.
Design Is the Differentiator
The world is now wired for great design and craves the speed and simplicity of a great experience. Successful products layer complexity to ensure a low cognitive load for users. People demand a great experience whether in work or personal situations. This is an evolution in the mindsets of both the manufacturer and the consumers. People such as Simon Sinek have talked about this concept and starting with why as opposed to the what or how. This evolution towards the experience also leads to a need for new types of product leaders. The question is no longer, does it work but how can the experience be better for the user.
Humans are visual creatures, remembering more about experiences and feelings, than written details. We've all heard about the importance of storytelling and bringing people on a journey. So, how has the role of the product leader evolved and where is it all going?
Who's Behind the Wheel Now?
The pace of change in the world of tech continues to speed up. People have more choices than ever before. Loyalty is fleeting! People want everything to be well designed and to reflect who they are. Apple got people to appreciate the experience created by their products. Today, apps, products, or websites need to have the best experience or people will move on. Design driven companies are outperforming the market. Just look at the success of businesses like Slack, Airbnb, and others.
If you were going to design a house, who would you want to be the lead, the builder or the architect? This brings up a lot of interesting questions from a software product creation perspective. If the product experience is now the differentiator, who should be leading the product charge? Who is most qualified to balance all the key factors required to build a product and business?
This journey leads us to a group with limited experience in leading, but loads of potential. A group that lacks the alumni network at executive levels. A group that does, however, bring new and essential skills to the table. Please welcome the Designer to the Product Leadership table. Hardware Engineers, you built and continue to build amazing objects. Software Programmers, we'll continue to need your skills to make features operational and efficient. Business person, you taught us how to be more revenue focused. But, times have changed again, and this isn't a revenge of the nerds' situation. Yes, software may eat the world but this is more introspective. Design just ate your software!
Designers, the baton is being waved in your face to become the Product Leads. You can create the businesses and the experiences people will care about.
It's up to you to take it. Are you up for it?
The clock has started and we have just kicked off ZURB Wired 2016 with Life Services Alternatives! You can keep up with our progress in real-time and see our work come to life through blog posts, photos and videos published live on our ZURB Wired page over the next 24 hours. Get involved by checking out the work we post to Notable, leaving feedback and participating in feedback tests.
One of the biggest ways you can help us achieve our goals is to cheer us on. Keep us pumped by tweeting to the team using the @ZURB handle and the hashtag #ZURBWired. We'll be checking out feed for your messages and replying as much as possible. We'd love to hear from you!
Help Us Kick Off the Event!
Use the button below to tweet out that #ZURBWired has begun:Tweet About #ZURBWired!
Follow Our Progress Live!
Now that you've helped us announce the event, head over to zurb.com/wired to follow our progress and see our live updates:
So be part of the action and follow along over the next 24 hours as we race to help Life Services Alternatives create an amazing marketing campaign!
We were thrilled to have one of the largest and most diverse set of nonprofits ever apply for Wired 2016. Now in our 9th year, Wired is our special event where we work 24 hours straight, and dedicate our entire team and resources to help a lucky nonprofit reach their goals. We've helped some amazing organizations raise hundreds of thousands of dollars and touch the lives of thousands of people. To say it was difficult to select a winner from this year's amazing pool of applicants is an understatement. After meeting with each nonprofit and hearing more about their causes, our team selected Life Services Alternatives for ZURB Wired 2016! We'd like to thank all of the other organizations that put their time and resources into very moving presentations, we hope they keep in touch for Wired 2017!
Life Services Alternatives is an organization that provides housing for developmentally disabled adults and helps them learn life skills to lead normal lives with as much independence as possible. Over the past 15 years, LSA has raised funds to purchase 11 houses in beautiful communities, each equipped for the special needs of their residents and staffed with a caring and dedicated team. This year, LSA is looking to add a 12th house to its portfolio, and needs $600k more to make it happen.
Our team was deeply touched by the success stories of LSA's residents and the passion and dedication they have towards their cause. While many similar organizations work hard to provide houses for these individuals, LSA's commitment goes a step further. They want their houses to be real homes, full of support, love and empathy amongst everyone involved.
We're going to help help the LSA team reach their goal and acquire their 12th home through a new marketing campaign that will include a brand new, responsive website, redesigned email templates and drip campaigns, print mailers, and social media campaigns consisting of a variety of shortform video clips. All of this will be completed in 24-hours straight, mobilizing our entire team and resources to get it done. We'll be working closely with LSA to make sure they can continue building off of Wired for months and even years to come.
Wired gets underway August 25th at 8 AM and goes until August 26th at 8 AM. You'll be able to follow along with our progress and cheer us on through our blog posts on the Wired page, Twitter (@ZURB and remember to use the hashtag #ZURBWired), and Facebook.
After nearly two decades, we've seen firsthand how Progressive Design has the power to transform entire organizations, and nowhere else is this transformation more startling than during Wired. ZURB Wired is our annual event where we give back to our community and dedicated 24 straight hours of our time and resources to help one special nonprofit achieve their goals. Our office becomes a command center, with our team and volunteers working straight through the night to create a new responsive website, print material, content, videos, shirts and more.
The work that our team creates in just 24 hours is so impactful that many of the organizations we've worked with are still benefitting from it months and even years later. But our goal isn't to create design artifacts, we want ZURB Wired to be a catalyst for lasting, positive change. By working directly with our team, each nonprofit learns our Progressive Design methods, strategies and processes which can help them continue to improve and grow their organization through design.We're extremely proud of the work we've accomplished so far, and we're ready to roll up our sleeves and do it again this year!
Highlights from Last Year: Downtown Streets Team
Last year, we selected Downtown Streets Team, an incredible nonprofit that's on a mission to end homelessness through the dignity of work. It was a coffee-fueled 24 hour frenzy to create an entire marketing push for their campaign to clean up our streets, educate our community about the causes of homelessness, and place those in need with jobs and housing. We even posted the entire project online to get live feedback from the thousands of people following along in real time.
Working with their team, we came up a message that all of our content and design revolved around, 'See. Change. Fight.' It was an aggressive approach with provocative language and a strong call to action to get involved to combat the causes of homelessness in the community. With a clear direction, we created a redesigned website, print collateral, digital assets, a video and marketing content.
Downtown Streets Team Regional Director Chris Richardson had this to say after ZURB Wired 2015 wrapped up:
'Everyone had the best things to say about the whole experience. I am so proud of the work we created between the ZURBians and Downtown Streets Team and am excited to put it to good use. Their expertise in design and the many different technologies required to give us a complete facelift, not to mention their dedication, made the 24 hours a huge success. Most of all, they were a blast to work with and our staff had some great bonding time.'
Become This Year's Nonprofit
Do you have an inspiring cause and a passionate team? If so, you may be the nonprofit we're looking for! We are now accepting applications for this year's Wired. The deadline is July 15, 2016. We have two requirements:
- Your nonprofit must be a registered and IRS compliant 501(c)(3)
- Your nonprofit must focus on providing services to the Bay Area community
In addition these requirements, we'll need you to submit a proposal. Here's what your proposal needs to include:
- Inspire us with your organization's mission.
- Name three teamwork tactics that will make your organization a perfect fit for ZURB Wired.
- Describe a clear goal that your entire organization wants to accomplish.
- Say which team members will commit to participating all day and night.
- Name one or two people from the team who are capable of making executive decisions on the organization's behalf. There's no time to consult with the board at two in the morning!
We'll review submissions over the next couple of weeks to pick one nonprofit. We can't wait to mobilize our team and put our experience to work for positive cause. Apply today!
The problems we've run into designing amazing products have inspired us to build powerful tools, frameworks and resources that have helped us design better and faster. We've made many of these resources freely accessible to the open source community, and it's been nothing short of awe inspiring to see how millions of designers and developers use them to create amazing sites, apps and emails.
From Frustration to Inspiration
We didn't want to use standard frameworks or libraries like jQuery, Angular, Backbone, etc because we knew that our customers would be using them too. A native solution would greatly decrease the chance of conflict or breaking their pages logic.
We scoured the net for an open source, native, @mention library and came up with nothing. So we rolled up our sleeves, put our heads down, and got to work. The result of which is Tribute, and we're incredibly proud of what we've created.
Check out our Playground Page to see how it works and give it a try!
According to recent research, 33% of people open emails based on the subject line alone and 68% decide to open based on the 'From' name. Most people spend hours of their time crafting the perfect content for their emails, neglecting these two important factors that can prevent all of that hard work from ever being seen. The truth is that people decide in seconds whether or not they will open that email you spent days working on. Subject lines, sender names and even preheader text (the preview of our email that gets displayed in our email client) all matter significantly. In general, short, clear and direct subject lines perform best for most industries. Vague, overly long, or boring subject lines kill open rates.
In some cases, a poorly chosen subject line or sender name can go beyond merely just being dull or ineffective and actually end up being rude, shocking or offensive. How so? Well, on mobile devices, subject lines and sender names are truncated. This can occasionally lead to some truly disastrous results. And mobile matters, a lot. More than half of emails are first opened on a mobile device. TL/DR: It is absolutely critical that your subject line reads well on all devices.
We're no stranger to emails here at ZURB. We've been spending a lot of time studying every facet of email and email delivery as we put the finishing touches on Foundation for Emails 2, a responsive framework for crafting HTML emails. This very framework was born out of our own needs ' we send thousands of emails every day. Foundation for Emails helps us speed up our process by drastically cutting down on development time and ensuring that our emails are fully responsive so they look great on any device.
But while we have a groundbreaking tool for developing amazing and beautiful emails, all of that hard work could be foiled by a subject line blunder. That got us thinking ... there had to be a way to quickly test out what our subject lines, sender names and preheader text looked like on the most popular mobile devices.
Sure, there are top notch paid services for testing and previewing emails on different devices, email clients and operating systems, and we are huge fans of them. But sometimes you need something quick and easy that you can test on while you're still crafting the content, without the need to go through the whole process of coding up the email.
Meet TestSubject, our latest Playground resource. TestSubject is a simple, free and easy to use tool to get a quick snapshot of what your email subject line, sender name and preheader text will look like on the most popular mobile devices. Simply copy and paste your content in and you'll get an instant preview. Avoid embarrassing gaffes and blunders, and make sure you've got a compelling message that gets people opening your message and reading your content. Using this tool will help you visualize how your subject line, sender name, and preheader text can better work together to get your email opened.
Visit the ZURB Playground and give a try!
New ZURB Master Class: Responsive Email
We've compiled all of our knowledge and insights on responsive HTML emails in a new online video course! Master responsive email by learning how to rapidly design and develop responsive emails that are on-message and display well on just about every screen, browser, and email client out there ' even Outlook.
Prototype to Production
Motion UI includes more than two dozen built-in transition and animation classes that make prototyping easy. When you move to a production environment, the library gives you total control over how your effects work.
The core of the library is a set of powerful transition and animation Sass mixins, which give you complete control over the details of an effect, from what direction an element slides, to how far it spins, to how intensely it shakes. Motion UI also includes a large number of pre-made CSS classes to help you get going quickly.
<div id="panel" data-animate="slideInRight" class="slow bounceIn"></div>
Motion is the New Flat
While previewing Foundation for Apps last year, we wrote about how 'motion is the new flat'. Animation allows us to design more expressive interfaces, by giving users queues around hierarchy, spatial orientation, and more. Foundation for Apps shipped with Motion UI, a Sass library that makes it easy to create CSS transitions and animations for your designs.
As we continue to develop the Foundation family, we're looking for ways to streamline the experience of using the three frameworks. This includes more consistent styling, naming, and architecture; revamping our CLI to build projects in any of the frameworks; and building standalone libraries that can be used by multiple frameworks.
Head on over to the ZURB Playground to see the library in action.
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!
In my past post, our assertion that Silicon Valley killed the design agency agitated quite a few industry design leaders. The post was a wake up call, not a proclamation of the end of design services. Status quo is a sure death and others seem to agree. The argument isn't whether agencies will win or lose, it's which organizations will win the design talent battle to remain relevant.
The debate is nuanced and based on more than just business cycles. Agencies do themselves no good holding on to assumptions that all things will be fine in services moving forward or that there will be a nice living doing design. Change is all but certain. Yes, service firms will exist, just not yours. The problem of building a great design organization is challenging as many evolve to polishing shiny buttons over and over. Which gets us to fat cows, disillusioned scarecrows and greener design pastures.
Plucking, Not Growing Design Talent
Whether it's an agency or in-house design department, organizations grow and contract based on the demand of their talent. It just so happens that we're in a cycle where product teams want to grow their influence. The internet has fattened quite a few agencies, turning them into fat cows. Product organizations now want all the designers for themselves. As one agency owner proclaimed in a conversation, "I only lose my best designers to product companies, not other agencies."
Disillusioned designers no longer care to scare clients into believing their buttons need to be polished again. They're tired of having their know-how insulted by less experienced clients. When agency designers are propped up to protect the farmers field with little to no mobility, the green pastures they stare at all day next door can seem more desirable to sow. And for those designers who play the role of the scarecrow, there's nothing more appealing than being asked to use their brain in greener pastures.
But here's the rub — like any dysfunctional relationship, product companies are sowing their fields the same way agencies planted theirs half-a-century ago. And why shouldn't they? When they see fat cows grazing on their fields, why not copy that model? This model, however, is no better for the designer who has the guts to think. And while product companies give designers the hoes to work, the field has rows that must be adhered too. It's not quite as lush as it seemed after all. But alas, trends happen on momentum, not completely based on fundamentals.
The Design Agency of Old
The maturation of any industry creates a consolidation of power until the cycle takes over and the next wave of innovation disrupts the status quo. The design industry is no different. While we may want to hold onto a model that has worked for decades, it's time to re-envision the design organization.
We're over a century into the formalization of the design industry. It started with a goal of streamlining things through design management and for much of the next 70 years, it stayed in the production realm, focusing primarily on making products more integrated. It's been a glorious ride, from Mad Men ad agency flare to Lowey's mid-century streamlining. The mystery and intrigue of design is captivating, even its warts. When the cows are left to roam the fields, they fatten up. And agencies have been enjoying business as usual for some time, especially with the growth of the internet.
Despite the economy downturns in 2001 and 2008, the internet has exploded and created all kinds of new and interesting problems to solve. The design industry too has expanded in all facets of design, from advertising to product design. We have no reason to doubt this trend will continue for some time. In recent years, we've seen agency consolidation, with small agencies opting to be acquired by product companies. Even more stunning is the hiring of design leaders at the expense of the agency. Companies are hungry to become design-centric, no matter how painful the process of integrating design is into their organization.
Yet service companies are not going to go away. They're too important in the balance of innovation and will continue to push new and innovative ideas. ZURB is proof. But they need to evolve.
Fields Turn Yellow After Harvest
Agencies created environments that have attracted designers with the allure of solving big problems. Over time, many designers evolve to the job of polishing shiny buttons while trying to create wireframes that solve the user experience problem. Agencies have gotten fat doing this. When agencies do this well, and perfect the art of presenting them, it's a pretty good deal for producing mediocre work.
As agencies evolve, it forces many of them to lose the ability to share real insights. Their value continues to shrink as they become sluggish in their thinking. Designers become scarecrows warding off all those who attempt to steal these opportunities, protecting even the smallest kernels of business. It's a systemic problem that comes from agency leaders fighting for growth at the cost of the design problems they face. Their success becomes their Achilles' heel.
Design-centric organizations have wised up — it's no surprise that these disillusioned scarecrows want the greener pastures in the next field over. The allure of more control, focus and influence of a product seems too good to be true. What's an agency to do?
All Fields Must Lay Fallow
In thinking about our own progression as a product design company (that helps companies create growth opportunities with design services, tools and training), we identified a number of areas that cause talent problems. You might say we needed to look at our own approach. Competing for design talent isn't just about money or sexy projects. Fundamentally, it goes much deeper. Learning how to lead and manage isn't easy in a design organization, but here are a number of factors that agencies face:
Lack of a strong purpose. It wasn't until I worked on product that I realized we needed a strong purpose to run a service business. Doing great work isn't enough. Employees need to see how they are contributing to something more than making a website. We learned a lot from defining and completing our first mission.
Lack of design leadership. Most of us start creating things and evolve. Then we add management. But management and leadership are two different things. We don't invest enough in supporting leaders who will shape the work experience around them. Employees can feel like they're wandering without design leadership.
Short-sighted business planning. Most of us have short horizons based on the nature of securing project work, which can create cycles of thrash for the organization. I was able to show through numbers that when the thrash factor was high that we created employee problems. Most employees can live in thrash for awhile, but don't see it as a way to prosper over time.
Lack of trust. Building trust can take time, but the benefits can help create a strong culture. If your employees are spending the vast majority of their time with clients, then they're in a perpetual cycle of always having to build trust (product is the green pasture). This is really hard to overcome. Simple things like trusting your employees to think can have a big impact.
Not enough time spent with designers. I rarely bug people at night or on weekends by calling them up. I thought leaving my best employees alone was what they wanted. Wrong. Employee development takes a lot of effort to understand the motivations of each person on your team. This isn't a quarterly conversation.
Insufficient pathways for your people. Knowledge work is messy and tiring. You can get burnt out quickly. In absence of a pathway, employees do life resets. Most people don't have a plan (it takes a lot of focused time) and if you don't provide one, they will create their own. It's a symbiotic plan that serves both the employee and the business. In absence of one, your best workers will leave the business.
Fields Still Need Good Weather
Despite the recent trends, service firms can still keep solace in the fact that the challenges organizations face in growing design teams isn't easy. Organizations that try to create structures similar to agencies will most definitely be disappointed. Designers that jump into these opportunities will see the growth they seek is still limited by a function of the organizational structure. It's not an easy problem.
What advantages do service firms have fostering design talent? When done right, service firms can:
- Keep the designer brain evolving through a variety of projects and new challenges.
- Bring unique perspective to designers across industries and experiences that can't easily be provided to a designer who works in a product organization.
- Help designers make leaps, see patterns and understand how to tweak their methods through new client engagements. Fresh projects allow designers to do regular resets.
Design service firms have a unique place in the progression of design thinking. There's a huge opportunity to push organizations to be more design centric and challenge the approach of product companies. It won't be easy as service firms need to shift from implementation thinking to creating unique opportunities for designers to truly influence the world. Trust is paramount as service firm untangle the problems related to creating purpose in the design work, building strong design leadership and putting business plans together that create momentum in their organization.
It's a great time for design organizations to work with designers to build amazing products and services. Design organizations have the potential to make amazing things happen online as the craft, thinking and execution of designers continues to grow. It's exciting to see where this next phase of the design organization takes our industry. In my next post, I'll talk about how the design organization might be reimagined.
Update: We recently continued this conversation in the post Design for Influence.
Leading the charge at ZURB since 1998
- Page 1 of 3
- Older Posts »