Learn the Flexbox based powerhouse XY Grid

Lesson #176Foundation

This is part four of our series on Flexbox. By now you should have a good understanding of how Flexbox’s behavior, syntax, and positioning properties. This lesson is all about the new Flexbox based XY Grid. The Foundation XY Grid is huge advancement in Grids. It’s inspired by CSS Grid, but uses Flexbox under the hood which is supported by browsers now. This mean you can take advantage of Flexbox, equal height containers, auto and shrink sizing, vertical and horizontal layouts (hence the XY name) and lots more. You’ll come away knowing the ins-and-outs of the XY Grid to create complex layouts faster and with less code.

Zero to Website Guide<br> Part 6:<br> Deploying Your Site

Lesson #166Foundation

Welcome to the final lesson of our 6-part Zero to Website Series! Now that you have a beautiful portfolio coded up and ready to go, the next step is to get it up on the web and share it with the world! In this lesson, you’ll learn how to use GitHub Pages to upload and deploy a website. Let’s get started!

Zero to Website Guide<br> Part 5:<br>Styling Your Scaffold

Lesson #165Foundation

Welcome to part 5 of our 6 part Zero to Website Series! By the end of this 6 part series, you’ll have learned how to build a responsive website with Foundation. In last week’s lesson, we scaffolded 3 pages of your portfolio site using Foundation’s grid. Today, we’re going to dive into our CSS and start styling our site! In this lesson, you’ll learn how to style Foundation’s components as well as write your own CSS to style your portfolio. Let’s get started!

Zero to Website Guide Part 4: Scaffolding Your Portfolio with Foundation’s Grid

Lesson #164Foundation

Welcome to part 4 of our 6 part Zero to Website Series! For the past 3 weeks, you’ve been learning all about the basics of Foundation and responsive web design. Now that you have an understanding of Foundation’s file structure and grid, you’re ready to start building your own site! In this lesson, you’ll learn all about scaffolding and how to use this know-how to set yourself up for success in building any website. Let’s get started!

Zero to Website Guide<br> Part 2:<br> Digging into the Foundation starter package

Lesson #162Foundation

Welcome to part 2 of our Zero to Website series! Now that you have a basic understanding of HTML, CSS, and the tools you’ll need to create a website, we’ll move into what makes up the Foundation Framework.

Zero to Website Guide<br>Part 1: Before You Build

Lesson #161Foundation

Gettin’ Griddy With It! Your First Taste of the CSS Grid.

Lesson #160Foundation

If you’ve been keeping your ear on the the happenings of the web, you may have heard some rumblings of something called a CSS Grid. If not, that’s cool too, because that’s what this lesson is all about!

Advanced Panini Tips and Tricks

Lesson #159Foundation

This is part five of our series on Panini. By now you should have a good understanding of how Panini’s pages, layout, partials, and helpers will save you time reduce mistakes. Ultimately you’ll be able to deliver Cleaner more maintainable, more organized code and really step up your web development game. This week we’re taking all the pieces we’ve learned in the previous four lessons and putting them together for some advanced examples.

Steering You Right with Panini’s Handlebars Helpers and Data

Lesson #158Foundation

There comes a time in your life where you no longer accept wasting time on tedious tasks. Some of us are masters of efficiency, writing scripts to automate tasks. Some of us find tools to do it for us. At ZURB, we use Panini to save time, deliver organized code, and repeat ourselves less. Using Data and Handlebars Helpers in Panini go a long way to setting us up for success and we’ll show you how. Last week we covered using Panini’s front matter and variables. This week we’ll build on that by learning about using Panini’s Handlebars’ helpers and data. Let’s get started!

Front Matter is the Brains of Your Pages

Lesson #157Foundation

What the heck is front matter anyway? If we compare your dev tools to a book, front matter is like the first section of a book that contains the preface or details of the novel. In Panini, front matter is similar to a page’s preface but with a lot more powerful. Coupled with Panini’s variables and partials, front matter changes the content allowing you to be much more efficient and organized. Using front matter and Panini’s variables you can give your pages some brains — allowing you to make your reusable components more usable. In this lesson you’ll learn how to use front matter and Panini’s variables to define content on your pages like a pro.

The main Ingredients of Panini: Layouts, Pages, and Partials

Lesson #156Foundation

Having multiple copies of the same navigation or footer strewn about your pages can get cluttered and ungainly very quickly. Plainly put, you're better off not wasting time re-coding repeated elements, copy and pasting here and there, or making a change that has to be changed in many different places. In the web or email world, once you set up your common elements like headers, footer, and ad units etc., you should be able to automatically include these in every page or email. If you need to change a footer link, you should be able to do so once, and have it apply to all. Using Panini in this way will save you time and reduce costly mistakes. In this lesson we’re going to leverage Panini to make you a workflow and efficiency hero.

Panini: A delicious way to optimize your workflow

Lesson #155Foundation

The last thing you want when you’re deep in a coding problem is to get slowed down by your tooling or lack thereof. Build tools like Gulp and package managers like npm give you the tools to automate tasks which saves time and reduces mistakes. When we launched Foundation 6, we open-sourced a set of build tools that we use here at ZURB code client projects called the ZURB Stack. In other words, it’s basically a way for users of Foundation to use the same tools that ZURB uses to deliver front-end code to clients. We accomplish this through the Gulp task runner and also by using a custom templating engine we wrote called, Panini. Panini is a custom built, light-weight static site generator that works as a plugin to Gulp. Together the two form a delicious-build system. This is an introductory lesson in a series on Panini. In this lesson, you’ll learn what Panini is, and how you can get started using it to optimize your workflow.

Get the help you need with Foundation’s Flexbox helpers

Lesson #154Foundation

We’ve been talking about it a lot lately and for good reason. Flexbox rocks and floats and clearfix are hacks that produce unreliable results. The support for Flexbox is great and the learning curve is small. Best of all, Foundation 6.3 came out with a host of great Flexbox helper classes to help you make components or get the layout you want faster with fewer headaches. In this lesson, we’ll show you how to use Foundation Flexbox helper classes to save time and eliminate stress.

Read the Fine Print

Lesson #153Foundation

Sometimes you need to print your web pages on actual paper, and it's a problem that comes up frequently and it's often overlooked. Print styles to control how elements are displayed while printing are nothing new, but accounting for responsive websites makes this far more challenging. Since Foundation is mobile-first and responsive, printing a site would normally only produce the mobile layout. The challenge here is to create print styles which would allow you to print out your pages in the breakpoint you want. In this lesson you’ll learn how to use Foundation’s built-in print styles to get your printed page right, super fast.

Deep Linking with Foundation for Improved Discoverability

Lesson #152Foundation

