ZURB lessons

These short lessons cover very specific topics in web design & code. We decided to treat them as regular blog post updates, even though they’re delivered by email with online archives.

Five Minutes Towards an Accessible Page

Today we're going to share our research in making Foundation more accessible — techniques we figured out because a) we're committed to a more accessible web and b) deadlines happen.

By the time you're done with this lesson, you'll be able to improve any page's accessibility in five minutes or less. Ready? Go!

Don’t Fear the Command Line

Don’t panic.

Complex products rely on more than HTML and CSS. They need strange technologies with exotic names like Git, Grunt, and Bower. And they operate in that mysterious land called The (Dreaded) Command Line.

So how does it work? How much trouble can cause by typing “sudo mkdir ~/Sites/project1”? We’ve found that understanding is the first step in acceptance, so we want to share with you what’s going on. Understanding what happens under the hood will help you download, use and update Foundation, our CSS framework. Here’s how you can unlock basic mysteries of the Terminal, — and understand what commands like “foundation new dirname” actually do.

Master CSS Colors With This Sass Function

Color management in CSS isn't easy. Each element may have colors for their background, border and text. They're often redundant — using the same hex color dozens of times in a CSS document isn't unusual.

Luckily, Sass offers us a way to manage this repetition, turn our color palette into more of a color strategy, and make changes to an entire project with just a few edits. Here's how to use Sass's functions to manage color across your design faster than with plain CSS.

Streamline Forms for More Follow-through

Forms are a critical touchpoint between website owners and their visitors. We use them to let people sign up or sign in; to report an error or ask for help; and to submit information about themselves. Forms are what keep the web from being a one-way street. But they can also act as barriers to entry.

People equate a dozen fields with tedious chores. Their eyes glaze over. Patience stretches thin, and so does trust. They may decide the form is more trouble than it's worth and give up before they even begin.

It doesn't have to be this way. Here are ways to make tedious forms easier to digest — and increase the number of signups.

Save Your Product From Launch Failures

Nothing hurts like discovering a problem after launch — especially when someone else points it out. It’s a special kind of pain that smacks your bottom line, dings your reputation and sours client relationships.

No matter how much time we’ve spent looking at a product during development, there’s always a risk that other people have a different (and an unfavorable) experience.

Even worse, preventative medicine is getting complicated. The more responsive our web designs become, the more difficult they become to test. Used to be we could review static layouts. Now layouts are elastic, and we need to check our work on many browsers and devices. Here’s how we head off headaches with a few simple testing processes.

Capture Brilliant Dry Erase Board Photos

Part of getting feedback is sharing your plans, even if they’re in the “rough draft” stage. We love whiteboards for sharing ideas, experimenting with workflows, and letting the Big Picture be bigger than a piece of paper. Recording these ideas is crucial, and smartphones make it convenient. But convenient isn’t easy.

Dry erase boards are reflective. Glare from windows and overhead lights create harsh light spots that mar our notes. Even worse, most cameras underexpose images to compensate for these spots, and produce uneven lighting over wide areas.

We set out to shoot better photos of whiteboards. After some experimentation, we figured it out. The result helps us more clearly communicate our design ideas.

Here’s how to shoot a dry erase board that will clearly communicate your ideas long after the board is erased.

Get the Real Picture from User Feedback

Iterating on our work requires feedback — and understanding feedback requires analysis. Our surveys that rate customer satisfaction from 1–10 gave us a good idea of how our products and services were helping others design for people, but we wondered if there was a better way.

In fact, there is. We recently discovered that a single question, rated in a special way, could give us a more streamlined approach to customer feedback. The results are more measurable but just as interesting. Here's how to measure customer satisfaction with Net Promoter.

Using personas to build better user flows

Brainstorming. Mind maps. Rephrasing questions. There are plenty of ways to plan successful digital products. But only one approaches design problems from the users’ standpoint to create natural routes through a website. We do this with personas: fictitious users we anticipate will use the product. Here’s how to use personas to drive ideation.

