ZURB

Evolving Pattern Tap into a Designer’s Workflow

Mon, 20 May 2013 16:54:00 -0700

Pattern Tap Code will be the destination to find code patterns that work seamlessly into your site.

Bryan explained the other day how Pattern Tap fits into the larger aspects of our educational channel, Expo, and the overall larger business. As we mentioned, we wanted to expand on what Matthew Smith originally built. However, we didn't immediately redesign the site once we took over a year ago. We only did small tweaks at first.

Why wait?

We wanted to learn. Before we could start changing things wholesale, we needed to understand how everyone used it as a resource. That way we could build upon it. Our first goal was to seed it with content and be consistent about doing so. Since we acquired the site, we've added over 750 app and web patterns to its ever-growing library.

But our second goal was born out of the success of our Foundation templates. The canned HTML made it easier on designers to get started designing responsively. Seeing how it helped them, we decided that Pattern Tap had to evolve into a product that fit someone's workflow as well. We had to expand on what would be available as patterns — and the next natural step was code patterns.

It's great to not just see a finished site or app, but how would you be able to implement it? If we were going to fit within a designer's workflow, then we had to provide examples to answer those questions. After all, coding is as much part of design as the visual patterns.

But as we started to explore how best to do add code to Pattern Tap, we learned a few lessons that helped shape what we were doing.

What We Learned Turned Into Our Goals for the Redesign

1. Pattern Tap is a Reference Tool

Pattern Tap is a reference tool that lives in the Expo library. We had a few discussions on the best way to present it as such. We explored whether we wanted a Masonry-type layout, where each element could be a different height. But we came across a few problems:

Heights don't vary that much. The most variation was from a vertical phone layout. Most of the elements we were tapping were horizontal and had similar ratios.
It didn't feel like a library resource. It's not easy to scan items and see tiles if they are not lined up next to each other. That's why we modeled our thumbnails after the book code labels, and not the varying heights of the books themselves.

Early visual iterations of Pattern Tap where we tried a layout of varied heights.

We had to create a consistent style with our other Expo properties as well. Pattern Tap had to feel like it belonged to the same family — a resource that lived within the community.

Once we had the pattern, if you will, of how we'd present Pattern Tap as a library resource, we had to tackle a few more things.

2. Cross-referencing and Getting Rid of the Back and Forth

In the previous design, finding a pattern required that users go to a separate page to browse for a tag. Pattern Tap, however, is all about the browsing. We don't want you to have to go to another page. We want to keep people on the page. Which is why we put everything in a filter bar so you don't have to go back and forth.

The filter bar also helps users cross-reference styles with types. Previously, finding a login form was easy but finding one that was also flat was not. Now with the filter bar, it's possible. More than that, it encourages browsers to do so.

Much easier to find backgrounds that are blue

There's still a fallback. If you want to get familiarized with the different types and styles we have, you can still see the full list of tags by hovering on the Element navigation item.

3. Making Pattern Uploading Easier

When submitting a pattern, you no longer have to add user tags.

You can still upload patterns the same as before, but we took out the requirement of the user tags. We learned that it was an unnecessary part of the upload process, especially since these are different for each user. You can still do your own tags — just go to "Saved Patterns" under your account. That way you still have the functionality, but it doesn't expose your user tags to everyone.

4. Reducing the Amount of Actions

Like, comment, or add to your saved patterns. Simplicity is key.

When it came to "liking" patterns, we had two actions in the previous design — a heart and a light bulb. If it was great visual design, you'd use a heart. If it was a great idea, you'd use a light bulb. And it really just boiled down to "this is the one I like." So we consolidated that to just a heart, which translates as "I like this, thanks for the great design." And the heart as a pattern itself is universal and understood.

5. See Patterns from the Same Source

Wondering what else we've tapped from Desk.com? Now you can without having to search!

We wanted to even further cross-link patterns from a given source. Say you were looking at a pattern from a Google site. Then you'd also see what Google is doing across other properties, but didn't want to browse or search around. Now these get pulled in so you don't have to leave the pattern you're looking at and can easily decided if you want to select another pattern from the same source.

Not Just for Aesthetics