This happens often: The content you’re linking to is hidden in a Tab and you’re only linking to the page that the content is on. It leaves your user feeling confused and skeptical, and it’s not hard to see why. It’d be as if you were an Uber driver, dropping your customer off in a sketchy neighborhood they don’t know. It doesn’t matter that it’s only a block away from where they wanted. People want to go directly to where they need to be, so send users directly to the specific content they’re after. When content is hidden in a tab or accordion, a link to the page is not enough. Sure you can link to an id on a piece of content, but the immediate jump to the middle of another page may be jarring and confusing to your users. And what if the content is hidden in a tab that is not open. This is when deep linking comes into play. deep linking is the use of a hyperlink that links to a specific, generally searchable or indexed, piece of content on a website or app.

Don’t Let Your Grid be a Blocker<br>Foundation's Block Grid

Lesson #151Foundation

Using a responsive front-end framework like Foundation ensures that your content will look good on any device. But with a little tweaks and styling, you can make your content look not just good, but great. For example, sometimes you want a grid to contain arbitrary amounts of content. If you left it up to the framework, the result would be readable, but those columns would be all different sizes. That’s where the Block Grid can come in handy. By using “parent level sizing” (on your .row) to dictate the width of the children (your .columns), it can create equal width columns that look clean and balanced. You can add an infinite number of blocks into a row and control how many blocks will fit on each line before wrapping. In this lesson, you’ll learn how to use the Foundation Block grid and some best practices to get the layout you want.

Foundation's Flexbox Cards to Win the Game

Lesson #150Foundation

Cards are already an incredible design pattern component for many use cases and they get even more powerful when built with Flexbox. In fact, the display: flex property in CSS really shines when building UI components. The new Card component has an optional Flexbox mode that does a few things things out of the box that help you achieve your desired results quicker with less headaches. We’ve covered the basics of Foundation’s card component in a previous lesson, so today we’ll dive into Foundation’s Card component with Flex mode on to really supe up your projects.

Foundation 6's Off-canvas <br>1 off-canvas, 10 possibilities

Lesson #149Foundation

An off-canvas is a great way to make your navigation mobile-friendly, save room in a design and add a bit of wow-factor. While it’s popular as a mobile navigation solution, you’ll see the Foundation off-canvas can be used in many different use cases and screen sizes. The Foundation off-canvas can open from the top, right, bottom, or left, overlap or push your content and so much more. In this lesson, you’ll learn how to add the Foundation off-canvas into your project and how to customize it for your needs.

Stack the Deck in Your Favor with Foundation Cards

Lesson #148Foundation

Foundation is there to save you time and allow you to do your work with ease. With the ever growing popularity of using cards in design, we’ve decided to make your life easier by including a card component in the new Foundation 6.3 update. In this lesson we’ll take a look at what this new component is and how it can help you when using cards in your layouts.

Transform Foundation’s Tabs into Accordions on any Screen Size

Lesson #147Foundation

Foundation has long been in the responsive game, making it easy for you to build beautiful, responsive, mobile-first websites quickly out of the box. With Foundation 6.3, it gets even better - the long-anticipated “Tabcordion”, or Responsive Accordion/Tabs component lets you quickly and easily create a component that is an accordion at some breakpoints, and tabs at others. In this lesson we’re going to look at how easily it is to upgrade your existing accordions or tabs into a Responsive Accordion/Tabs.

Raise Your Style's IQ with Foundation’s Sass Settings

Lesson #146Foundation

One of Foundation’s benefits is how fast you can produce amazing sites and apps using it. Styling with CSS can be tricky and time consuming. If you use Foundation’s Sass version this gets a lot easier, faster, and more organized with the included Sass Setting file. In this lesson we’ll dive into Foundation's Sass settings and show you some best practices to get styling faster.

Oh behave! Control Your Behavior with Foundation’s Data Attributes

Lesson #145Foundation

Foundation’s components give you a ton of great functionality right out of the box. They let you build interactive websites that would typically require a bunch of JavaScript. With Foundation, you can set up powerful components purely in HTML, without ever having to write your own JavaScript. In this lesson we’re going to look at how Foundation uses data attributes to communicate JavaScript configuration options from your HTML, to get the behavior you want.

Get More Control with Foundation's Grid Utility Classes

Lesson #144Foundation

Foundation is all about responsiveness. Beyond small, medium, and large, Foundation provides you all kinds of useful grid utility classes to control how your content lays out in the grid. And each of these grid classes can be adjusted per breakpoint to really fit your content the way you intended, rather than the grid forcing your content to conform. In this lesson, we’ll cover some useful responsive grid utilities in Foundation and how you can use them for your layouts.

Have It Your Way with Foundation's Modular Responsive Navigation

Lesson #143Foundation

Choosing the right menu for your site is challenging - there’s a lot of decisions to make! Do you want to lay things out vertically or horizontally? Should you use dropdowns, accordions, or drilldowns? And then what happens if your desired behavior is different on a small screen than a large? Luckily, Foundation has your back!

Today we’re going to look at how Foundation’s Responsive Navigation plugin lets you write a menu once and display it any number of different ways depending on media query.

Solving problems using Flexbox - Vertical Alignment

Lesson #142Foundation

CSS is awesome. Well, most of of the time. For some reason, vertically aligning content (especially when a parent element doesn’t have a height) is a pain requiring all kinds of hacks and display: table; nonsense. It takes something that is seemingly simple and makes it confusing and painful. Luckily, Flexbox solves many of the common layout issues we face in CSS and float grids. In this lesson, you’ll learn how to use Flexbox to solve vertical centering in your projects.

Speed Up Your Workflow with Custom Shortcuts

Lesson #141Creative Direction

" class="" height="" width="" alt="" style="display: none;">

It’s a challenge to learn any new piece of design software, especially if you’re used to certain shortcuts performing similar actions. By overriding a shortcut that’s been already defined in a program, you can save some time and frustration and double your productivity.

Hover Interactions With Menus and Tabs

Lesson #140Foundation

Foundation’s components give you a ton of functionality out of the box, but sometimes you want to customize a user interaction a little bit more. Maybe you want things to feel just a little bit smoother, a little friendlier, or help guide the user a bit more. Menus and tabs are the perfect place to start experimenting with this.

Today we’re going to look at adding a smooth hover-based interaction, first using Foundation’s built-in utilities, and then with jQuery for cases that aren’t handled out of the box.

Advanced Toggler

Lesson #139Foundation

Static designs are great for communicating ideas, but some things only really come to life once you add interactions and states. Foundation strives to make that easy by letting you automate many common interactions and states without having to use custom JavaScript.

Today we’re going to be looking at a more advanced use of one of the most fundamental plugins within Foundation - Toggler.

Let’s do a quick review of what Toggler does.

Responsive SVGs

Lesson #138Foundation

As designers and engineers, we’re all accustomed to putting images into our websites and treating them as static lumps that are outside of our control. However, the SVG image format is actually an XML-based document very similar to HTML, and if you put it straight into your page rather than referencing it in an image tag, you can target parts of that document using CSS and Javascript.

There’s tons of possibilities for this, enabling you to change elements of your image based on state, containing element, or even animating them based on a user action. Today, we’ll be looking at a straightforward application - using media queries to hide and reveal parts of an image by screen size. We’re used to being able to do this for HTML, but being able to do it with images opens a whole new world of possibilities.