Jump on Ideas With Patterns

Few pressures inspire designers to look for shortcuts like tight deadlines. Luckily, we have shortcuts. Patterns are conventions that give designers a head start in their work. They're ideas without aesthetics: Workflows, layouts, or known user behaviors upon which we build great digital products, tailor-made to our clients' needs and branding. Here's how you can use patterns to spark ideas for better designs.

Win Big in Phone Meetings

Phone calls, especially with clients, are a critical means of receiving feedback on your works-in-progress. In addition to exchanging ideas, phone calls are a stage on which you present yourself to the client. It's a chance to look professional — or like an unprepared amateur. This lesson will teach you to look (and sound) like a pro. Here are handy tips to conduct a winning client phone call.

Make Wireframes Pop With Your Own Icons

As a hi-fi prototyping tool, much of OmniGraffle’s power lies in its stencils: Reusable components you can drag and drop to create interfaces faster. While the app comes with many generic stencils, sometimes we need custom shapes to reuse throughout a site. In that case, nothing beats custom elements you downloaded or created yourself. Here’s how to create and edit OmniGraffle stencils from Adobe Illustrator files.

Get Real With a Semantic Grid

CSS frameworks are great for setting up responsive grids, but often require extra markup, usually in the form of presentational class, that makes source code hard to decipher. Using nothing but div elements make code more confusing — which </div> belongs to an open <div>? And isn't "product-list" easier to figure out than "large-block-grid-3" ?

Semantic HTML uses markup to describe content, making information cleaner and HTML more meaningful. Elements like <article> and <aside> indicate to browsers, screen readers and search engines what content about. Here's how to create your own semantic grid based on Foundation.

Turn Your Ideas Into Solid Wireframes

The simplest solutions are often the best. But as ideas become layouts we need more than quick & rough. 

Our ideas for design solutions are nothing without implementation, and that begins with lo-fidelity — or lo-fi — wireframes. We use these hand-drawn pages to show other people what we're talking about before we dedicate time to digital wireframes or coded prototypes. Here's how to create low-fi wireframes that turn great ideas into practical pages.

Master Media Queries With Sass

No media query is an island unto itself. Several often work together to create the appropriate styles for different scenarios — smartphones, tablets and desktop browsers, and even different screen orientations. You have to worry about conflicting ranges. You have to write redundant code. You have to hunt for queries through dozens or hundreds of lines in CSS. Overall, media queries in complex products can be a pain.

But they don't have to be. Sass makes media queries a snap with very little setup. Here's how you can use Sass variables to master media queries.

Find the Next Great Idea With Sketches

Great products are built on great ideas. Early in a project’s development, we dedicate time to working through many quick ideas with sketches that communicate “what-if” scenarios to our clients. We work through lesser ideas until we discover real winners — ideas that ignite sparks that serve both our clients and their customers. And it works. “What if we used a cartoon ninja?” was so unexpected that a quick sketch reshaped an entire project. Quick sketches give us the chance to fail fast and discover opportunities — hence their name, opportunity sketches. Here’s how to discover your great ideas with paper and Sharpies.

Dive Deep Into a Responsive Email Grid

While more people than ever open email on mobile devices, responsive email templates aren’t easy to customize beyond colors and type families. As collections of reusable code and design patterns, frameworks give designers a solid, tested bases on which to build their own templates.

Although the grid in Ink uses nested tables, understanding how it works pays off when users can read an email under most any circumstances. Here’s how you can use the Ink grid to make a complex responsive email template.

It’s OK. Let Users Guide User Tests

User testing helps us test a hypothesis to discover if what we're about to build will, in fact, solve the problems they’re meant to address. But people who participate in a user test need to know more than “we need you to test this.” They need context. Here’s how to prepare test participants so you'll get the constructive feedback you need to improve your work.