The changes weren't just for aesthetics. It was about creating a resource that designers could come back to again and again. This redesign is part of our ongoing effort to educate designers on what makes for good product design and Pattern Tap is an important tool to help us do just that. But this is only the beginning. We're be adding a few other things to help designers as well as making tweaks to the site.

New Pattern Tap Site Lives in ZURB

Fri, 17 May 2013 15:01:00 -0700

Today, we launched the new Pattern Tap with code patterns. Since acquiring the site last year, we've been adding new patterns to the library everyday and learning from how people use it. It's exciting to expand on Matthew Smith's vision and introduce code patterns to the library. It's an amazing resource.

Introducing Code Patterns

The new code patterns will help product designers use Foundation more effectively in their workflow. The code patterns are great for prototyping and building responsive websites. The introduction of code patterns came as an evolution of the success of our templates on Foundation, an add-on page that quickly became one of the most popular pages within ZURB's network. We're excited about the possibilities and look forward to evolving the site.

The new Pattern Tap fits nicely into our Expo, a resource for product designers to learn, practice and get inspired. This is just one step in our effort to build an awesome education service. We've got a lot of pieces in front of us to refine, but we're up for the task of making the Expo amazing.

Patterns, Expo and ZURB, Oh My!

We recently released the new ZURB.com. It paints a better picture of our evolving business and how we help our customers. As a service-based business, we've been working hard to provide valuable tools, open-source software and training to help our customers we work with get better at people-focused product design. It's a monumental effort for a small team of 25 who are helping the entire globe, but we're nimble, passionate and ambitious.

The Expo is the newest addition to ZURB. It's been evolving over the last four years and it's taken a form that our fans and customers can now appreciate. Product design education has been lacking and we intend to push the boundaries to help companies and students of design grow. The internet needs bright minds to shape its future and ZURB wants to lead this charge.

Building Our Company, ZURB

So what's the thinking behind this effort? Why not just provide consulting services?

It's no longer possible to be successful providing product design services online without thinking about the evolving needs of our customers. Things move too quickly online. Too many devices. Too many variables. Delivering a finished "design" or "UX specs" to a client isn't realistic as the work needs to continually evolve based on customer insights and analytics. Staying stuck in the mindset of a traditional design-services business won't work anymore.

What this means for ZURB:

We have the opportunity to provide top notch product design services on top of our Foundation framework — while also continuing to support our customers in a touch-and-go relationship, where we can prototype for them using our framework. And with a framework that millions of users interface with, it's a solid bet.
We can work through prototyping ideas with Solidify , iterate quickly, test those ideas and teach our customers to prototype long after we've engaged with them on a project. When clients come back, we can re-engage at a higher level. Our clients now have access to the same specialized tools we use. Our product design suite continues to get better every day.

In the process of working through a project, customers will eventually need to hire employees to own our work that we've completed together. And that often involves teaching existing employees ways to solve the same problems we run into every day or helping them connect with our like-minded audience of product designers.

We're approaching our services as more than a one-shot deal, where we continue to work with our customers in an evolving way. We can also help others that aren't always a fit for our services. It's awesome to think about all the possibilities of helping our customers get better at product design!

Pattern Tap is a Great Design Tool

With the updated version of Pattern Tap, it's another tool in our larger toolbox to help designers learn how to build websites and products. It's our hope that designers will continue to use it, like our other tools, as a resource as they grow their skills. If you've got feedback or ideas on making Pattern Tap better, reach out to us at patterntap@zurb.com!

Stencils for Foundation 4 are Now Here!

Tue, 14 May 2013 15:54:00 -0700

Since the release of Foundation 4, we've had people asking us to update the Foundation 3 stencils to the latest version of our framework. Well, we heard you and now we present the new and improved stencil sets, now Foundation 4 ready!

When we created the stencil sets for the first time, we knew it would help us produce wireframes and mock-ups faster. This is one of the reasons we decided to update the stencils to the latest version of our framework. We also want to make sure that everyone using Foundation 4 is also able to build faster and better layouts.

What's New in This Version of the Stencils, You Ask?

Well, we added tons of goodness in this new version of the stencils!

You can find all of the elements from the previous version of the stencils plus a whole bunch of new goodies that you can use to create your awesome wireframes and mockups for your projects.

Checkout some of the new hotness we included:

Switch
Custom Forms
V-Cards
Progress Bars
Pricing Tables
Sections
Thumbnails & Placeholders

Pretty cool, right!? Ready to start creating great wireframes that you can use on your projects that look awesome and saves you tons of time? Check the OmniGraffle and .PDF stencils on our playground page, download 'em and wireframe away!

Get the Stencils Today!

3 Techniques to Make a Good Footer Great

Mon, 13 May 2013 11:00:00 -0700

We recently wrote about what your footer says about your business. You could say footers have been on our minds a lot. We've even asked ourselves, "What makes a good footer, great?" Here's what we've come up with: a good footer must provide valuable information that allows people to navigate the site, engage and re-engage visitors with quality content, and give them a means to seek help.

It's easy to design footers as an afterthought. Designers assume that visitors just blow past it anyway — and why shouldn't they? People spend 20% of their attention below the fold. Yet those that scan to the bottom will eventually hit the footer and it'd be a disservice not to use it to your advantage.

A footer is where you can connect even more with your viewers. It's an opportunity, where you can direct them to other parts of your site or where they can contact you directly. So next time you're designing a site, ask yourself:

Does my footer provide high-value links that will help people easily navigate my site?
Does my footer engage visitors with quality content, and have hooks to your social media content channels to re-engage them later?
Does my footer build trust with my site's visitors by provide a clear path to get help and contact us?

1. Provide the Most Valuable Links as a Means to Navigate Your Site

Remember it's not quantity, it's quality that search engines and your users care about. On the whole, footer links typically have the lowest click-through rate. However, that doesn't mean we can ignore them. Keywords in the links still matter, just like elsewhere on the site. Constantly evaluate the click-through rate of each link in the footer. If there are any unnecessary or unused links, remove them from your footer. Always think about what your users want, not what search engines want. That mental model will help you narrow down links that provide a lot of navigational value to your users.

Strong hierarchy - Group high value links into categories

While we are on the topic of providing navigational value, grouping valuable links into easily identifiable categories will help users make sense of all the links in your footer. Your goal should be make the footer as usable and understandable as your header.

Read annotations on what's working well in this footer

Quality presentation - Use plenty of white space and good typography

Once you've organized your links, think about how to make them legible given the relatively small size of footer links. Making people squint to read what's in your footer is a surefire way to make people not use the footer for its intended navigational purpose. Using good typography and varying the size, weight and letter spacing improves the legibility of links in the footer.

In this example, the designer creates a strong visual rhythm by using italicized headings and contrasting light copy against a dark background.

People also need to be able to perceive the distinction between different groupings of links in your footer. Using plenty of white space helps spatially separate different pieces of content. It helps people easily identify boundaries.

Our new footer, which were about to release another iteration of, does a great job of spatially separating different pieces of content so users can easily comprehend who we are, what we do and how to reach out to us.

Before:

After:

2. Provide Valuable Content that Gives a Reason for People to Return

Be social - engage users in your social ecosystem

It's very advantageous for designers to find ways to engage users with your social networks. Giving users one-click access to valuable information on your social feeds will provide a means to re-engage them even when they're not on your site.

Engage with quality content - give users a sneak peek before they sign up

Your site and blog is a great place to engage viewers with quality content. We highlight the four pillars of our business, such as Expo, in our footer. Expo is a site we've dedicated to exhibiting feature stories, tutorials and classes on product design. Highlighting it in our footer gives our visitors a clear path to discover interesting and engaging content to read. By creating great content, we attract interest in our services, products, Foundation and educational efforts.

3. Build Trust Through Fanatical Customer Service

The old adage, a company is its people will always stand true. Treating your customers with the same level of respect as your employees, will keep them coming back for more than just your products. Think of strong brands like Zappos, Apple, Rackspace, and Warby Parker. These companies not only have strong brands, but their customers have a cult following for everything they do.

Take Zappos. When they ran out of a particular shoe, a customer service rep went to another shoe store to get a pair for a customer. Or Warby Parker, who shot videos of themselves answering customer questions and uploaded them to YouTube.

Link to contact page or form

The footer serves a functional role, as well as a human one. Helping people navigate and find relevant content is important. Humanize your website by providing a clear path for people to get in touch with you.

Live chat or support number