Let’s dig into the basics of targeting SVGs with CSS.

Building responsive accessible web forms with Foundation

Lesson #137Foundation

Designing great forms can be a challenge in itself. Doing it in such a way that anyone, on any device, even with visual impairment is slightly more challenging. Ultimately we need a form that matches our design and is low barrier to entry for all users. In this lesson, we’ll implement a responsive, accessible form with Foundation and test its accessibility.

Getting users to complete tasks

Lesson #130Ideation & Sketching

This week we’ll be focusing on part seven of our ten part series on psychological triggers and patterns. In this lesson, we’ll be covering how you can use the Zeigarnik Effect to get your users to complete necessary tasks within your website or web app.

Ensuring your users achieve

Lesson #129Ideation & Sketching

We’re at trigger six, which brings us a little over halfway through our ten part series on psychological triggers and patterns. In this lesson, we’ll be covering how you can use your customers drive for achievement to maximize the time the spend using your application or service.

Giving users faith in aesthetics

Lesson #128Ideation & Sketching

Part five of our ten part series on psychological triggers and patterns to influence our users is here. In this lesson, we’ll be covering how users look at quality design and branding to make their purchasing decisions and how you can take advantage of this with your design teams.

Dynamically Update Your Web Pages

Lesson #127Foundation

You might want to receive data from a server - after the page has loaded, and use it change you pages. JavaScript can fetch content asynchronously using a technology known as AJAX that allows you to dynamically load external resources into a container without leaving or refreshing the current page. In this lesson you'll learn a simple hands-on example to load AJAX content into the Foundation Reveal Modal after it is opened.

AJAXing Dynamic Content with Foundation

Lesson #126Foundation

It’s very common in web development for designers and developers to dynamically update a web page's Document Object Model (DOM) and change its structure and content as needed. JavaScript can fetch content asynchronously using a technology known as AJAX that allows you to dynamically load external resources into a container without leaving or refreshing the current page.

Let’s dig into the basics of using jQuery to load AJAX content into the Foundation Reveal Modal.

Using Authority to Earn Your User’s Trust

Lesson #125Ideation & Sketching

Part four of our ten part series on psychological triggers and patterns to influence our users is here. In this lesson, we’ll be covering how you can use outside authorities to add weight to information, making it seem more trustworthy and gain a higher purchase rate.

Influencing Users with the Bandwagon Effect

Lesson #124Ideation & Sketching

Part four of our ten part series on psychological triggers and patterns to influence our users is here. In this lesson, we’ll be covering how you can use outside authorities to add weight to information, making it seem more trustworthy and gain a higher purchase rate.

Get Your Responsive Emails in Order

Lesson #123Responsive Email Design

You’ve probably heard it before: Content dictates design. Getting your content to fit your design can be challenging. This is especially more challenging in Responsive HTML Emails where many CSS properties just don't work on every email client or device. In responsive email design your content often will stack on smaller screens where space is limited. Being able to control what column stacks on top or bottom can make a big difference in usability and readability. In this lesson, you’ll learn how to source order in responsive HTML emails so your content can work with your design.

Optimizing Foundation for Speed

Lesson #122Foundation

Simply put, faster websites make people happier than slower ones. One way to get your site loading faster and keeping your audience happy is to reduce file size. Smaller CSS files translate to a better user experience - extra bytes add up fast.

Foundation comes with many options, add-ons and settings. A full install of Foundation 6.2.3 CSS from Sass, with all the trimmings, weighs 110 KB. That’s 1/3 of the weight of the Foundation 5’s CSS, but there is still room for improvement. Luckily, few projects need everything that Foundation offers. In this lesson, you’ll learn how to remove unused CSS and optimize your website’s performance.

Get Control of Foundation’s Default Breakpoints

Lesson #121Foundation

We’ve all been there before. You have a specific design that needs to be coded pixel perfect and the default breakpoints need to be adjusted. Normally you’d have to hunt for media queries through dozens or even hundreds of lines in CSS. You need to account for several different scenarios — smartphones, tablets and desktop browsers, and even different screen orientations. If you had to find and replace every media query things could get messy and time consuming very fast.

But it doesn't have to be this way. We chose default settings to accommodate most scenarios. But most doesn’t cover everyone. Sometimes a project requires different breakpoints. Foundation 6’s Sass makes selecting custom breakpoints a snap with very little setup. In this lesson, you’ll learn how to customize and add breakpoints in Foundation to suit your product’s design requirements.

How to sell more using relative value

Lesson #120Ideation & Sketching

This week we’re continuing our look at how we here at ZURB utilize psychological triggers and patterns to increase engagement with the products we design. In this lesson we’ll be covering how you can use the design trigger of Relative Value to encourage your users to buy more, more often.

Bulletproof vertical spacing in HTML Emails

Lesson #119Responsive Email Design

One thing that is consistent in email development is how inconsistent your emails will look on different email clients. Luckily, using Foundation for Emails can help things get more consistent by packaging up all the know-how, workarounds, and hacks on the web so you don’t have to worry about these issues. One of those challenging inconsistencies is with vertical spacing between or inside your elements. In this lesson you’ll learn some of the perils of vertical spacing in HTML emails and what techniques actually work on all clients.

Influencing Users with Familiarity Bias

Lesson #118Mastering Design Feedback

At ZURB, we utilize psychological triggers and patterns to increase engagement with the products we design. Over the last two decades, we’ve helped over 300 companies find focus and make successful products. In this lesson we’ll be covering how you can use the design trigger of Familiarity Bias to quickly gain trust from your users.

Show Me, Show Me, Show me, How You Do That Trick

Lesson #117Foundation

Adding some dynamic interactions to you pages can be very useful to show changes of state or accomplish more complex UI patterns. But what if you’re in a hurry or not too confident with JavaScript? Foundation 6 shipped with a super handy Toggler component which let’s you quickly toggle CSS classes on elements to create more dynamic UI. In this lesson you’ll learn how to use Toggler to create a “Show More” link and animate your content with MotionUI.

Creating your coded styleguide

Lesson #116Foundation

Coded Style guides are everywhere today and teams all around the globe rely on them to create consistent experiences across their websites and apps. With the release of Foundation 6 the Foundation team here at ZURB also released our Style guide helper named StyleSherpa. In this lesson we’ll take a look at adding your components into the StyleSherpa template to fit your company's unique brand.

Adding On To A Great Foundation

Lesson #115Foundation

The great thing about Foundation is that it’s made to be yours. This means there is thought and effort put into making changes, customizing, and especially extending Foundation easily accessible. Have a favorite image carousel, lazy loading plugin, or animation library? No problem — you can create your own custom build of Foundation to suit your own needs. In this lesson, you’ll learn how to add in a third party plugin with CSS and JavaScript and make Foundation uniquely yours.

Auditing a Site and App

Lesson #114Ideation & Sketching

