Our ZURBevents explore the intersection of product design and business. →
Come to ZURBsoapbox:
ZURBexpo is an exhibition of product design ideas to help you design great products faster. →
Our latest blog post:
A month ago, we finished our initial efforts of redesigning ZURB.com. It took a lot of work and we had to overcome many challenges, but the outcome is totally worth it! We now have a site that we’re proud of and that does a great job of telling our story, sharing our beliefs and showcasing our work.
Our beliefs are told through the ZURBmanifesto, which outlines the core values of our company in a clear and concise way. it’s used to shape how we do business from every angle.
One goal we set for our new site was to showcase our Manifesto in a way that would get people excited when they stumbled upon it. We made sure the page looked like it had the same visual language as the main site, while also standing alone.
By looking at a single slide, you can tell that this is a ZURB page. We used color, typography, sketches and iconography to add dimension to the slides (both visually and metaphorically). To accomplish all of this visual candy, we used and abused CSS and jQuery a bit. We’re going to focus mainly on the CSS side of things for today. Follow along as we take a miraculous journey into the source code of our Manifesto.
We really wanted the transition between each slide to be memorable and eye-catching. We used multiple backgrounds that changed position as the user scrolls down the page, creating an effect of depth and movement. We also used sketches that were specific to each section to help add to the story in a visually fun way. These were animated, but aren’t affected by scrolling, just triggered by the position of the scroll bar. This way, they act as little surprises that reveal themselves in a unique way for each slide, even if the user stops scrolling.
To create the animations, we used CSS transitions that were triggered at different times by injecting new values via jQuery at specific increments on the page. The challenge was that we needed to constantly know the size of the screen, even if people resized it in the middle of their visit. This required lots of JavaScript to get right, but the CSS was relatively simple.
We made a container for each animation that had a fixed height and width based on the window size. The sketches were positioned within these containers and moved around by changing values with jQuery. The trick to making the sketches actually move was using only a few lines of CSS:
// A basic transition effect written in CSS .animation-container img { -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; }
To handle a lot of the animation states, timings and positions, we had to rely on jQuery so that we’d be able to know the window size and calculate our positions and timings accordingly.
Another key factor in making the transition between each slide look and feel really awesome was how we handled the main text. As you scroll down the page, each slide overlaps the previous one, adding to the illusion of depth. At first, the text just stayed still, but it needed something more. We fiddled around with a couple ideas and decided that making the text fade into the background as if it was moving on the z-axis of 3D space would be best.
Resizing the text to make it look like it was fading into the background was pretty easy, but we really wanted to sell the illusion by making the text blur as well.
You can see how the text slowly gets smaller and blurrier.
To handle the effect of resizing the text as the user scrolls down the page, we strapped on our good ol’ CSS transform tool belt and its friend jQuery. Styling a static piece of text is simple with a transform, but we needed some logic to handle the change in size based on scrolling.
// A basic transform effect written in CSS .scale { -moz-transform: scale(.5); -webkit-transform: scale(.5); transform: scale(.5); } // Written in jQuery, using a variable to change the scale $blur.css({ '-moz-transform': 'scale(' + blurScale + ')', '-webkit-transform': 'scale(' + blurScale + ')', 'transform': 'scale(' + blurScale + ')' });
We created an equation that outputted a percentage (blurScale). This percentage would change as the user got closer to the next slide. Now we had our text scaling and partially looking as if it was moving in a 3D space.
The blur effect in the manifesto isn’t really a blur at all, it’s text that has the color attribute set to transparent and the text-shadow attribute set to different amounts. The higher the spread of the text-shadow, the more blurred the text would look. We employed a similar jQuery technique to handle the logic we needed to change the blur effect as the user scrolled.
// CSS Needed to create the blurry text effect .blurry-text { color: transparent; text-shadow: 0 0 30px rgb(255,255,255); }
Our JavaScript simply changed the “30px” value depending on how close the text got to the next slide to create the awesome blur effect that is shown.
With the number of devices being used to surf the web these days, we just couldn’t pass up the opportunity to make this puppy responsive. We utilized parts of the Foundation grid, jQuery conditional statements and media queries to render different effects and layouts at different screen sizes. One of the concerns we had was performance. Mobile devices aren’t known for handling lots of animating objects happening at the same time. This has to do with how they handle the code and the size of the load.
To ensure that people viewing on mobile devices had a good experience, we removed most of the fancy JavaScript effects and made the slides stack down the page in their normal flow. The animated images were made static and the backgrounds simplified. We wanted it to be easy to flick down the page without performance slowing people down. The changes were handled using media queries.
// Media query example @media only screen and (max-width: 768px) { .row { overflow: hidden; padding: 0 20px; }… }
We had our heads down in the code on this one for awhile, but we’re really happy with how it turned out. It was a new type of responsive challenge for us, handling such complex animations and logic while mixing so much CSS and jQuery. The parallax effect of the page helps to add excitement to our beliefs and conveys them in a unique and creative way. Sometimes the best way to teach yourself a new technique is to just jump into an idea full-force and not think about how hard it might be to complete. There are always solutions, you just have to find them.
You can take these techniques and come up with something awesome too. Be sure to post it in the comments for everyone to see. The best way to push boundaries is to venture into new territory and let others challenge your assumptions. Take risks and run with your ideas.
We looked at the current state of responsive tables, and we weren't happy. Today we've released a new playground piece, with a new, awesome take on responsive tables.
If you've ever tried to make large data tables work in a responsive design, you know what a pain they can be. Tables have a magical property that says they can never be so small that parts of a word have to be cut off — they can't overflow. That means that, when your design shrinks down for the width of, say a smartphone, large data tables will ensure your design doesn't actually shrink all the way down. It sucks.
We wanted to try and do better, so we got to work on a responsive table implementation that would meet three criteria:
A bit of a tall order but with some crafty CSS/JS, we cooked up something we think is pretty nifty. You can go ahead and check out our new responsive tables, or stick around to hear more about how it works.
As we looked at tables we realized that, most of the time, the first column is the unique key for a table. That provides the reference for the other columns, while the column headers provide the legend for what everything means. With that in mind, we wanted our responsive tables to have that first column available at all times.