Offering fanatical customer support begins by prominently showing your phone number. If people have a question about your products or service, they can talk to a sales representative or talk to support if they have questions.

Hours of operation

Don't make people guess when you're going to be available. Reinforce that they can reach out anytime for assistance. This will build your brand as a customer service driven company.

Functional Yet Infectiously Engaging

We often overlook the importance of a footer. But as designers we shouldn't. We should ask ourselves how we can design the footer to meet and exceed your customers' expectations. Help them quickly and effectively navigate your site, engage them with interesting content to spark their interest in what we have to offer, and provide a clear path to get help.

17 Design Feedback Techniques that Influence Others and Win Meetings

Fri, 10 May 2013 16:16:00 -0700

Picture this. The designer on your team has spent the last week whipping up lo-fi wireframes that highlight solutions to the user and business problems you're trying to solve. She's worked through all the interactions. Then she presents to the rest of the team. But she flounders, stumbling over her words. Everyone has a deer-in-the-headlights look on their faces. She's lost them. And it ends with the dreaded four words, "what do you think?"

The designer hasn't asked specific questions, highlighted the process or exposed weaknesses, because you didn't coach her through it. If the team comes in at the middle of the design process, they won't have anything to say. Well, except, "looks good" or "like it" or "wouldn't change a thing." Now the designer on your team is stuck. Unsure. Is it really good? Does it really work? Are there no changes to make? And if the team comes in at the tail end of the process, their feedback could derail all the hard work that's been done with one little, "we like it ... but ... (insert major change here)."

After 15 years of design critiques, we've figured out how to mitigate experiences like this. Know this: soliciting and giving feedback isn't as simple as walking into a meeting and asking for an opinion. Without clear direction from the project lead and the designer on your team, a feedback session can crumble like an overcooked falafel. But design feedback can help you ensure you don't cook up a bad batch.

1. Stop the Yammering

A lack of clear direction can stymie a design critique, wasting the team's time. Without a clear agenda, everyone on the team will be left fiddling with their laptops or phones, more concerned with the ticking of the clock than what's being said.

Solution:

Outline to the team the types of feedback that's being sought in a critique. The designer on your team needs to articulte the benefits of what they've done and give people enough time to review the work. At ZURB, we send out an email the day before a feedback session that does just this. We include a link to any prototypes, wireframes or any work we've done, with clear explanations of what we've done and why.

2. Quit Inviting Everyone to the Meeting, Especially at the Wrong Time, Which Happens All the Time

Having more than a handful of people involved results in feedback from those that have no stake in the project. People will bombard the designer with feedback because they feel as if they have to contribute. Worse, it doesn't help move the project forward at all because the designer will be integrating feedback that won't improve the product.

Solution:

Target specific people on the team that can provide valuable insight. Who on the team has a stake in what's being worked on? Who is it that can provide actionable feedback? Say the designer is working on a responsive design, then she might want to target peers who have had experience doing it. At ZURB, we find the optimal project size is made up of no more than 5-7 core people.

3. Win Over the Devil's Advocate with an Orgy of Evidence

A design devil's advocate challenges assumptions, arguing for qualitative results. Sure he might be seeking better answers, or he may be difficult to work with. But a design devil's advocate isn't a bad thing. He can expose flaws in a designer's logic and a good spirited debate can yield answers.

Solution:

The designer on your team can win over a devil's advocate with quantitative rationale. Provide supporting evidence for their design decisions, either through experience or case studies. The designer on a team can basically bury the devil's advocate with data supporting why she's right. Soliciting the opinion of others in a feedback session can also provide counterbalance to a devil's advocate. At ZURB, we use Verify to compliment our design decisions with quick data points. It's worked wonders to get clients to back our ideas.

4. Don't Treat Design Work as Abstract Art

It's hard to give feedback on something folks don't understand. The designer on your team isn't presenting a Jackson Pollock work. She can't throw something up without a clear explanation on the goals. The rest of the team won't know how to give feedback properly or will lose interest completely, elevating uncertainty.

Solution:

Coach designers to be problem-oriented in their presentations, even if it's a creative solution. The team needs to know the benefits of what's been done, understanding how the work meets both business and user goals. In other words, the team needs context. We provide thumbnails of the work during client projects with clear explanations of the work, explaining our decisions. Those thumbnails link to a larger image, so that a client's team can view the details. This leaves the client knowing in what context to give their feedback.