When faced with a redesign it can sometimes be difficult to know where to begin, and once you’ve started, if you’re really fixing the sites issues. We audit all of our products, review things that work well and identify things that don’t in Notable Notebooks. With Notebooks’ annotation features, a website audit can be used to share insights with a product team and put those ideas in context so they become clear. In this lesson we’ll explore what an audit is, what you’re looking for and what to do once it’s been created.

Create A Menu That Sticks

Lesson #113Foundation

So you’ve created your website’s navigation. Great! But wait... you noticed that your webpages are fairly long and are concerned your user will lose context or have trouble getting back to the navigation. With Foundation 6, you can use the Sticky component to make something stick to the top of the page, even when the menu is not at the top. In this lesson, you’ll learn how to use the Sticky plugin to create a navigation that follows the user down the page as they scroll.

Pain-Free HTML Email Coding

Lesson #112Responsive Email Design

Coding responsive emails can be a real pain but the juice is worth the squeeze. Email is still the best medium to reach your audience. With the release of Foundation for Emails 2, we help you get away from crappy table-based markup and into a world you might be be more familiar with (especially if you’ve used Foundation for Sites). The Inky markup language will make you feel right at home by using <row> and <columns> similar to what you’d use on the web. In this lesson we’ll build a common pattern you’d use in a responsive email using Inky and Foundation for Emails 2.

The Basics of Email Metrics

Lesson #111Responsive Email Design

Far from dying, email seems to grow in both effectiveness and importance each year. More and more digital products include some email component to either onboard new users or as part of the functionality of product. For example, in our design platform, Notable, emails are a critical component of the way the product works. Users are notified when they are added to projects, when feedback is given on design work, and when updates are made. Other popular digital products and services work in much the same way, with email serving many functions core to the product itself. Yep, email is not just a tool for marketers anymore. It’s a tool product designers can use to convey information and drive action.

In this lesson, we’ll break down what the most common email metrics are so we can measure the effectiveness of our emails, and dive into A/B testing so we can continue to iterate on our design and content.

Getting Your Mind In The Gutter

Lesson #110Foundation

In a grid system, the gutter is the spacing added between columns. Foundation has been using a 30 pixel wide gutter as long as we can remember. It’s always been possible to change the gutter size, either by creating a custom download or using the Sass version of Foundation.

Finding your Flow

Lesson #109Ideation & Sketching

At ZURB we’re often getting quickly acclimated to client products before we hop into a deep dive for our design work. One of the main goals at the start of a project is to rapidly understand how users will flow through an app at a very high level. We’ll be looking at using a macro-flow Discovery session to get a quick but effective flow created for our new or redesigned product.

Staying D.R.Y. with Panini

Lesson #108Responsive Email Design

ZURB loves flat file generators, so much in fact that we created our own as a companion to the Foundation Family. Panini is a flat file compiler that uses the concepts of templates, pages, and partials—powered by the Handlebars templating language—to streamline the process of creating static prototypes. Panini comes with tons of Handlebars helpers built in, like a repeat helper or markdown parser, but in this lesson we’ll take a look at creating a custom month/year helper for an HTML email.

Bulletproof Centering in HTML Emails

Lesson #107Responsive Email Design

Ironically, vertically centering things in HTML emails is relatively easy compared to web development. The challenge is coming up with a centered layout that tests well across clients. Surprisingly, a lot of the solutions out there did not seem to test well – and the major problem child was Outlook (surprise, surprise). You’ll commonly need to center images, text, buttons, and the email's container for your designs. In this lesson we’ll learn some different techniques (and hacks) to center anything in emails.

How to re-create Top Bar with Foundation 6

Lesson #106Foundation

Foundation 6 is out in the wild. One of the major improvements is the navigation structure. The new Menu component is a huge leap forward because you can make a modular navigation you can use on most every project. In this lesson, you’ll learn how to use the Foundation 6 menu component to build a Foundation 5 Top Bar replica.

Clickable Prototypes for Those Who Hate Code

Lesson #105Foundation

We have all been there. You are doing an awesome job pulling together a great design and then your client asks the dreaded question, “well how does this work.” You then start cobbling together a couple of sentences to try and describe how the interaction should look and how it should work. Simply put, it’s not the best approach.

Creating a Believable User: The Quick Guide to Personas

Lesson #104Prototyping & User Testing

Personas aren't always necessary, but when we're trying to figure out different angles of attack when solving tough customer interactions, they help us take a look into what our potential users want and need. Having representations of our customers allows us to view the problem from a different perspective as we take into account factors that we may not have looked into before framing the problem in a new light. Check out this lesson to learn how to set yourself up to win with some killer personas!

Custom animations & transitions with Motion UI

Lesson #103Foundation

Last week we reviewed how CSS animations and transitions work. As promised, this time we'll go into how Motion UI, our Sass based animation library, will help you add meaningful motion to your websites. We’ll learn how to add animations to a Foundation project and how to use Sass to write your very own animations & transitions.

How to create CSS animations and Transitions

Lesson #102Foundation

Animation is hot right now. Adding motion to your UI can add a polished feel as well as bring attention and context to interactions. Last week, we released an open-source Sass animation library, Motion UI, on the ZURB Playground. So this week we’ll cover the basics of how to use animations and transitions in your projects.

Sketched Out: A Guide for Consistent Sketches

Lesson #101Ideation & Sketching

Sketching is a great way to convey basic ideas when talking about page layouts of all sizes and natures. We all have ideas, but if we don't draw them consistently, it's really hard to show your vision. Just because it's clear to us, that doesn't mean it's clear to someone outside. By creating a framework that you replicate will bring easier to understand interfaces and enhance your presentations when talking with your team. Great stuff!

What Specifically is CSS Specificity

Lesson #100Foundation

CSS specificity is a crucial topic when developing websites and apps. No one likes writing CSS only to see that it didn't do anything. And then waste more time finding what CSS selector is overriding your changes. It could be a great pain in the butt. Specificity is how CSS rules fight with each other. MDN defines Specificity as "The specificity is a weight that is applied to a given CSS declaration based on the count of each selector type." In this lesson, we’ll learn how CSS specificity works, what selectors win over others, and some tips to stay out of trouble when writing CSS.

Navigating to Success: Sketching Navigational Components

Lesson #99Ideation & Sketching

It's important to know when to sketch, and that's usually at the beginning of the process before we really know what's going on. We're going to focus on navigation this time around and the basics to make that nav help you give context to the rest of the sketch.

Boxin’ Up That Time: Timeboxing for the Big Win

Lesson #98Creative Direction

Sometimes we look at what seems to be an insurmountable task, and we ask ourselves, “How am I going to get through this?” The short answer is timeboxing, but how should we approach it? In this lesson, we’ll explore a couple tips and tricks to timebox more effectively and give some more definition to this oft mentioned strategy.

Date night with ZURB Foundation - How to set up a Date Picker

Lesson #97Foundation