Use Sketch Prototypes to Prevent Headaches

It may sound odd, but sketch-based prototypes of products helps us fail early. Prototypes are mockups through which people can "test" a website or app. They're comprised of hand-sketched screens we scan and add tappable hotspots where important links would be. They're cheap, effective tools to let clients walk through a digital product before spending time coding what might be the wrong path. Here's how to create simple, cost-effective prototypes to save time and prevent headaches later.

Wrangling Sass @import files

With its variables, functions and imports, Sass gives superpowers to CSS. In particular, importing enables us to organize SCSS in different files according to type or use. But all that power can get us into trouble: The ability to import many files into your work means having many files to manage. Experience has taught us to avoid most pitfalls, and we want to share that experience with you. Here are answers to common questions we’ve been asked about organizing files in Sass.

Use Git to Share Your Work

We love Git as a collaboration tool — among ourselves and with the public. Git lets us share code and see how other people riff on our products. We also know that Git can intimidate people not accustomed to using a command line, so here's how to share your work on GitHub.

Write Emails, Drive Action

When trying to communicate ideas and drive actions by email — say, when asking a client for feedback — a well-composed email means more than good grammar, spelling and a little formatting. Emails can do more than communicate information; they can rally people to action. Here’s how to structure emails that elicit action from your readers.

Avoid Highlighter Abuse in Sketches

In low-fidelity sketching, yellow highlighters can draw attention to a page’s key point or call to action. But like any tool, they can be abused. While we strongly recommend using highlighters sparingly in lo-fi sketches, the best way to explain that is to (ahem) highlight bad practice. Here are three different ways to go overboard with highlighters in lo-fi sketches.

Creating a Killer Style Guide

Style guides are documents that designers use to maintain consistency throughout a project, even after it's launched. But they're more than a list of guidelines. Structure, samples and accuracy are keys to successful style guides. Here are five tips to creating a killer style guide.

Create Insanely Easy Buttons in Photoshop

Designers have used Photoshop to make web graphics almost since … well, since the web gained traction in the early '90s. Trends and technology have changed over the last two decades, and today Photoshop offers many tools to easily make web elements in contemporary styles. Here are different ways to create fast, flexible buttons in Photoshop.

Test Your Assumptions With a Card Game

Our designers use card sorting to figure out how people perceive a system. This exercise helps us look past our assumptions to how customers may actually use our products — and since they're the ones using our products, understanding how customers mentally organize information on your site is critical. Here's how you can use card sortings to figure out how others use your designs.

Prevent Trouble With Social Logins

If your website or app requires users to log in, you might consider social media. Statistics show that users accept Facebook, Twitter, Google and other social networks as convenient and reliable ways to log in. For developers, social media logins mean offloading the code — and security headaches — to seasoned professionals. Here’s how to add social media logins to your site or app.

Manage Criticism, Not Vice Versa

Getting constructive criticism is hard enough without getting overwhelmed with feedback. Placing your work (and by proxy, yourself) on display takes courage. Admitting that you may have taken a wrong path, or that someone else knows more than you, takes a level head and a dose of humility — even if it ultimately improves the design and your design skills. And after you top that challenge, you face a glut of opinions. Knowing where to start is hard. And if you guess, you may end up working on one thing only to realize later that something else contradicts your new work.

Responsive Email Gotchas to Avoid

Building a responsive email template can be daunting. That’s why we developed Ink, an entire email framework designed to easily build responsive emails that work in any client, even Outlook. Still, having the tool doesn’t safeguard you against different email clients’ quirks. If you're going to make a responsive email, Ink or otherwise, here are four gotchas to avoid.

Win Over Clients in a Design Critique

Now and then, we all crave a little praise. But to improve their work, designers need feedback: A fresh view on their work to expose problems and offer solutions. If you’re not receiving feedback, then you don’t know what you’re missing. But learning to give feedback is just as useful. We’ve found that expressing our views trains our brains to think from users’ points of view. And the more we practice, the more we can anticipate problems in our own work. Although thoughtful comments sometimes take time, you can learn to give initial feedback on web design in 60 seconds or less.