5. Tangents Are Good, Except When They're Not

In Design Thinking, tangents are great when the team's opening up a problem, exploring all the options in front of you. But if a team's trying to close down a problem, it can lead to muddled feedback.

Solution:

Keep in mind what stage of the process the team is in. The team can't shy away from tangents in the early stages of product development. The designer on the team might be cutting herself off from a potential solution. On the same side of the coin, she can't go down a thousand roads when she's trying to close down a problem. At ZURB, our design leads coach and train our designers to know when to open and close down problems through constant, iterative feedback.

6. Don't Screw Yourself with Useless Questions

Broad questions, such as "what are your thoughts," can expose you to random, unimportant feedback that doesn't connect to the direction of the design. The feedback will be unfocused, which will lead to a muddled product.

Solution:

Coach designers to ask specific questions of the team. If the designer is working on a mobile layout, she should ask if her interaction decisions make sense in that context. Ask the team if they would actually want a particular function in mobile that they already have on the a desktop view. Or if they would even want a toggle to collapse a stream on a mobile view, like we did recently for our Forrst redesign. Specific questions lead to actionable feedback.

7. Build a Relationship with a Designer's Ego

Designers may ignore feedback, which doesn't help propel projects forward. If a designer is unwilling to listen, then she won't notice gaps in her thinking. It takes an outside view to spot those. Without that, a designer can become myopic — she can't see the movie when she's inside of it.

Solution:

Build a relationship with a designer's ego. Make it a conversation rather than a passive agressive exercise. Relate to the designer's plight. After all, we've all been at the receiving end of feedback and that experience can help you coach a designer through criticism. At ZURB, design leads are designers themselves. They use their past experience to guide them on the best way to express feedback or ideas.

8. Email Gets the Feedback Going, But Won't Finish It

Email is great for starting a feedback loop, but not so much for closing it. The product design feedback can quickly get lost in a chain of emails going back-and-forth between several people. Context is lost. But email can create sparks among the team. Email can be used to outline the benefits of the work that's been done and link to prototypes or wireframes. But getting back a novel of bullet points can be meaningless without context.

Solution:

Forcing people to articulate feedback out loud often helps them boil it down to what's necessary and not worry about the nitty-gritty details. Context is everything. If you can't meet face-to-face, feedback can still be giving contextual through tools like our app Notable, where the team can easily annotate screenshots.

9. It's Not What Design Work Says, It's How It's Presented

The design work can be solid, but a poor performance can sink it. Uncertainty in a designer's presentation will cause the team to lose confidence in what she's trying to accomplish. A study of why nonprofits get this wrong reveals that a lifeless presentation can kill ideas. They found that those surveyed gave a C- to most presentations they attended. A staggering 66% of 2,501 surveyed got nothing out of a poor performance.

Solution:

The designer on your team needs to present work with confidence so he can solicite the right kinds of feedback. She needs to own the work, telling others clearly what he did and be able to explain his choices. Stand tall, work the room and make eye contact with everyone. It's key to project and vary vocal tones. A louder, more excitable tone gets an audience excited. A softer, duller tone puts them to sleep. A designer won't get useful feedback if they can't connect with the rest of the team.

10. Even Babe Ruth Struck Out

Babe Ruth had a batting average of .342 with 714 home runs, which meant he missed most of the time. Understand that designers aren't always going to hit it out of the park. They're going to swing and miss. Things that they thought would work might not.

Solution:

Iteration is about working through the wrong answers. Feedback helps a designer recognize what those are, allowing them to push forward. At ZURB, designers iterate quickly on ideas, seeing what works and what doesn't. A culture must allow designers to fail fast, so they can move past bad ideas and on to winning ones.

11. Designers Rarely Have the Right Answers

OK, this isn't suppose to be an insult, it's the nature of the job. Stubborn designers can sabotage a project. Designers are wrong a majority of the time (remember Babe Ruth above?) as they work toward solid solutions. If they accept this, then they'll be receptive to feedback. But they need feedback from the right people. If not, then they'll build something that is a patchwork made up of useless advice.

Solution:

Know who to pull into the feedback loop based on experience. Building relationships with other members of the team is crucial. Get to know their strengths, their interests. Recognizing those skills can help in deciding whose feedback to seek. Say a designer is having a tough time with a code bit. Who is it on the team that is a code junkie? That person might yield the better feedback. A team leader should be able to pull that person into the conversation by appealing to her interest directly.

12. But Designers Shouldn't Be Pushovers

Designers shouldn't be just implementors. Clients and stakeholders don't just want someone who likes to be told what to do. They want problem solvers who can work through solutions that meet the needs of both the business and the user.

Solution:

Designers on a team need to ask questions, seek answers. They can't just accept a list of feedback. They have to think through that feedback, what it means and determine what's important. They have to consolidate it and be able to project it to the rest of the team. At ZURB, our designers ask "why" five times, which helps them get to the root of a problem rather than treat the symptom.

13. Design Work is Like Theater

Nothing stinks more than when a designer or project manager who just tunes out during a feedback session. Team members have given up their time. Don't waste it. After all, the designer has sought out their opinions. A team can lose faith if they feel they are being ignored.

Solution:

The designer on the team needs to project back concepts and ideas from others. They have to be able to pick out key points and broadcast them confidently. At ZURB, designers practice this through design critiques. They also use creative problem solving during our Friday15 challenges. And they get coaching from our design leads.

14. Memory is a Harsh Mistress

Even if you do pay attention, a designer isn't going to remember every piece of feedback. And negative feedback can shut a designer down. She'll keep churning that negative comment over and over again in his head, missing out on other feedback that might be crucial.

Solution:

Designers should take notes, jotting down the big ideas from the feedback. This helps them channel that nervous energy into something productive. It forces them to focus on the page and not internalize a negative comment. There's also one side benefit of taking notes — it shows investment in what others are saying even if all the ideas don't end up being used.

Designers at ZURB have different ways of doing this. Some take notes by hand, listening for key points and jotting them down. Others open up a Google Doc and type down big ideas. Some also rewrite their notes during a feedback session so they can better articulate their next steps.

15. Design Assumptions are a Double Whammy

Everyone makes assumptions. But assumptions in design can result in crappy products. Consider this: A designer is unclear about a piece of feedback, thinks she knows what's right then implements it. What she's done might not solve the problem doing more harm than good.

Solution:

Designers should assume nothing during a feedback session. If something is unclear, they should be trained to ask for clarification. Ask why five times. By doing so, they'll be challenging assumptions that they might no existed.

16. Design Feedback Isn't a Menu

After a feedback session, there'll be a laundry list of suggestions and ideas. This can be overwhelming for a designer and she can seize up. But design feedback isn't a menu of options. A designer can't act on all of them, or else they'll noodle instead of iterate.

Solution:

Designers need to triage feedback and prioritize goals. They should ask what is actionable and what isn't. At ZURB, designers prioritize by figuring out the key takeaways from a feedback session. If it's something tactical, say a button, then they might implement it right away. But if it's more conceptual, say an entire footer, they might go back to sketching or photoshop to work through ideas then seek another round of feedback.

17. Designers Shouldn't Be Introverts All the Time

Design isn't a solo journey. But designers can easily get overly focused on the work. But they can't work in a vacuum. Design, after all, is collaboration.

Solution:

Designers on your team need to quit being introverts all the time. Understand that they need to seek out feedback from others. Follow through on that feedback and iterate based on what you've received. Show others the impact they made. Engagement and buy-in happens when others can see the fruits of their labor.

Become a Master of Feedback

We've practiced the art of giving and asking for good feedback over the past 15 years. If you find some of these techniques interesting, your team might want to sign up for our Mastering Design Feedback online course.

Topics include:

Soliciting meaningful feedback
Prioritizing feedback and iterating
Giving good feedback to others

Here's the rundown:

What: Mastering Design Feedback

When: Tuesday, May 28, 2013 at 9:00 AM PDT

Where: Attend from anywhere, streamed directly from ZURB HQ in Campbell, CA

Getting Foundation and IE8 to Play Nice

Mon, 06 May 2013 16:00:00 -0700

People who take our Foundation training course aren’t the only ones who come away with more knowledge than they started. Our students sometimes share their ideas with us — and we want to share one with you today.