This is a schematic of how the table changes from a larger screen to a small one. Basically, we take the first column and pull it out of the table element, positioning it over the table in its own element. Then we allow the table itself, minus that first column, to scroll under it horizontally.
What this allows is for the user to see the entire table (albeit not all at once, they have to scroll) while still seeing that first 'key' column. We don't have to flip the table axes, or hide data, or break the layout, we just rely on the user's ability to swipe across to see all the data and compare the rows and columns.
There are a couple caveats here. First, for the small device format we have to restrict cells to a single line (for a consistent height). The separate left-hand column and other column elements don't impact each other, so they can't correctly dictate an arbitrary height. Second, this doesn't work in Android 2.3 and below as it doesn't support scrollable DIVs. Android 3+ should be good to go.
We developed these to drop right into Foundation, our responsive, open source front-end framework. They're great if you're working on a responsive prototype, or responsive production code, and need a way to manage large sets of tabular data. While they're built for Foundation, they should work in any responsive front-end.
You can check out our responsive tables or you can go right to the code on Github.
If you're interested in other approaches, Chris Coyier did a great round-up a while back on responsive data tables — there are some fascinating approaches in there, but none which met our criteria.
If you have some other ideas to either improve on this approach, or something else we should check out, sound off in the comments. Have fun with this new code, it was fun to work on and hopefully fun for you to use!