Here’s the scenario: You are about done with the project, and ready to put a bow on it but then your client speaks those dreaded words: “Oh, we need an attention-grabbing responsive Date Picker as well.” In this lesson, we’ll learn how to install and configure FDatepicker for Foundation.

Giving Feedback with Context: Wired Edition

Lesson #96Mastering Design Feedback

In design related fields, feedback could be described as outside input that provides commentary on copy, visuals and/or layout. Here we'll take a brief look into what gets in the way of us giving good contextual feedback and how ZURB applies those maxims to Wired!

Get Your Ideas Rolling: Building Momentum Through Iteration

Lesson #95Ideation & Sketching

Kick the "big reveal" to the curb and embrace the fails that bring you a better win! As awesome as Apple is, "and one more thing" isn't the best way to go when working in an internal team setting or even with clients. Putting all of your eggs into one basket doesn't help anyone, there's no context for how you got from point A to B. Concept to finished product needs a road map and embracing little steps instead of great leaps is key.

Beyond Small, Medium, and Large. Foundation Breakpoint Crash Course.

Lesson #94Foundation

Breakpoints are the foundation of responsive design; Pun intended. Breakpoints are the widths at which different grids or CSS styles take effect. In Foundation we chose its default settings to accommodate most scenarios. But most doesn’t cover everyone. Sometimes a project requires different breakpoints. Here’s how you can tailor, use, and add Foundation’s breakpoints to suit your product's design requirements.

Get Your Responsive Emails in Order

Lesson #93Responsive Email Design

Ah, responsive email design — the art of stacking the thing on the left on top of the thing on the right for smaller screens. While this is a powerful concept in the world responsive emails, designers may sometimes want to, dare we say, stack the thing on the right on top of the thing on the left. Today we’ll explore the concept of source ordering using Ink and and the power of table-based emails.

1. Sketch it Up!

First things first, you need to know what it is you’re trying to build! Start sketching how your email is laid out on desktop and mobile. These should be quick and dirty and look something like this:

Assumptions suck; it’s time to get some real answers

Lesson #92Prototyping & User Testing

Building something on a stack of assumptions gets you into trouble later on in a project, usually resulting in a couple layers of iteration that could have been avoided. We’re supposed to be designing for people, not just us! A lot of heartache and all nighters to meet deadlines can be avoided by taking the time to get some real feedback outside of the office’s walls. We’re smart people and we want our products to be useful, so let’s put it in front of the consumer for feedback. They’re the ones paying the bills after all! The good news is that it’s a lot easier than you think to keep your assumptions in check with some good ol’ user testing.

Transform a sidebar into a slick Off-canvas menu

Lesson #91Foundation

Let’s face it, sidebars are a hot design trend trend right now. There are tons of examples of this pattern being used all over the web. They are useful for just about everything, including marketing sites, e-commerce and admin dashboards. The pattern is pretty simple. It’s a fixed position sidebar on larger screens, and on smaller screens it collapses off-canvas. Traditionally, these are made of two separate menu’s but today we’ll make this collapsing sidebar with the Foundation Off-canvas component.

Creating a Feedback Format that Sticks

Lesson #90Mastering Design Feedback

The sticky might as well be any Design team's mascot. I mean, seriously, who doesn't use stickies when writing down notes during brainstorming sessions, and user testing or even mapping out a product's features and future? We're exploring the best practices for that whirlwind combination of Sharpie and stickies in today's lesson.

Avoid a Cluttered Mess - Sensible Sass file Structure

Lesson #89Foundation

Setting up a sane file structure will really help you organize your projects. You’ll be better able to manage your Sass and so will the rest of your team.

De-coding Top Bar Customizations

Lesson #88Foundation

Responsive navigation - Top Bar in particular, is the most commonly used component in Foundation’s toolkit. Because it can create a useful desktop solution and a mobile friendly UI all with the same code, it can also be very complex. This is especially true when people try to heavily modify its structure.

Don’t worry. We’re here to help. This post will answer technical questions that have often been asked in the Forum about the Foundation Top Bar.

Defining User Goals and Business Needs

Lesson #87Mastering Design Feedback

Sometimes clients tell us what they want. Other times, what they need. Sometimes we spot problems with their websites right off the bat, or bring solutions to the first meeting.

And why not? As business owners, our clients know their products and services better than we. Meanwhile, as professional designers, we want to impress clients with our expertise. Keeping them happy is good business.

But that thinking doesn't lead to lasting solutions. Design isn't just about solving any ol' problem — it's also a process of uncovering the underlying issues. To dig deeper, we need to question everything. Here's how to assess user needs and business goals before you find yourself building the wrong product.

Design Big. Code Small.

Lesson #86Foundation

We're big advocates of designing mobile-first. Scaling up is easier than scaling down, simpler code is easier to maintain and easier for search engines to read, it forces us to make tough decisions about content early, and it encourages us to account for a fast-growing segment of web readership.

But the reality is … well, we don't always design mobile-first. Clients still prefer to see widescreen designs when working through problems, and it's harder to sell a tiny version of a grand vision. There is, however, a case for thinking mobile-first outside of design. Here are tips to coding mobile-first, even when you design mobile-second.

Customize Your Forms With Style

Lesson #85Foundation

Few people look forward to filling out forms. In fact, we'd venture to guess that no one gets up in the morning and says "ooh, today I get to enter my name and email!" Yet forms are important to guide customers, and even users acknowledge that they're necessary to access certain parts of the internet — like signing up for this email newsletter.

Form fields don't have to look uninviting. We can help users feel appreciated by making our input fields and labels more attractive. Here's a quick way to apply your own look to well-aligned fields and labels using Foundation for Sites.

Serve Users Only the Files They Need

Lesson #84Foundation

So you learned a way to make a desktop mega menu and how to fold that content into a mobile off-canvas component. But we don't want to load duplicate content onto the page because we will slow page load and confuse SEO. Instead we'll use the amazing Foundation interchange plugin to swap in the desktop menu on larger screens. In this lesson, we'll see how to only burden the page with one set of markup at a time.

Source Ordering Comes to Rows

Lesson #83Foundation

Source ordering — the ability to swap columns in a Foundation for Sites layout — is great if we want certain HTML, like a sidebar or navigation component, later in our HTML and earlier in our layout. It's also handy when ordering rows in coded prototypes without moving masses of HTML. The technique works because we know in advance how wide each Foundation grid column is. Shuffling them around is as simple as moving them the predefined width left or right.

But rows are different. We can't predict how tall they are, so we can't use CSS margin to move them around. It's possible to rearrange rows, however, to keep lesser-used elements at the end of your HTML but relatively high in your visual layout. All it takes is a little jQuery. Here's how to swap two rows in Foundation for Sites.

Nav Components Part 2: Build Off-canvas Navigation to Suit Mobile Devices Well

Lesson #82Foundation

In the last lesson we built a mega-menu that favors desktop browsers. Now we're ready to build the mobile version of our mega-menu: an off-canvas navigation component (whose name isn't quite as complicated as its HTML). 