As you might know, Foundation 4 doesn’t support Internet Explorer 8. With IE8 slipping in usage, we thought it was the right time to let it go. But one person couldn’t. Too much of site’s traffic used IE8 to just let go. After taking our Foundation class, he came up with a jury-rig that combines Foundation 4 with IE8-friendly Foundation 3.

The setup

The first step involves setting telling IE which version of Foundation to choose —3 or 4 — based on Explorer’s own version. Below is what he came up with, which looks fairly solid.

In the HTML head:

And after the close body tag:

The conditionals determine which version of Foundation IE loads. IE8 and older will grab Foundation 3 code. Others, Foundation 4.

The grid

The syntax for Foundation 4’s grid, which accounts for mobile and widescreen devices, uses two prefixes: small-# and large-#. Foundation 3, though, uses spelled out English words: one, six, twelve etc. That means the two systems can intermingle without interfering:

Having to manage three sets of grids isn’t ideal, but if you use Foundation 4 and need to support older browsers, this unofficial workaround may do the trick.

Designers Wanted: Be a Mentor at the First Hackathon in Our New HQ

Wed, 01 May 2013 10:05:00 -0700

We're pretty excited to be hosting the first hackathon in our new Command Center. Ignition will be focused on innovating health care in the course of a weekend. And we're not the only ones who are excited.

Couldn't be more excited to hold Ignition hackathon at @zurb HQ. Gorgeous location, great people, innovation epicenter.
— Prebacked (@prebacked) April 24, 2013

Various teams will work over the span of two days to solve some of the tough problems surrounding health care. And they need designers to mentor them and give them feedback on what they come up with.

The Problems These Teams Will Face

You might be asking why we're so excited about changing healthcare? As product designers, we have the unique opportunity to provide design mentorship to teams of entrepreneurs and hackers working toward solving big, hairy, audacious goals. There are three big problems in healthcare that they'll solve during the hackathon:

Price Transparency:Doctors within the same geographic region often charge drastically different rates for the same procedure. We don't often know the price of one provider over the other. And there's nothing motivating us to see a second price opinion. Or for doctors to offer competitive pricing. The big question: What systems and technologies can we build to increase price transparency and encourage people to shop for competitively priced healthcare?
Consumer Apathy: How do we get people behind preventative care? Are they're apps or tools that can get people off the couch and exercise more and eat right?
Medical Coding: Believe it or not, there are over 14,000 codes in the health system! How can we use analytics and other tools to simplify the classification of medical codes?

Design teams will work over two days to flesh out concepts to solve these particular problems. They'll present their early concepts. If a team's idea is chosen, then they'll get one week to build a prototype, which they'll pitch to potential investors.

Join us this weekend and work with passionate entrepreneurs and thought leaders to solve the grand challenges of our time. You'll be helping solve the big, hairy problems in healthcare!

Be Part of the Ignition Hackathon

When:
Saturday & Sunday, May 4th - 5th, 2013
Doors open at 11:30 AM on Saturday, May 4th
Doors open at 10:00 AM on Sunday, May 5th

Where:
ZURB HQ
100 Rincon Ave
Campbell, CA 95130

ZURB Presents Online Responsive Web Design Training!

Mon, 29 Apr 2013 15:03:00 -0700

Responsive design is more than a popular facet of web development. We believe in the next few years it will be web design. In years past, people asked "why bother designing for mobile?" Soon they'll pull out their phones and wonder "is your site broken?" We adopted a mobile-first stance not only to build the best websites possible, but also to understand best practices, design patterns and the nuts-n-bolts of crafting sites in an increasingly mobile web. Now it's time to pass that experience to you.

You'll learn how to optimize sites for mobile devices and widescreen computers alike from the designers and developers behind Foundation, our mobile-oriented CSS framework. No previous experience with responsive techniques is needed, but you'll want to have a basic understanding of HTML and CSS. Each lesson is 45 minutes long with 15 minutes at the end for any questions you might have.

Topics include:

How to create and organize content for different browsing experiences
Planning layout that presents sites well in any size device
Why contemporary 'flat' design is more than a trend
The code that makes sites respond to browsers' needs

Here's the rundown:

What: Overview of Responsive Web Design

When: Monday, May 13, 2013 at 9:00 AM PDT