If you hadn’t heard, bigger monitors are in, small ones are out … at least for desktops. The 1366x768 has ousted 1024x768 as the supreme screen size. Now we hope you’re not thinking that means we should stop designing for small screens, even if it is for desktops, despite what Jakob Nielsen might be saying. Because when it comes to designing for the web — size shouldn’t matter.
Nielsen makes it a point to carefully say that “small screens are finally so rare for desktop computers that we don’t have to design for them.” Then he goes on to cover his bases, saying we still have to consider small screens anyway. Nielsen seems stuck in a desktop world, a single-device myopia. When it comes to mobile devices, Nielsen seems to begrudgingly consider them and lays out these option:
That last bit of advice seems really foolhardy. We can’t ignore that more and more people are using mobile devices to access the web, be it for tablet or smartphones.
Nielsen does make some good points about larger screens (like optimizing for widescreen monitors around 1,440px wide), something we considered when it came to images for the new ZURB.com homepage. But like 960 grids, we can’t get stuck in one screen size or device.
Don’t get us wrong, we agree with Nielsen that the desktop is far from dead. Tablets and phones are very much consumption devices (for now). It’s very easy to say that mobile will kill the desktop or the laptop as we use our mobile devices more and more everyday. When it comes to writing long pieces or editing/writing code or text, desktops are still where it's at.
For the time being, we’re still going to use a variety of devices for different tasks. It’s not devices, however, that we’re designing for — it’s four corners, no matter the size.
So it’s a waste of time to develop sites specific to each device. What’s needed is a modern grid system, which is why we developed Foundation and why we’re on the road to Foundation 3.0. Once completed, it will be one of the most, if not the most, modern responsive grid system in the world.
We’ve already released a taste of Foundation 3.0 and another taste is planned for later this week. But what does it take to build a modern grid system that meets the challenge of building a robust site and still look good on hundreds of different devices and browsers?
In other words, what is it that we need in a modern grid system. Let's take a look:
Here’s what such a grid would look under the hood (take a close look, it’s a sneak peek under the Foundation 3.0 hood):
OK, this looks great for desktops, but for smaller devices, we’ve added additional styles wrapped in this media query:
But there’s some overriding we have to do, to basically tell the browser on a small display to: don’t float the columns, don’t give them a min-width, don’t give them margins:
There’s more to building a modern grid system than just these two bits of coding. In fact, Jonathan goes completely under the hood to show us step by step on how to build such a grid system in a recently published .net Magazine article.
When it comes to being a responsive designer, remember what Yoda said, “Size matters not.” What say you?