Changing Orbit’s default slide

Orbit is an easy way to show users a rotating slideshow of content — images or otherwise. By default it comes with many settings, including animation type, pause on hover, and slide delay length. Here are two under-the-radar ways to change your Orbit.

Solicit the Right Types of Feedback

Feedback is a vital part of iterating through the product design process. But ask “what do you think?” and will get replies that range from “looks good to me” to “I don’t like it.” Both may be valid, but they lack actionable feedback needed to improve a product or service. We’ve discovered that asking for feedback properly is the first step in getting helpful input. In this short lesson you’ll learn to prompt answers that put “constructive” in “constructive criticism.”

Common Tech Questions About the Foundation Top Bar

The Top Bar is among Foundation’s most popular pre-built components — and certainly its most complicated. We created it to alleviate the trouble of building complex navigation for both mobile and widescreen browsers. The Top Bar is a powerful tool. But with power comes responsibility, or at least confusion about some of its inner workings. Don’t panic. We’re here to help. This post will answer technical questions we’ve often been asked about the Foundation Top Bar.

Identifying and Dealing With Four Personality Archetypes on Your Team

Everyone has a different take on design. A lot of their opinions stem from where they’re coming from, their experience and their preferences. There are many different types of personalities that might be giving you feedback. You’ve got to understand what each of those are and how best to deal with them. Now, it’s hard to classify everyone. But we’ve found most fit into four broad archetypes. We want to share those types and how to work with them.

Shuffling Columns in Foundation Without Changing its HTML

For years, the order in which an HTML document was written directly impacted how it was displayed. Want navigation on the top or left? It had to come before content in HTML. That was an uncomfortable — but necessary — restriction in the past. But with the rise of mobile devices, and some new CSS techniques, designers need greater finesse over their work than restricting “top-left” to always meaning “first.” Luckily, the future looks bright for layout options. Among others, our responsive framework comes with the ability to arrange columns regardless of how they’re set in HTML. Here’s how you can rearrange elements in a row with Foundation.

Balance Visual Weight in an Icon Family

When designing icons, you can't just make shapes that adhere to guides in your drawing tool of choice. A set of icons should look like a harmonious family in the finished product. Icon design is one thing. Family design is another. Here are four techniques to make a group of icons feel like family.

How to Keep Your Foundation-based Site From Looking Like Everyone Else

We’re sometimes asked in our Intro to Foundation course if using Foundation makes websites look the same. They don’t. Any site that uses Foundation — or any framework — can look like whatever its designer feels is best for the project. We keep Foundation’s default styles to a minimum for that very reason. Don’t worry about looking like someone else. Instead, focus on looking like you. Here are three tips to making your Foundation-based site stand out.

How to Improve Design by Coordinating Colors

A color scheme does more than look good. It keeps the design from contradicting itself. It reinforces the message you want to convey, whether that's for branding or for mood. It also says the designer didn’t just throw something together. There’s a sense of purpose. It’s also a way to reveal more about a design than the designer may realize.

How to Choose Among Foundation 4's Visibility Classes

Many elements can resize well mobile- and desktop-optimized layouts. But sometimes a design calls for widgets, images or sets of elements that only work well at one size. For example, TheNextWeb.com changes elements based on screen size. Navigation is the usual culprit, though this could apply to any element that’s inappropriate to differently sized browser windows. Here’s how to show and hide elements with Foundation in three minutes.

How to bridge rows in Foundation

Most CSS grids — Foundation included — organize layout into rows that are, in turn, divided into cells or columns. But what if you want a column to extend over two rows? Officially, you’re stuck. But if we redefine the problem, a solution appears. Here’s a how you can (appear to) extend Foundation columns past one row in three minutes.