You can do build one several ways: with the same content fidelity of the desktop version, or collapsed into sub menus. Because this menu is not too terribly complicated, we'll keep the content layout similar. Here's how to implement a mobile-friendly off-canvas nav component.

Nav Components Part 1: Design Advanced Navigation With Mega Menus

Lesson #81Foundation

They're big. They're popular. They're pains to deal with. They're mega menus, and today we're going to take some of the sting out of the code required to run them.

Most drop-down navigation components are, well, drop-down lists. Design is what puts the "mega" into a menu. But with customization comes a certain overhead that, luckily, we can show you how to craft. In the first part of our series on building navigation components for many kinds of browsers and devices, here's how to build a desktop-friendly mega menu with Foundation.

Supe Up Your Sass With Mixins

Lesson #80Foundation

Little things matter, and less code is better. To that end we have Sass Mixins: bits of code that give back CSS with one little command. Done right, they can evaluate a bit of information and give you something more useful. In this lesson we'll write a mixin to make text readable on different color backgrounds — even if the background changes.

Making Forms Finger-Friendly

Lesson #79Foundation

Touch devices are forcing us to rethink how people interact our products — and forms are no exception. Fact is, tiny keyboards require users to switch layouts and use precision that their fingers can't always achieve. The result: frustrating typos and invalid data entry.

Luckily the makers of iOS and Android saw the problem and, with some little-known, valid HTML, made keyboards easier to work with based on context. Here are different ways to improve input fields' usability on mobile devices.

Chart the Real User Experience With Touchpoint Maps

Lesson #78Ideation & Sketching

When we plan an app, we do more than figure out what screens to build. We think about every interaction that end users have with the app and the brand, including email and Twitter, tasks and goals, and in shopping sites purchased product delivery and returns. The entire experience.

We call diagrams of these interactions touchpoint maps. They're an important means of discovering the problems we'll solve with individual screens in later phases of the design process. Here's how to use touchpoint maps to plan successful products from users' perspective.

Let Your Voice Be Heard Through a Pull Request

Lesson #77Foundation

Open source projects like Foundation are the results of thousands of gradual improvements. And while contributions can improve any open source product at GitHub, some changes are more helpful than others. Here's how to make a successful contribution, or pull request, to an open source product — and be part of something great.

Autopsy of Failed Sketches Leads to Great Work

Lesson #76Ideation & Sketching

There you are, standing in front of your client, ready to impress with ideas before getting the green light to make functional prototypes. You pin your sketches to a board to review ideas. The sketches suck. Your client looks at you like you're an amateur. And suddenly your brilliant ideas are in doubt. What went wrong?

In the past we've talked about good sketching technique. To fully understand what that means, we have to look at the opposite. Get your Sharpies ready: Today we're looking at bad lo-fi sketches.

Start Up Foundation, Stat!

Lesson #75Foundation

Foundation for Sites's command line tool lets you download an entirely new Sass project, ready for you to fully customize for your projects. But how, exactly, do you get started? It's easy if you know the steps. Here's how to set up a basic Foundation for Sites project.

Center That Pesky Uneven Layout

Lesson #74Foundation

There's something to be said for symmetry. When done well, it helps designs look planned. Take the humble team photo page. If you have eight people in a three-wide grid, then it looks a little odd. Luckily, there's a way around that. Here's how to center an uneven number of items in your team layout with Foundation.

Build a Solid Layout with Foundation

Lesson #73Foundation

One of the most common requests we get is how to get started with Foundation. We mean, actually start writing code. Where do you begin? The short answer is "with a sketch," but for some, delving into code itself can be daunting.

This lesson will teach you to create a blog post template with built-in includes and a dash of custom Sass. Here's what we'll build …

Using Small, Medium and Large in a Foundation for Sites Grid

Lesson #72Foundation

Foundation for Site's grid is based on tried-and-true CSS — specifically, floats and clears. We developed the grid's syntax to make layout easier. That is, instead of writing endless floats and clears for each different layout element as they cropped up, we only want a few quick instructions. These instructions spell out how the layout should change depending on the size of the screen on which it's viewed.

Here's how it works.

Make Stylish Buttons in a Snap

Lesson #71Foundation

In the spirit of DRY — and making our lives easier — Foundation comes with a series of "mixins" that let you turn ordinary elements into amazing components like side-nav menus, tabbed lists, buttons and more. Here's how to use mixins to quickly add style to your product design.

Sketch Smart for Mobile

Lesson #70Ideation & Sketching

Talking about designing responsive websites is one thing. Getting to it is a different story. As much as we like to think mobile-first, in our experience, clients expect to see desktop designs first. Larger designs are more impressive and easier to digest. And sometimes we don't even review smartphone-savvy designs due to time constraints.

But they're important. Ignoring mobile devices can lead to sub-par experiences — and that's counterproductive. With that in mind, here's a technique to quickly sketch out a mobile design from widescreen.

Asking for Feedback Doesn’t Have to Suck

Lesson #69Mastering Design Feedback

Getting feedback is an important part of any creative process. Unfortunately, too often we get as far as "what do you think?" which — let's face it — doesn't give the other person much to go on. You're likely to get feedback on everything and anything, not just what you need.

But there are ways to negate this problem. Here are four ways to ask for feedback that doesn't suck.

How to Give Meaningful Feedback

Lesson #67Mastering Design Feedback

Feedback is an important part of progressive design. Challenging ideas and discovering false assumptions helps us build better products. But giving feedback is just as important as asking. 

Sometimes — well, oftentimes — people seeking feedback will ask "what do you think?" We discourage such questions because they lead to vague answers. When we do get good questions, giving good replies is just as important. Here's how to help your team with effective feedback.

How to Make Foundation 5 Your Own

Lesson #66Foundation

Foundation, our responsive framework, began as an internal tool to quickly bang out products. It didn't have a "look" because we kept using it on different projects, keeping only the most common design elements. Even today, we work hard to make it super customizable. Still, some sites have a certain Foundation-esque quality.

The idea of a "starting point" is crucial. No two Foundation sites should ever look the same, so we built in ways to edit just about everything. Here's how to bend Foundation to your will with Sass variables.

Make a Masonry Grid Responsive

Lesson #65Foundation

We're used to thinking of grids as blocks — a.k.a. "columns" — within rows. HTML and CSS lend themselves to this layout strategy, and users have come to expect the patterns that have become standard. But standard can get boring.

We won't claim that Pinterest's popularity came from its unusual yet functional "masonry" layout, but it sure stands out. Trouble is, six columns of masonry works fine on desktop, but looks awful on mobile devices.

But we found a simple way to make masonry layouts responsive. And like any pattern, it can be repeated. Here's how to create a masonry-style layout with Foundation's block grid and a little extra JS.

Avoiding the Spam Bin

Lesson #64Responsive Email Design

If you've worked in email design, then you've likely faced the laborious task of wrangling tested tables, compatibility nightmares, and templates that might or might not fall apart on mobile devices. But no matter how much time you spend designing a great email, if it's marked as spam then your work is for nothing. Here are tips to avoid readers' spam filters.