Last week, we were excited here at ZURB to distribute new iPads to every member of the ZURB team: design, operations, marketing and engineering — even our interns. There's plenty of companies in Silicon Valley that kit their employees out with nice gear, but this wasn't just about everyone having shiny toys (though it doesn't hurt).
You've probably noticed that it's not just laptops and desktops people are using these days. Other classes of device, like smartphones or tablets or eReaders (etc, etc) are beginning to dominate how people access the Web, or talk to each other, or capture and share things in their life.
We believe that, given this inevitable shift toward more disparate devices, it's important to put more of our eggs in that basket. That's why we developed Foundation, our responsive framework for developing sites and apps for any device. That's why when we relaunched ZURB.com we did so in a way that worked across devices, and it's why we develop sites and apps for our clients responsively.
There's plenty of reasons to have iPads in an office. We use them for QA, we can use them to present work to clients (or each other) ... but the biggest reason we kitted out each and every ZURBian with an iPad was to foster an environment of multi-device design literacy.
It's not just our designers who need to understand how Design works in a multi-device world. Our marketing team needs to be immersed in these devices so they can talk about it. Our engineering team needs to know about them so they can build new apps and services to cater to it. Our operations team needs to understand the multi-device world so they can plan for it, and work with it, and find new talent to drive it. We all have iPads because each and every member of our team needs to intuitively understand the multi-device world (we all have smartphones, too) and understand what it means for our business and our industry.
Here's an example of how this is already helping our team. The new iPads, with their retina displays, make for a great reading and browsing experience. We also recently relaunched ZURB.com with a visually rich design. However: we did almost nothing to cater to retina displays (it didn't even exist when we started the redesign). No high-resolution imagery, no consideration for the improved readability when it came to font sizes and the like.
We could simply serve up giant images and scale them down for everyone else, but something else the iPad teaches you is that while the resolution might be enormous, often the bandwidth is not. Even on 4G LTE Retina-sized background images are a seriously large file load. We're still working on this problem, but without team-wide exposure to this we might not have even bothered and we have to bother. These devices aren't going away, and they're not going to get less capable.
That's a technical example, but the effect is spreading already. When we evaluate new services to drive operations, we consider whether they work on different devices. We're already planning for TVs with connected AppleTVs in our breakout rooms, because our iPads can present directly on them without messing with cables. And so on.
Consider how immersed you are in a multi-device world. Smartphones, tablets, notebooks, eReaders, glasses (hehe), TVs, cars ... to work on what we all work on we need to understand these things.
Curious to learn more about the ZURB culture? If you’ve been following our posts from last week, we gave you a nice look into how a new designer adjusts into a new environment as well as our approach to failure. It’s different, and we embrace it!
Culture aside, we had two other posts covering entrepreneurship and customer service topics. Grab that cup of coffee and enjoy our Week-In-Review.
One of the most exciting times in a ZURB designer’s career is joining the company, but it doesn’t come without a few bumps in the road. Alina, one of our new designers, shares her experience joining the company and the issues she encountered early on in her time here. We’re excited to share some insight into how ZURB “breaks in” a new designer — and how our approach for doing this differs from most other design companies out there.
Read: "Breaking In A New Designer"
Customer service is an important part to many businesses, but is it crucial? Forrest examines customer service from ZURB’s angle and says it’s not just important, it’s of core importance for product gut reactions and long-term company strategy. Don’t underestimate the importance of day-to-day customer interactions in helping your business excel in an increasingly-competitive world.
Read "In Product Design, Customer Service Is Much More Than A Simple Q&A"
We’re not perfect. At ZURB, we embrace failure as a core component to our creative process. We foster success through failure, but just how do we go about this? Ryan shares our point of view on a topic many people like to put off to the side, and references personal and business examples to give context to the point.
Read "Rewarding Failure? Actually, We're Fostering Success"
Not all of us were biology majors in college, but many of us actually can apply a useful tool: The Scientific Method. Ryan breaks down the method and discusses each step in great detail from a startup perspective. Testing out your ideas are crucial for success, whether or not you use the Scientific Method to get there.
I’m one of the newbie designers here at ZURB. It’s an exciting place to be and I’m so grateful to have joined this powerhouse team. But even with all the joy of coming to work everyday, there are still some growing pains every new designer experiences here. That’s because ZURB is a very special place and we do things quite different here. More than anything else, the pains come from getting up to speed on ZURB’s unique approach to design and breaking some of the (bad?) habits we’ve picked up along the way in our careers up til now.
As a new addition to the team, there’s a lot of pressure to make yourself of value and validate being added to ZURB’s awesome team. (Honestly, the pressure is just in our heads, not brought on by the team.) We desperately want to be “worth it,” which means that mistakes are really hard to get over. Even a small mistake can feel like a huge letdown — a failure.
But failure is a really big deal here at ZURB. In fact, we have a special word for it — opportunity. That’s because every half-baked idea and every inept solution is our chance to find out something new about the product we’re working on. We always throw out a ton of ideas to our customers, knowing fully-well that some of them are too out-there and a few are just plain wrong. But there are three good reasons we still do it:
When new designers, such as myself, join ZURB, we use our experience, judgement and best practices to present solutions that we can recommend with confidence. We just want the customer to look at our work and instinctively fall in love with it, without further explanation, of course — after all, it’s all in the layout, right? The trouble comes when the customer starts asking questions and challenging our recommendations.
The truth is that work doesn’t sell itself. A great concept can be easily scrapped by the customer who isn’t going to read your mind about its merits, while a mediocre idea can be a wild success when positioned correctly.
We often work on very complex products, which require sophisticated solutions. And that means our customers expect us to have the answers on all of their hows and whys (and rightly so!). Which is where I found myself recently — stumbling to explain an elaborate interface and defend even the simplest element, all because I didn’t think through the justification ahead of time. Having a clear point of view is valued greatly at ZURB, but learning how to articulate that point of view is as important, if not more.
When most agencies get projects, they hole up in their offices for a few weeks to do research, put together strategies and comp up layouts. Next, they assemble an impressive presentation and have “the big reveal” meeting with a customer. There the customer-agency relationship is simple: customer provides a project, agency provides a solution. And it’s really the only process designers know before joining ZURB.
Things are really different here. We don’t do big reveals. Our process is not mysterious. We’re very transparent about how ideas turn into concepts, which turn into solutions. We present one small idea at a time, which our customers can easily grasp and believe in. We then combine several small ideas, and they magically become solutions that customers feel invested in and fully appreciate. It’s one small “aha moment” after another, that in the end amount to a big “wow factor.”
Trying to present a solution right from the start can actually backfire! Recently, I worked on a project where I tried to bite off too much too fast. I presented too many new ideas in one little neat layout, which just left the customer confused — we could actually hear their eyes glaze over on the phone. But had I showed all those pieces individually, the customer would have been open to them and felt like they were part of the creative process.
What’s more interesting is that, after working with ZURB, customers often adopt these methods of creative exploration and iteration within their organizations. We love hearing that marketing directors are picking up Sharpies and shopping around sketches to their team. That’s actually one of our schemes for world domination.
It’s been an exciting and challenging couple months. I can only imagine how much I have yet to learn!
This past week, our blog content centered around the theme of challenge. Product designers and entrepreneurs alike face challenges that they cannot anticipate, so addressing problems and challenges quickly will help move projects forward.
Without further ado, here are some of our biggest posts from the past week. We highlight product design tips as well as how to address challenges with problems, waning passion and securing your seed round.
Compelling product design positions a company well for conversions. Eric Schaffer’s video examines six steps to persuasive design — and Ryan expands upon his points to show how product designers can get conversions.
Read "6 Persuasive Product Design Steps to Get Conversions"
It’s immensely important to take a proactive approach in solving your problems. Ryan examines three ways you can do just this — and avoid inhibiting your project progress.
Read "3 Ways to Actively Solve Problems, Not React to Them"
New opportunities often present various challenges we simply cannot anticipate when we start out. In this post, Forrest highlights the example of a school teacher turned accountant and shares advice for keeping passion high when chasing desires.
Read "How to Stay Passionate When Chasing Your Dreams"
There’s enough pressure building something people want, but what about pursuing your seed round? There are a lot of questions to consider before diving headfirst into the process. Ryan presents these in a digestible, bulleted format. Don’t over think it, now!
Read "Going for Seed Funding? Be Prepared to Answer These Questions"
We’re back with our look at the past week in review. Boy, it was an exciting one for us. We launched our new ZURB.com website and released an awesome new font set that you should download today!
In case you missed them, here are the biggest reads from the past week.
Jonathan wrote a great post last week on how we used Foundation to mobilize Verify tests. We had a great post on the Verify blog on the new multi-device feature, so we dive a little deeper in this post.
Read "Mobilizing Verify's Tests With Foundation"
Our first major launch from last week — the new ZURB.com redesign. Our team was stoked to see it go live and Anthony filled our readers in with how it came to be. Let us know your thoughts on the new website in the comments!
Read "3 Years in the Making ... How We Rebuilt ZURB.com"
New Foundation icon fonts highlighted our second major launch. Chris offers a sneak peek at Foundation 3.0, filling us in on the process and benefits from using the fonts. You can download it right now and check it out on the Playground.
Read "Foundation 3.0 Sneak Peek: Icon Fonts"
Companies often fall into traps they don’t intend to fall into. Ryan references Noah Wasserman in his post about how to avoid common startup pitfalls. Through surrounding yourself with the right people, you can persist and make it through any challenge.