Where: Attend from anywhere, streamed directly from Yeti HQ in Campbell, CA

Use Data From Design Surveys to Tell a Story

Thu, 25 Apr 2013 15:30:00 -0700

Data is often misunderstood. It's more than just big numbers and math problems, it's a story told through feedback. But what is data anyways? If you think about it, it's really just a way to aggregate feedback.

One way to get data is through design surveys. While gathering data is necessary, we say it's okay to forget about the math (sometimes) and let your numbers tell you a story instead. Your design and your numbers alone aren't going to sell your work, but instead it's how you tell their story. Design surveys allow us to both collect feedback at scale and construct those stories.

Improve Your Design by Surveying Your Work

If you walk around a theme park or a mall, chances are someone holding a clipboard is going to stop you and ask you a couple questions. These questions will undoubtedly range from asking how your trip to the park is to asking how many sodas you purchased throughout the day for your family.

These questions, among others, let the surveyor tell a story about the park's guests. This lets them decide where to focus improvements with their guests' satisfaction in mind. It's not about how many sodas were sold, but who was purchasing them.

Surveying your design concepts can also provide extremely valuable information. They are a great way to see what people like, what they'll remember or even if they can click on your intended button for a specific interaction.

Ask Questions — It's the First Hurdle

We can use design surveys on wireframes to help us choose which ideas we may want to explore before putting tons of time into visual design or coding. By surveying a network of user tests, you can collect data to help make your decision decisions.

Just as we have done with our designer and developer community, Forrst, which we acquired earlier this year. It has gone through a couple iterations and we have big plans for the future. In this case, we presented our network of testers with two options for a potential Forrst redesign. One option was a single-column layout for the site's stream of post, the other, a three-column grid.

Click on the image to see the full report in Verify

Out of 100 responses, survey says that people would be more interested in a site with three-columns with viewing on their desktop browser. But unlike, Family Feud's famed 100 response surveys, we also received some qualitative data to help us make an informed decision. More on that in the coming weeks.

Survey Interactions to Learn About User Behavior

Surveying interactions will help you understand how people interact with your product. People will often answer a question differently from how they would actually perform an action. This is because people, whether there is a right or wrong answer, wish to be correct. They will tell you what they think you want to hear.

Instead, ask people to complete an action as we did with Fandango's homepage while showing them an image of the page:

Imagine you and a couple friends want to see a movie tonight but aren't sure which one. Click on the search method you'd use to help pick this evening's movie selection.

Let users show us what they would do instead of talking or asking survey questions with hypothetical actions. What you learn may surprise you.

Click on the image to see the full report in Verify

Numbers are Great, But...

Most of us are not numbers people. So what is a good number of participants to have? Theories range from participates as low as five to what seems to be an infinite number of results. While numbers will provide extra meaning to your feedback, don't get too hung up on math or statistics. Instead let the numbers help tell you a story.

Building a Better Mobile Tomorrow: Announcing Our New Sponsor

Wed, 24 Apr 2013 16:35:00 -0700

Today, we came across this tweet from a ZURB fan that made us smile:

@zurb is working hard today to make the world of tomorrow a beautiful place.
— Joseph Gagliardi (@ProfessaurusG) April 24, 2013

We don't like to toot our horn too much, but it's nice to see when others recognize what we do day in and day out is all working toward building a better tomorrow. We do that through our services, our responsive framework Foundation or the training on the Expo. We want to educate and help others to use Design, with a capital "D", to make that world a reality. And as gratifying it is to read tweets like this one, it's also wonderful to see others striving to do the same thing. Which is why we're happy to announce that the awesome folks over at Moovweb are sponsoring our educational and training content.

Remix the Web

Moovweb, a software platform that transforms desktop sites for mobile, also realizes that mobile is a thing and that it isn't going away. They take sites that don't work for mobile and make them work. You could say they're remixing the web. It's how they're building that better mobile tomorrow. One of the other ways they do that is through their mobile hackathon with $5,000 in prizes.

This month, they're asking other savvy designers and engineers to redesign Github to be mobile-friendly. They've even set up a virtual office hours to help folks should they need a little help. There's even a template to help you get started. They're knee-deep into their hackthon now, but it's not too late to join.

Join Moovweb's Remix Hackathon