Puncture Bloated Sass Files

Lesson #63Foundation

Smaller files download faster than larger files. Faster websites make people happier than slower websites. So it's a no-brainer that smaller CSS files translate to a better user experience — extra bytes add up fast.

Now, Foundation comes with many options, add-ons and settings. A full install of Foundation 5.4 CSS from Sass, with all the trimmings, weight 304 KB. That's pretty dang big. Luckily, few projects need everything that Foundation offers. Today we're going to look at getting that number down.

How to Hook Users in 4 Steps

Lesson #62Mastering Design Feedback

Habit Testing fits hand-in-glove with the build, measure, learn methodology espoused by the lean startup movement and offers a new way to make data actionable. Habit Testing helps clarify three things: 1) who your devotees are; 2) what part of your product is habit forming, if any; and 3) why those aspects of your product are habit forming.

A prerequisite to Habit Testing is having some kind of product up and running. Of course, before launching even a minimal viable product, it’s a good idea to take a stab at your business model hypotheses and how your product will create user desire.

Keep on the Same Page With a Sketching Language

Lesson #61Ideation & Sketching

That we love sketching is no secret. Sketching is a great way to work through ideas before committing them to code, or even wireframes. They help us think through problems by putting them on paper. They're great for sharing ideas. That last part is crucial. ZURB designers don't just sketch — we communicate. To explain ideas at a glance, we sketch the same familiar elements. Here's how to make and use a sketching language.

Add Icon Fonts to Give Your Product Some Polish

Lesson #60Foundation

Small details matter in visual design. Take icons, for example: Little graphics communicate function or meaning while taking up almost no space. But until recently, they required downloading individual graphics and adding <img> elements to your code, or background properties to CSS.

Icons are a simple way to add tiny graphics that inform users — and add that extra little something to make your products look great. Fonts are vectors, which means they'll expand to any size you need without losing resolution. And once they're installed, they a cinch to apply and style. Here's how to quickly add icons to your website or app.

Develop a great naming convention for your project files

Lesson #59Foundation

Files come and go as we hash out a product. Today's wireframe is tomorrow's archive fodder, and last month's PSDs are nostalgia at best. Trouble is, when dealing with hundreds of files across dozens of clients, keeping track of which file is which is a job in itself. You know the situation — when you need that one you were working  on yesterday, where'd it go?! I swear it was on my desktop!