As the Foundation we know today starts to take its place on the shelf, we start looking forward and executing on our master plan for the future. Foundation 3.0 is going to be epic! We’re not just going to make it the fastest framework for prototyping quickly and building solid production sites that present well on any device, but it’s also going to help you create better designed sites.
Today, we’re revealing part of this plan — a small glimpse into the long list of additions and modifications Foundation 3.0 will include. We decided to whet your appetite with the first installment of our new Foundation Icon Font Sets!
We’ve gotten a few requests for icons inside of Foundation. A few of us in the office have even mentioned it. We bought a program so we could test out the process for creating a custom font out of vector shapes. This test got us excited about the possibilities for styling such a font. We’d be able to include any number of these icons at any size, color or CSS style we could imagine. This gives us ultimate control over the icon sizes we use for various device sizes without the need to save multiple versions of the same icon. We were sold, it was time to move forward with implementation.
Once we pulled the trigger on this idea, we quickly came up with an initial list of icons that we thought were generally useful to UI and web designers. We iterated quickly and settled on the set you can download today. While it’s hard to re-invent how to illustrate an arrow glyph, we tried to give our glyphs a unique style of their own.
After the icons were designed, it was time to map them to characters on the keyboard and export them into our font sets. Our initial offering is three icon font sets; that’s over 100 icons! You’ll be able to download it today and get started using them.
By having glyphs that exist as a font, you get the advantage of scalability. Now you can have icons ready to go in any size, color and style. You can even use some awesome CSS text styles like shadows and gradients to make them feel less like a glyph. Forget about copy and pasting from Illustrator to Photoshop only to have the pixel edges look fuzzy. Now you’ll get the same crispness that you get out of any font rendered on the web.
We’re showcasing our pre-release of this font set on our playground. Get over there and download it, the Foundation Yeti commands you! If you don’t, forget about extra glyphs in your stalkings this year.
We’d love to hear any suggestions for glyphs to include in the final set. We have over 200 spaces to fill in a character set, let us know!
We’re starting a new series here at the ZURBlog: the week-in-review post. Hey, we realize that time is money — especially for our readers. So we’ve decided to compile our can’t-miss blog posts from the previous week into a single post that will sum up the topics we covered and discussed while setting the stage for the content to come.
We’re publishing the week in review on Wednesday today but look out for it every Monday from here on out.
This past week, we covered a variety of entrepreneurial topics, how content plays a role in design and had a look at some awesome CSS photo filters (which are yet to come!).
Without further ado, here are the posts you should check out from last week!
We control the content. Ryan wrote a post last week on “The Writerly Design of Content,” which covered the importance of consistency in content styling. The importance of content in design cannot be underestimated.
The true entrepreneurial spirit. Being an entrepreneur is so much more than fame and fortune. In this post, Ryan examined three qualities of the entrepreneurial spirit as seen through the story of a determined child.
Success, defined. Startups of all types define success differently, so how do entrepreneurs define success for themselves and their companies? I examined this question with four influencers. Their answers will get you thinking about what success really means.
As one reader tweeted, you've got Instagram in your web kit. Anthony shared some awesome CSS photo filters with us. No Photoshop or jQuery plugins needed.
Did you miss our ZURBsoapbox with Robert Scoble? Hear more about these “freaky” apps and how they actually push forward entrepreneurship as we know it.
And Stack Overflow co-founder Jeff Atwood will get on his soapbox on May 11, sharing with us the hurdles he had to overcome as he built the entire Stack Exchange Network from the bottom up. Spots are filling up fast so make sure to RSVP today!