In creating Foundation for Apps (zurb.com/blog — Brandon's recent post), our upcoming framework that focuses on helping designers make app-like experiences, we've had to rethink how we name things. The range between semantic, generic, useful and intuitive is narrow. We also began to wonder about our process for naming files in general. After all, finding our source files is as important as a product's code and images.

Naming conventions are critical for smooth workflows. Spending time finding your own files — let alone someone else's — is a costly time-waster. Standards help people work together, and make it easy easy to find what you need weeks or months after you create (and forget, but suddenly need) them. In this lesson we'll explore what's in a name.

Sell Sketches to Influence Clients

Lesson #58Ideation & Sketching

Sketches are vital to successful product design. They help us decide what we need (and what we don't) early on; to visualize what our designs might look like, even before we go to clients; and to refine workflows before we jump into code or Photoshop, and define exactly what a person using the product should see at any given moment. They even make great icebreakers to get everyone thinking seriously.

But clients don't always see it that way. Some see scribbles when they expect polished comps. Here's how to present your sketches to a client who only sees useless scribbles.

Tips to Kick Off a Project Successfully

Lesson #57Mastering Design Feedback

Projects begin with a fair amount of ignorance. We don't yet know our client's business. They don't know design. Solving both problems begins in the kickoff meeting: a frank sharing of information during which both sides work to define the problems we face. We ask questions. We explore the landscape. We find our bearings and set goals. We do not solve problems — that comes later.

Successful kickoffs provide the foundation for a plan on which to move forward. Here's what to ask in a terrific kickoff meeting.

Boost Website Speed with Smart Image Compression

Lesson #56Foundation

The problem isn't a pretty sight. High-resolution or "retina" images use four times as many pixels as normal images —and that's four times as much bandwidth, which is already a problem. Meanwhile, people prefer faster websites but their mobile devices tend to load pages slower than desktop/laptop computers. Compared to ethernet, wifi and 3G are just plain slow.

Here's how to make the most of your bandwidth to create faster websites — and keep end users happy.

Five Minutes Towards an Accessible Page

Lesson #55Foundation

We all want to do right. We want to allow people with vision or motor skill problems to visit our sites. Yet very few of us do. So what's the problem?

Well, overhead is one frequent issue we hear about. Some designers say they either don't know how or don't have time. The interest is there. The means… not so much.

Today we're going to address both. 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

Lesson #54Foundation

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.

Zap Color to Up Your Design’s Value

Lesson #53Creative Direction

Branding, accessibility, aesthetics, programming — color touches so many aspects of design that we often take its power for granted. It's said that not all colors are created equal — actually some are equal in a surprising way. Colors with different hues can have the same value, and that's bad news for design.

Ostensibly different colors with different hues are different colors. But when leading visitors around a page, contrast is king. This is especially true for people with color blindness.

Here's how to test your design not just for accessibility, but also for sighted users.

Master CSS Colors With This Sass Function

Lesson #52Foundation

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

Lesson #51Creative Direction

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

Lesson #50Foundation

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.

Summarize Customer Feedback through Affinity Diagrams

Lesson #49Mastering Design Feedback

None of us like to hear our work has problems. Sure, we all want to improve our design skills, but user criticism carries a negative vibe — “here’s something you did wrong.” Ouch.

Good news: You can turn problems into steps that lead to improve your work. Grouped notes — or “affinity diagrams” if you want to sound impressive — give us an accurate gist of what people are saying. The result is something cool you can use to make better digital products, show users that you pay attention to their needs, and even impress your coworkers with your understanding of the problems at hand. Here’s how affinity diagrams help you make sense of users comments.

Capture Brilliant Dry Erase Board Photos

Lesson #48Mastering Design Feedback

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

Lesson #47Mastering Design 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

Lesson #46Ideation & Sketching

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

Lesson #45Foundation

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

Lesson #44Mastering Design Feedback

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

Lesson #43Prototyping & User Testing

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

Lesson #42Foundation

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

Lesson #41Ideation & Sketching

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

Lesson #40Foundation

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

Lesson #39Ideation & Sketching

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

Lesson #38Responsive Email Design

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

Lesson #37Prototyping & User Testing

Testing a product workflow like a signing up or checkout process requires more than asking someone to check it out. You need to plan the test itself, which requires asking questions without leading test participants to your conclusions. After all, the purpose of user testing is to learn from other people's points of view, not to impose your assumptions upon them.

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

Lesson #36Prototyping & User Testing

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

Lesson #35Foundation

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

Lesson #34Foundation

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

Lesson #33Mastering Design Feedback

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

Lesson #32Ideation & Sketching

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

Lesson #31Creative Direction

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

Lesson #30Creative Direction

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

Lesson #29Prototyping & User Testing

Assumptions are deceptive. We think we're doing well, making decisions based on prior experience … and then customers get confused on our websites, miss information we think is obvious, or can't find what they're after. Did we make a mistake? Quite often confusion happens simply when our mental model is different from our customers'.

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.

Put OmniGraffle Styles to Work

Lesson #27Prototyping & User Testing

We use OmniGraffle to create hi-fi wireframes to turn hand sketches into comps ready for Photoshop visual mockups. Aside from being digital — with the undo and ability to share — it's a step up from sketches because we can apply styles.

Styles in OmniGraffle are an object's various look-and-feel attributes like font size and color, background, border, and effects. They're great for making objects look like what they are: Headlines and buttons, for example, without worrying too much about the final visuals.

But styles can get out of hand. Managing many objects, each with their own look, is time-consuming. And when we want to create a clear, concise, general hi-fi comp, wrangling styles is important. Here are three ways to make styles in OmniGraffle work for you.

Prevent Trouble With Social Logins

Lesson #26Foundation

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

Lesson #25Prototyping & User Testing

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.

Wrangle Your Interchange Files

Lesson #24Foundation

Foundation Interchange lets designers load only the most appropriate HTML for a given device. Mobile browsers don’t have to waste bandwidth loading content formatted for wide screens, and vice versa.

But this means each “page” may have many separate documents on the web server. You can organize files any way you please. As long as the paths are correct, Interchange will work fine. However, we’re developing some best-practice techniques. Here are a few techniques we’ve learned.

Responsive Email Gotchas to Avoid

Lesson #23Foundation

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

Lesson #22Mastering Design Feedback

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. Literally.

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 thoughful comments sometimes take time, you can learn to give initial feedback on web design in 60 seconds or less.

Simplify Your Visual Design

Lesson #21Creative Direction

It’s not uncommon for clients to request simple and/or clean designs. Few design briefs ask for a convoluted mess. But what makes simple and clean? In our experience, the two don’t always follow each other. A few simple techniques can simplify even complex designs without reducing content. Here are three lesser-known tips to simplify any visual design.

Change Foundation’s Default Breakpoints

Lesson #20Foundation

Foundation 4.3 and later come with two breakpoints — the pixel widths at which different grids take effect. We chose its default settings to accommodate most scenarios. But most doesn’t cover everyone. Sometimes a project requires different breakpoints. Here’s how you can tailor Foundation to suit your product design’s requirements.

Changing Orbit’s default slide

Lesson #19Foundation

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.

Using Off-Canvas Navigation

Lesson #18Foundation

Mobile-optimized designs and complex navigation are natural enemies in the wild. But they can work well together if the navigation disappears when it’s not necessary. Here’s how to implement Foundation 5’s side navigation plugin.

How to Not Abuse Design Patterns

Lesson #17Creative Direction

Designers don’t practice their craft in a vacuum. There’s no shortage of websites about inspiration for web design. If you love what someone else has created, there’s always a temptation to mimic them outright. But there’s a fine line between seeking inspiration and copying. Here are techniques to get create your own ideas based on other people’s work.

Calculating Pixels From Ems for Mobile-Friendly Design

Lesson #16Foundation

Ems are a unit of measure that can make pixel-oriented designers cringe. Based on typography, an em — so named because its width is the same height of a capital M — scales with the relative size of text. That’s great for making readable content. Not so much for pixel-perfect graphics. But the two can get along. Here’s a quick way to get started with ems in web design.

Solicit the Right Types of Feedback

Lesson #15Mastering Design 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

Lesson #14Foundation

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

Lesson #13Mastering Design Feedback

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

Lesson #12Foundation

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.”

Balance Visual Weight in an Icon Family

Lesson #11Creative Direction

When we talk about using grids in design, we usually refer to Foundation, our responsive CSS framework. But grids are just a tool to create alignment and visual rhythm in any composition. And even then, they’re guides, not rules. Sometimes we may adhere to the grids more than what they represent.

They’re the same size — according to a strict grid. But people don’t see pixels or grids. They see forms, colors, contrast — what we call visual weight. Take away the guides to reveal how much (or little) mass each icon appears to have in relation to its neighbors:

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 Sketch Form Elements

Lesson #10Ideation & Sketching

Within our 26-strong team of designers and developers, communicating ideas accurately is as important as communicating them quickly. We developed a standard method for sketching ideas that everyone understands, including clients unfamiliar with how sketching fits in our design process.

Forms are among the most complicated interfaces that users have to deal with. Reducing sketches to rectangles, circles, and a series of squiggly lines helps streamline the process of streamlining web forms.

Here’s how you can draw form elements.

Guide Your Visitors With Visual Cues

Lesson #9Creative Direction

Visual cues are your method of choice when representing sites’ structure and content in the best possible way. Provide clarity and a helping hand for your visitors to find their way around your site and content fast. You will lose them immediately otherwise.

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

Lesson #8Foundation

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

Lesson #7Creative Direction

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 Plan a Webpage Design With Progressive Enhancement

Lesson #6Foundation

The allure of new techniques is hard to resist. But there’s a time to revel in “new features” and a time to think “universal.” Progressive enhancement is the idea of designing from a most frequent denominator — what most people can access — and building out. It’s more than mobile-friendly. It’s everyone-friendly with benefits tailored for edge cases.

Here’s a three-minute lesson how to design from the inside out.

How to Choose Among Foundation 4's Visibility Classes

Lesson #5Foundation

Changing layouts to suit different devices is a staple of responsive web design. But sometimes images or other elements only work well at desktop- or mobile-size, but not both. 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 Apply Skeuminimalism

Lesson #4Creative Direction

Flat designs are popular today for a reason: They work well in responsive web designs, and people don’t need skeuomorphic hints anymore. But that doesn’t mean we should ignore photo-realistic design elements — to say nothing of photos themselves. Here’s how to use flat and skeuomorphism together in three minutes.

Using SVG without hacks

Lesson #3Foundation

Scalable, retina-ready, tiny file sizes, and fallback support for IE6. Let's take a progressive enhancement approach to using SVGs.

SVG is a fantastic standard for embedding rich vector graphics into web pages without the usual overhead associated with loading large images. Full-page background graphics like Fairhead Creative's and Foundation's are feasible thanks to the formulaic nature of SVGs.

How to Draw a Straight Line

Lesson #2Ideation & Sketching

In this video you’ll learn the three key techniques to drawing a straight line.

Move your arm, not your wrist

• Keep another piece of paper under your drawing sheet. This provides a smoother surface for the pen to move across.
• Move your arm and not your wrist. This keeps the pen at the same angle with the paper and makes the line weight consistent.
• For practice, close your eyes. This helps you focus on not using your wrist.

How to bridge rows in Foundation

Lesson #1Foundation

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.